このエントリははてなエンジニア Advent Calendar 2021の20日目です。
昨日は
id:astjさんのHomebrew Formula の CI を GitHub Actions で行う - 平常運転でした。
はてなリモートインターン2021 フロントエンドブートキャンプ 講義資料
今年の夏に行ったはてなリモートインターン2021でインターン参加者にJavaScript／TypeScriptとReactを用いた現代的なフロントエンド開発についてキャッチアップしてもらうためのはてなリモートインターン2021 フロントエンドブートキャンプの講義を担当しました。
この記事では、この講義資料の作成時に考えていたことや、この資料で扱いきれなかったことなどについて補足をしたいと思っています。前半では講義資料自体に関するフォローを、後半ではこの資料を起点にフロントエンドについて学ぶ場合に合わせて扱うと良さそうなキーワードや関連資料について挙げてみたいと思っています。
講義の立ち位置
この講義はインターン生が後半期間に実際にチームに配属されて、TypeScriptやReactと向き合う必要が出てきた時の道標になるというのが第一の目的でした。スローガンとしては「セマンティクスとかその辺はふっ飛ばして、手で動かせれば良い状態を目指す」という感じです。インターン生の中にはウェブ開発はやったことがあってもReactやTypeScriptに馴染みが無い人も居るだろうということで、そういう人たちでも初手で萎縮してしまわずに挑戦してもらえるように、いきなり目にするとギョッとするかもしれない記法や表現を中心に紹介をするというチョイスになっています。一方でフロントエンドが大好きな参加者にも何かを持って帰ってもらえるものがあるように、読み物としても楽しめる付録や脚注などを多めに付けています。
講義時間が1時間ということでハンズオン的な手を動かすパートなどは無しで、座学全体としても圧縮気味に情報をギュッと詰め込んでいます。
講義資料のハイライトと補足
モダンなJavaScriptを書く上で覚えておきたい概念
いわゆるAjaxやjQuery時代のJavaScriptをチラッと読み書きしたことがあるような人に向けて、ES6以降のモダンなJavaScriptにおけるポイントを紹介しました。やはり大きな概念はPromiseの概念とModuleの導入ということで、その辺りを中心に扱っています。アロー関数なんかも初めて見るとギョッとしそうなので扱いました。classも一応紹介しましたが、実はそんなに手で書くことはないかもしれませんね。
その後はTipsと称しつつ、追加で for-of や Nullish coalescing operator (??)、Rest parametersなどについても紹介しています。
TypeScriptについて
ここは若干厚めに The TypeScript Handbook などを参考に基本的な型表現から型ガードなどについて紹介しています。
実際に手を動かす時間を取りにくいという前提があったので、利用例のコードを各ページに多めに載せています。ここでも初めて見る時にギョッとしないようにConditional Typesなどについても少しだけ触れています。
また冒頭では、TypeScriptからJavaScriptに変換するコンパイラとしてのtscの振る舞いが、babelなどでも代替可能なことにも言及することで、実行時のランタイムとは違うフェイズで利用されるものであることや、社内でも実際にはwebpackのts-loaderではなくbabel-loaderでパースしていることも多いので、そういう情報を付与しています。
Reactについて
このパートではまず宣言的UIという概念について触れ、ReactやJSX、またVirtual DOMという概念がどういう要望から生まれてきたものなのかについて紹介しました。
その後は実際のチーム配属後にClass Componentを書くことはほぼ無いだろうということで、ReactのHooksについて代表的な組み込みHooksとそれらの利用方法などについて紹介しています。
「付録」について
「付録」は本編の資料を書いているときに筆がノッて書いてしまったものの、そんな細かいことを喋っている時間は無いということで端っこに寄せた解説たちです。実際には本当に講義時間が↑までで終わったので、完全におまけの読み物という感じになりました。アロー関数のthisに関する取り扱いやReact Hooksの依存と同一オブジェクト判定についてやフロントエンドのツールチェイン、さらには標準(Standard)についても簡単な解説を書いています。
講義資料では扱わなかったこと、合わせて読みたいキーワード
はてなリモートインターン2021の講義では時間などの制約もあったので、かなり内容としては厳選されている且つ後半のチーム配属に進んだあとはチームのメンターも居るということで、補助輪的な資料になっています。実際にこの資料を用いてフロントエンド開発に触れ始める場合には、さらにどういう情報や資料について触れると理解が進みそうかについて少し書いてみようかと思います。ここでは個人として1から独学で学ぶためというよりは、実際に業務というかチームに入ってReactを書き始めるぞというケースについてを主に想定して書いています。
オススメの書籍やリソース
講義資料の末尾でも紹介していましたが、ReactやTypeScriptについてのオススメの書籍を掲載しておきます。
JavaScript: JavaScript Primer - 迷わないための入門書 #jsprimer
この資料では一切扱っていないJavaScript自体の文法や概念について分かりやすく解説されている書籍です。紙版もありますが、ウェブのリソースだと最新に更新されていたりもしますし、そのままウェブブラウザの開発ツールなどでサンプルを動かすことも出来るのでオススメです。
TypeScript: プログラミングTypeScript
TypeScriptの型やtscの機能について一通り紹介されている他、JavaScriptとの相互運用についてもしっかり解説されていてオススメです。個人的には「付録H ESLintとAST」は便利に活用させてもらってます！
React: Reactハンズオンラーニング 第2版
序盤ではJavaScriptの知識自体を教えてくれて、その後にJSXからステート、Hooksからテストと順番に学ぶことが出来ます。手堅く一通り把握するならこの本で十分かも？
JavaScriptの文法について
前述した JavaScript Primer で全体像をおさらいしてみると良いかと思います。また、Promiseの概念についてもJavaScript Promiseの本でおさらいするとオススメです。
DOM
Virtual DOMについて軽く触れましたが、そもそものDOMについて何も言及していませんでした。まぁ最初から時間内に紹介できないことが分かっていたので、HTML文書についてやそれから生成されるDOMについては意図的に削っていました。過去のインターンなどでも利用していたはてな教科書などではWebに関することとして最初に紹介していました。
HTMLがパースされてDOMとなってJavaScriptのAPIから操作可能になっていることなどは、Reactだけを触るとそれなりに隠匿されているので気にしなくても動くものを書くことは出来るのですが、DOMに紐付いたイベントハンドラなどを扱うこともありますし、後述するようなWebブラウザ上での出来事を理解する上でも最初に触れておきたい概念です。
React Componentの記述
講義資料は時間の関係で全て座学だったのですが、実際には手を動かす時間を作って、小さなReact Componentをいくつか組み合わせたTodoツールなどを書いてみると良いかと思います。その際にはComponentの設計やディレクトリ構造について、すでにチームで採用しているアプローチを実際に取り入れてみるのも良いでしょう。
個人的には特にAPI呼び出しを扱う例をハンズオンでやっておくと良いのではないかと思っています。React Componentの小さなサンプルを手習いに書いてみる場合にReactのstateを書き換えてレンダリングを更新するようなものに収まりがちですが、実際にアプリケーション開発と向き合うとなるとAPIとのやり取りは切っても切れない関係でしょう。現代だと useSWRを使うこともあるかと思いますが、それ以外の仕組みでAPI呼び出しをラップしたり、Custom Hooksにしていることも多いと思うので、そのアプローチに関する知識を共有しておく良いでしょう。
ツールチェイン
npm、ESLint、Prettier、tsc、babel、webpack、Jestなどはチームで利用しているいないに関わらず、現代のフロントエンド成果物を構成する上でどういうフェイズでどういう役割を果たすかを知っておくのは重要でしょう。さらには場合によってはesbuildやrollupなどを利用していることもあるかと思います、その場合に何と代替可能なツールであるかを抑えておきましょう。
Webブラウザ上でのレンダリング
パフォーマンスなどについて考えていくようになるとWebブラウザのレンダリングのフェイズがどのように構成されているかについても知っておいて損はないでしょう。手前味噌かつ少し古いスライドですが、こういう資料もあるので参考にしてみてください。
Webブラウザ上でのJavaScript API
JavaScript(ECMAScript)の他にもWebブラウザだけで使えるnavigatorやdocument、locationやhistoryをはじめ、ServiceWorkerやfetch、その他諸々のAPIがあります。
定番的なのはMDNにまとまっています。
少し前に面白そうなのを紹介した資料も良ければどうぞ。
その他
- ECMAScriptの仕様についてやWHATWGのLiving Standardについて
- CSSとReact Componentについて
まとめ
「はてなリモートインターン2021」で行ったフロントエンド講義に詰め込み損ねた情報について列挙してみました。こうやってみるとフロントエンドは学ぶことが多くて大変なように感じるかもしれません。一方でこれらを知らなくてもまずはcreate-react-appなどからはじめてみて、興味が出たことから順番に学んでみるというのでも十分かもしれません。まずは大きく広がっているフロントエンドの世界に飛び込んでみて、Webブラウザを介して体験を提供する喜び、楽しさを感じてみてください。そうして興味が出た時にまたこの記事を思い出して頂いて、この記事が皆さんの学びのための道標になれば嬉しいです。
明日のはてなエンジニア Advent Calendar 2021の担当は
id:shimobayashiさんです。
