Zenn
😀

バックエンドエンジニアがフロントエンドエンジニアとしてデビューするまでにやったこと

2022/01/31に公開
frontend
tech
  • こんにちは。現在新卒1年目で直近はフロントエンドを担当している駆け出しのフロントエンドエンジニアです。
  • フロントエンドの歴としては約3ヶ月となり、以前はバックエンドのエンジニアをしていました。
  • 今回ありがたいことにご縁があり、フロントエンジニアとしてデビューしたため、デビューまでにやったことを書いていきます。
  • この記事が、これからフロントエンドの方も担当し始める方の初学の際の一助となれば幸いです。

前提

  • 当時扱う予定の業務内容は、React・TypeScript・Next.jsとのことだったので、それに基づいた内容を書いていきます。
  • ただし、フロントエンドも担当するという話が決まってから、勉強に費やせる時間が少なかったため、やれていないことが多くあることをご了承ください。
  • 以下の本文では、「準備でやったこと・やってみたことに対する感想・準備したスキルセットで業務に当たってみて詰まったこと」を書いていきます。
  • また、勉強し始める前の自分のレベルとしては以下のような状態です。
    • Rubyによるサーバーサイドのエンジニアの業務経験
    • JavaScript 第5版を読んだことがあり、jQueryを用いて業務したことがある程度の経験
  • それでは本文に入っていきます。

React

やったこと
感想
  • やったことの上記2つは完全に下調べなしで取り組み始めてしまった内容のため、今思うと自分の目的に対しては遠回りしてしまった勉強内容だったという感覚があります。
    • Reactチュートリアルは全てクラスコンポーネントで書いていたり、hooksを使っていなかったりと、現在のReactでできることより古い内容が記述されています。
    • React Hooks 入門は関数コンポーネントなどは触れられていますが、個人的には古い記述が目立つと感じたため、お薦めはしていないです。
    • そのため、関数コンポーネントを使用したqiitaの記事などもあるので、そちらを参考することをお薦めします。
  • hooksについては、公式の説明を読むだけでは使い方も理解しづいと思われるので、理解の助けとなる書籍を別で探しました。そこで見つけた上記の本は初学者には良いと思いました。サンプルコードも多く、使い方だけでなく使うタイミングにまで触れられているため、基礎は固められると思います。

TypeScript

やったこと
感想
  • 「速習 TypeScript」は浅く広く、文法について使い方が紹介されているため、初学者が全体感を掴むためには非常に良いと感じました。一部、なぜ存在しているのか分からない文法があり調べる必要がありましたが、TypeScriptについてザックリ知るには有効な本だと思います。
  • また上記の本だけでは、サンプルコードとなるものが少なく、実践が足りないと感じたため、ReactチュートリアルをTypeScript化しました。やはり実際に書いてみることで詰まる部分は出てくるため、なんらかの形で実際に書くことは、非常に良いことだと感じました。

Next.js

やったこと
感想
  • チュートリアルの内容は、何ができるかということに焦点を当て、話が進められているため、思想を学びつつ、Next.jsの文法を学ぶことができます。
  • 「はじめてつくるNext.jsサイト」の方は序盤にディレクトリの階層構造の全体像を示して、話を進めてくれるため、こちらの方が初学時には分かりやすく感じました。
  • そのため、「はじめてつくるNext.jsサイト」で全体感を掴めたら、Next.jsのチュートリアルで基礎のより詳細な部分を詰めるといった勉強の進め方が良さそうです。

業務で特につまずいた点

  • APIに対してリクエストするコードの実装
  • 適切な粒度で分けたコンポーネント実装
    • 業務となると、当然コードを運用・改善していく必要があります。そこで、適切な粒度・インタフェースでコンポーネントを分けることが重要となってきます。そのため、SOLID原則を意識した実装を早めに取り入れておくと、他者が見ても分かりやすいコードを書く習慣付けに近づくと思います。

最後に

  • ここまで読んでいただき、ありがとうございます。
  • 業務に取り組んでみて必要だと感じた部分も加えて書いているため、上記の状態で開発に必要最低限の範囲を押さえられるようになっていると思います。
  • この記事を通して、皆様のフロントエンド入門への障壁が下がることを望んでおります。
  • また、紹介した文献について質問や指摘があれば、コメントいただけると助かりますのでよろしくお願いいたします。

参考

Discussion