ワイ「フロントエンドなんもわからん……」←さすがにやばいと感じたので入門することにしました

プロローグ（茶番）

～昨年10月、インターン先にて～
上司「kenさんにはこの機能の開発を担当してもらいたいと思います」
私「はい」
上司「機能を見てもらえればわかる通り、一部フロントの修正も必要になるのでわからないところがあれば聞いてくださいね」
私「承知しました」

～その後～
私「コード読んでるけどなんもわからん……。俺が今回いじるべきなのはどれ？てかpropsってなに？Redux？？？あれ、cssってどう適用させればいいの？」

私「わからないことが多すぎて何から聞いたらいいのかわからん……。」

この記事について

こんにちは、kenです。普段はGoとPythonを使ってます。
プロローグで読んでいただいた内容はすべてノンフィクションです。インターン生ながらにしてありがたいことに新規機能の開発を任してもらうことがあったのですが、フロントエンドがなんもわからんすぎて何度も「おれは!!!弱いっ!!!」となりました。(あの後上司にめちゃめちゃ助けていただきました……。)

この件がきっかけでフロントエンドをきちんと勉強することにしたので、今回は私がどのようにして知識0の状態からフロント学習を進めたのかについて時系列順に振り返っていきたいと思います。
本記事が私と同じく「フロントやってみたいけど何から学べばいいのかわからん……」となっている人の参考になれば幸いです。

前提

昨年秋の時点での、私のフロントについての理解度をここで書いておきます、

• HTMLとCSSを使って簡単なWEBサイトくらいなら作ることができる
• JavaScriptは2年前に少し触ったことがあった、でもalert()メソッドくらいしか覚えてない
• Reactについては完全に無知、 JavaScriptのライブラリであることくらいしか知らない

学習記録

#1 宣言!¹

昨年の10月はちょうどインターン先の目標設定の期間だったので、目標設定シートにて「今期はフロント勉強します！」という宣言をしました。誰かに宣言することで自分をフロント学習から逃げられないように追い込みます。こういうの私は結構大事だなあと感じていて、この危機感がいやでもやる気に繋がります。目標設定じゃなくても個人のtwitterとかで固定ツイートにしてみるとかいいかもです。サボり癖がある人（私も含めて）は特に、やりましょう。

#2 読書!

同じく昨年10月頃、フロント学習のために次の2冊の本を購入しました。

1冊目

React Angular Vueをスムーズに修得するための最新フロントエンド技術入門
この本はフロントエンドの基本的な概念から詳しく解説しています。例えば以下のようなトピックが含まれています。

• シングルページアプリケーション（SPA）の概要
• 無限スクロール技術の解説
• JavaScriptとTypeScriptの違い
• 開発環境構築の手順
• 便利なJavaScriptライブラリの紹介
• 主要なフレームワーク（React・Angular・Vue）の特徴
• ブラウザAPIやWebAPIの説明

この本は、「バックエンドエンジニアが最新のフロントエンド技術を学ぶ」という対話形式で書かれており、非常に読みやすい点が魅力です。フロントエンドの各分野を学ぶ前に全体像を把握することは効果的な学習ロードマップを作成する上で重要だと思うので、読んで損はないと思います。1日もあれば読み終わるのも嬉しいポイントです。

2冊目

次に読んだのはReactの本です。
モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応) (Informatics&IDEA)
これはプロローグに出てきたインターン先の上司の方におすすめされて購入しました。
この本ではJavaScriptの基本的な文法から出発してReactの文法へと踏み込んでいくという構成になっています。（一部TypeScriptについても扱っています）
ここでも例をあげると次のようなことについて書かれています。

• DOM、パッケージマネージャー、モジュールバンドラー、トランスパイラについて
• アロー関数、スプレッド構文などについて
• 従来のJavaScriptでのDOMアクセスについて
• 環境構築の仕方
• Reactの基本について（コンポーネントの概念やPropsなど）
• レンダリングの最適化
• JavaScriptからTypeScriptへの書きかえ

前に書いたように私自身JavaScriptについてかなり忘れていたので、そのおさらいからスタートしてくれるのは大変ありがたかったです。前提知識についてもほとんど必要なく、先ほど紹介した1冊目の本を読んだ後であれば難なく読めるかと思います。これも2日あれば読み終わるかなといった分量で、パパッとReactについて勉強したいという方にはおすすめです。

#3 実践!

本を読んだ後に取り組んだのはReactを使った個人開発でした。（やはり手を動かさないと身につかないので……。）
私が作ったのはWeb上でマークシートを再現したものです。
どうしてマークシートを作ったのかというと、単に私がマークシート式の試験を勉強をする時にあったら便利だなと思ったのと、解答用紙のレイアウトを見たときにコンポーネントの概念をうまく取り入れられそうだなと考えたからです。

ここにデプロイしてるので実際に動かしていただくことも可能です。（Githubのリポジトリはこちら）
制作時期はだいたい12月末～2月初旬で、手が空いたときにチビチビつくってました。

今でこそなんとか人にお見せできるレベルの代物になってますが、最初はわからないことだらけでマークシートの選択肢の部分を作るだけでも大変で丸1日かかりました。
（クリックすると枠の中が塗りつぶされるということだけの実装がわからなくて一日中調べてました。（照））

reactなんもわからん侍による今日の進捗 pic.twitter.com/5Le2uknial

— ken (@_l_ken_l_) December 28, 2022

保持しているstateによってclassNameを切り替えて適用するcssを変えるというだけだったんですけど、それがわからずなかなか苦労しました。

こんな感じで最初のうちはわからないことがあってもそれを検索するための知識もなかったりするので、なかなか思い通りに事が進みませんでした。でもわからないなりに試行錯誤していくなかでだんだん知識が身についた実感があるので、このしんどい時期も必要だったのかなと思います。（もちろん近くにわからないことを聞ける人がいるならその人を頼るのが良いと思います。。）

---

ここで私がこの個人開発を進めるにあたって大事にしていたことを書いておきます。それは

「最初から完璧を目指さずにとりあえず動けばヨシ！！」

です。

私は最初

「ディレクトリってどう分けるのがいいんだろう……」
「この部分もっと綺麗に実装できそうだけどうまくいかないな……」
「TypeScriptよくわからん……」

みたいなことを考えてよく手が止まっていました。
でも、わからないことはあとから見直せば良いです。いったんOKということにして先に進んじゃいましょう。

「ディレクトリってどう分けるのがいいんだろう……」

→ ディレクトリ分けに悩んだらいったんcomponentの大きさで区切ってみて、不都合が生じたらまた考え直そう。

「この部分もっと綺麗に実装できそうだけどうまくいかないな……」

→ もっと綺麗な実装ができるのかもしれないけど動いてるから見直すのはあとでにしよう。

「TypeScriptよくわからん……」

→ JavaScriptでいったん書いておいてあとで移行させよう。²

最初から完璧を目指したくなる気持ちもわかりますが、60%くらいの完成度でいったん作っちゃいましょう。100%を目指すのは60%仕上げたあとでも全然間に合います。
慣れないことの学習に最も大切なのはモチベを絶やさないことです。そして少しずつでも開発が前に進んでいればそれがそのままモチベになります。細かいことが気になるのはよーくわかりますが少しでも前に歩を進めることを意識しましょう。

結局この個人開発で身についたスキルは以下の通りです。

• React Hooks(useState, useEffect, useContext, useCallback, useMemo, useRef)の使用
• styled-componentsの導入
• bootstrapの使用
• reduxの使用
• ドラッグ&ドロップを使った行の入れ替えの実装
• react-routerの導入
• react-selectの導入

こうしてみると結構基本的なところは触れられたかなと思うので、題材としてマークシートを選んだのはかなり良かったなと思っています。³

#5 読書! 2

#4の個人開発を経てさらなる課題が見えてきました。
その一つがJavaScript/TypeScriptへの理解のなさです。
#3で紹介した2冊目の本で簡単なJavaScriptのおさらいはあったものの実際開発を進めてみると行き詰まることが多くやはり本格的に学習しないとダメだなあと思いました。
またJavaScriptからTypeScriptへと移行する過程で、型定義を書き足していく必要があったのですが一部どうしてもわからず泣く泣くanyを使うことになりました。
もっと本腰を入れてJavaScript/TypeScriptを勉強せねば……！！そんなこんなで今読んでいるのが次の本です。

プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで(Software Design plus)

この本を選んだ理由としてはJavaScriptに対して理解が浅くても、それを補いながら読み進められるように構成されていたからです。現在6章と7章以外は読み終わったんですが、この本を選んで良かったなという印象です。
各トピックに対して非常に精緻に書かれていて「もっと深くJavaScript/TypeScriptのことについて知りたい！！」という私にはピッタリの本でした。引き続き残りの部分を読んでいこうと思います。

あとこれと平行してtype-challengesにも最近は挑戦しています。お題に対して適切な型定義を与えるというゲーム（って言っていいのかな？）を通してTypeScriptの型を学ぶことができます。自分のPCに環境をつくることなくWeb上で全て簡潔するので楽に始められるのが良いところです。まだ初級レベルしか解けないので中級レベルも解けるように精進していきます……！⁴

最後に

簡単にでしたが、ここ数ヶ月での私の勉強記録を振り返ってみました。いかがでしたでしょうか。
まだまだ勉強すべきことは山ほどあると思うので、そのアドバイスがもしあればコメントいただけると幸いです。
この記事を読んで、フロントエンド学習で躊躇していた方が一歩前進できることを願っています。
最後まで読んでいただきありがとうございました。

1. アニメ「けいおん!」のサブタイトルっぽさを意識してます、この脚注を読む前にこれに気づいた人は友達になりましょう。 ↩

2. この選択は意外にも嬉しい副産物をもたらしてくれました。それはTypeScriptとJavaScriptの違いを意識することができたということです。開発を進めるまではTypeScriptの型付けのありがたさを、頭ではわかっていながらも実感としては持っていませんでした。しかし実際にTypeScriptへの移行を行うと、なんとなくふわふわとしていたJavaScriptのコードがカッチリとわかりやすい形に変貌していくのがわかり「これがTypeScriptの力なのか……！」と感じました。 ↩

3. いつかこの開発についてより詳しく振り返った記事を書きたいと思ってます。 ↩

4. インターン先のフロントの方に聞いたら実務ではtype-challengeの中級以上のテクニックが求められることはほぼないそうです。でもそんなの関係ねぇ！ ↩