前日の記事は図解!ネットワークの7層を実務に当てはめてみたでした。(ほんのりいいね数多い!)今回は業務の中でフロントエンドの開発をする機会があったので、そのために勉強したときのことをまとめようと思います。自己紹介まずざっと箇条書きで。Kakki0310渋谷で働く20歳エンジニア業務は主にサーバーサイド(PHPメイン)個人の趣味としてはRuby(rails)を使って開発しているプログラミング歴は大体1年と半年くらいシェアハウスに生息Reactをメインとしたフロントエンドの技術に関してですが、絶望的にわからなくてhtml、cssが書けるくらいでした(もはやフロントエンドというのかも謎)。そんな中開発を担当していたプロダクトのフロント部分をReact+Redux+Typescriptで作ろうということになったので、どうにかチャレンジしてみたいということで、超デキる先輩エンジニアの元で粛々と勉強を進めていきました。何をやったのかまず僕がフロントエンドの開発をしていた期間でどこまでできるようになったかというとFluxアーキテクチャーの構造にそって実際のプロダクトに対して「あーここだいたいこの辺!」といえるようになったコンポーネントの構造を理解する力、「親->子」へとデータを渡していく流れが感覚的につかめるようになった見様見真似は多いものの、大体のコードの内容を理解して書くことができるようになったの3つくらいです。業務でコンポーネント部分のごくごく簡単なissueをこなすReduxの公式チュートリアルを見ながら、ちょっとアレンジして簡素なアプリケーションを作成reduxのフローに沿ってサーバーサイドからAPI取得した情報をコンポーネント側で表示するissueをこなすみたいな感じでした。文字通り、業務内で先輩の書くコードをひたすらレビューしました。いっても最初はもはや何を書いているのかさっぱりわからないので、逐一説明をもらいながら一緒にレビューをするペアレビューの方式で徐々に徐々に理解していきました。Reactの公式チュートリアル(マルバツゲーム)の実施それでも実際に書かないと体系的に勉強できない、ということでReactの公式チュートリアルをやってみました。これは自分のローカル環境で立ち上げからやるものではなく、サイト内でコンポーネントの部分のみ勉強ができたのでかなりおすすめです(というかみんな勧めているのではないだろうか、公式だし)。https://ja.reactjs.org/tutorial/tutorial.htmlあとはプロゲートで結構レッスン出してるっぽいので、やってみるといいかもです。https://prog-8.com/languages/react(自分がReactを勉強し始めたときはまだ2セクションくらいだったのが、今確認すると4セクションくらいになってる。業務でコンポーネント部分のごくごく簡単なissueをこなす例えばこんなコンポーネントがあったとします。Post;こんなコンポーネントに対して、とある場所にリンクを付けるという簡単なissueをこなしたりしました。Post;みたいなかんじです。html書いてるみたいで割と簡単っすね。気をつけないといけないのは、このコンポーネントが持つ責務?のようなものを崩さないようにすることです。ボタン専用のコンポーネントだった場合、そのボタンの周りに変な余白がついていたら、他のコンポーネントで呼び出しをしたときにちょっと扱いづらいです。そんな「そのコンポーネントの責務」を意識したりしなかったりして、切り出されたissueに取り組んでいきました。(このあたりはデザインの内容も絡んでくるので詳細知りたい人は「アトミックデザイン」と検索して調べてみてください。言っときながら自分は読めていないという。「コンポーネントはちょっとサワれる!!」となったものの、「あれ、じゃあ肝心のデータってどうやって取ってきてんの?」となります。サーバーサイド側もやっていたため、自分がひたすら書いていたApiの情報を取得していることはわかっていたのですが、そこからどうやってコンポーネントまで情報を持ってくるのかの理解をしていませんでした。ここでReduxの登場です。ここでReduxか、となりました。疑問を解決するためreduxの公式チュートリアルに沿って自分でredux+reactのアプリケーションを作ってみることに。ちなみにapiを叩いて情報を取得する部分はこの中ではやっていないです。https://redux.js.org/basics/basic-tutorialまたこのreduxを理解するための記事として、以下をかなり参考にしていました。reduxのアプリケーションを実装するにあたってものすごくイメージのしやすい図だったので、何度も見返すことをおすすめします。reduxのフローに沿ってサーバーサイドからAPI取得した情報をコンポーネント側で表示するissueをこなすいよいよ実務での実装です。「ここやってみなよ〜」と言われ、現在ログインしているユーザーの情報をフロント側で取得して表示をするまでの実装をやってみることに。Lancers内で行なっているreduxフローの書き方ですが、modulesというフォルダを切ってその中にオブジェクトごとのファイルを作成してデータ取得のために必要なすべての定数、関数をその中で定義します。sagaなど)例文は以下になります。}}作成した関数をそれぞれrootReducerやrootSagaに加え、storeにセットして,準備完了です。]);}あとは、コンポーネント側で、watchUserを呼び出してやれば(dispatchしてやれば)、User情報を取得してくることができます。(上のコードはtypescriptでごりごり書いているので別途型定義ファイルにActionやReducerの型を定義して型付けを行なっている)これで、業務の中で(なんちゃってな)フロントエンドの実装ができるようになりました!最後に1番から5番までを通してかかった期間は3,4ヶ月ほどでしたが、かなり理解するのが大変で勉強中も戸惑ってしまうことばかりでした。教えてくださった先輩や実務の中でフロントエンド開発ができたその環境があったからこそ、ここまでできたのかなと思います。未熟者ではありますので、再度業務でフロントエンド開発に携われる機会がありましたらフロントエンドの開発を引っ張っていけるような人物になれたらと思っています。最後まで読んでいただきありがとうございました。駿努@Syunto07kaFollowランサーズ株式会社テクノロジーで誰もが自分らしく働ける社会をつくる。upLoginユーザーは見つかりませんでした。