ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

React(JSX)でループ #9

今日やったこと

Reactが少しずつわかってきた

後輩に勧められ、ポートフォリオReactで作ってみることにしました。

Webアプリとかではないので、Reactでコンポーネント化してもたかが知れてるのですが、練習ということで。

進捗↓

f:id:uutarou:20170523231028p:plain

まだCSSとか当たってない素の状態なのでこんな感じ。

一応各部品をコンポーネント化してあって、配列をpropsに渡すと表やらリストやらが吐き出される…みたいな。

この中で、ループを使う必要が出てきたので、調べてみた。

React.jsのJSXで条件分岐・繰り返しを記述する - Qiita

上の記事に書いている通り、{}の中で関数を宣言するだけですね。

{}の中にいきなり{this.props.array.map((item) => {return ...}}みたいにやったらエラー出て3分くらいう〜んとなりました。即時関数を作った上で使わないとダメみたいですね。(JSXの仕様について全く理解していないので何かぶっ飛んだことを言っている可能性あり)

やっぱり作りながら躓いた部分を調べるのが僕には合ってるっぽいですね。昨日まで悩みまくってた部分が少しずつ分かる様になってきた気がします。

学校のポータルに遊び心を

私の学校には、出席等を行うポータルサイトがあるのですが、サークルの後輩が上から自作のCSSを当ててナビゲーションを虹色にしてたので僕もなにかやってみたくなってDeveloper toolを開いて簡易的にやってみました。

てへぺろ☆(・ω<)

何をやったか一応書いておくと、body要素のstyleにtransform: rotate(175deg)みたいに書いただけです。当然といえば当然なのかもしれないですが、bodyに対してもこういったスタイルが当てられるのはなんだか意外でした。

keyframeと併せて使えばアニメーションでグルグル回したりもできますね。たのしい。CSS3しゅごい…。

雑談

久々に火曜のサークルに行った気がします。

おもしろいことを知ってる人や、やってる人がいる環境に身を置くと色々と気付きがあっていいですね。

自分も頑張りたいです。


突然の宣言で始まったこの毎日技術日誌ですが、なんだかんだ1週間を突破して、22時すぎるとブログを書かねばとパソコンに向かってしまう癖が付きつつあります。書き溜めゼロで運用してるので内容の濃さにばらつきがありますが、ぜひ今後ともお付き合いください…!