やっている技術書の積み上げを消化する。
オライリー社より出ているReactハンズオン第2版の12章3~4節。
ここより前は既にやっているので割愛。
しかしひとまず12章全体の概要を自分用に要約しておく。
- アイソモーフィックとユニバーサル
Reactはアプリケーションのビューを提供するライブラリのためクライアントサイドに寄っている。しかし昨今のwebアプリケーションはバックエンドで何かしらの処理を行うのがほとんど。
そこで出てくるのがアイソモーフィックという概念。
アイソモーフィックとは「複数のプラットフォームでレンダリング可能なアプリケーション」のこと。
ユニバーサルと近い概念だが、あちらは「コードを置換することなく実行可能なアプリケーション」のため、本質は違うらしい。
フロントエンドでのプラットフォームはブラウザだとして、他のプラットフォームはJSで言えばバックエンドで動くNode.js。
サーバーサイド、クライアントサイドでは提供されるAPIが違うため、必然的に違い（差分）が出る。こういった部分を少なくしていけば、ユニバーサルな部分が増えていく。
ハンズオン部分のNode.jsのコーディングはできなかった。そもそもNode.jsの話が冒頭以外だとここくらいでしか出てこないため動かす知識がない。
Node.jsの知識が薄いのでここは課題だろう。公式のドキュメント等を読む込みたい。 - Reactのおけるサーバーサイドレンダリング
ReactDOMServer.renderToStringメソッドを使用することで、コンポーネントをサーバー上でHTMLとして描画ができる。
サーバーは様々なリソースにセキュア（安全）にアクセスできるという点が強い、らしい。
5章のレシピアプリケーションをexpress等を用いて実装する、はずだったがexpressの使用方法が分からず完走に至らず。
挫折を乗り越える方法をひらめいたが後日時間を作って取り組む。
閑話休題、要約を続ける。
クライアントサイドレンダリング（CSR）はページの初期表示に時間がかかるのが難点。expressはサーバーサイド、クライアントサイド両方で描画を行える。
ReactDOM.renderは通常通りCSRするメソッドだが、ReactDOM.hydrateを用いるとReactDOMServerにより描画されたコンポーネントをブラウザで再利用できる。
先にサーバー側で作っておいた静的HTMLに流し込むように動的なコンポーネントを表示させるこれはハイドレーションという。文字通り水分補給のように流し込むという感じ。
ただしCreate React Appのビルドはクライアントのコードのみなので別途サーバーのコードはビルド設定をする必要がある。 - Next.js
ReactのサーバーサイドレンダリングのツールがNext.js。Zeit社より開発されたオープンソースの技術でReactアプリケーションをサーバー上で簡単に実行できる。フレームワークというんだっけ…？
npmで新規プロジェクトファイルにnextをインストールする。
検証ツールを見てみたらファイルやフォルダの横にstaticの文字があったし、事前に静的ページとして描画（プリレンダリング）されているようだ。
またNext.jsはビルドをすると各ファイルのサイズを表示してくれたり、ファイルが動的にレンダリングされるか静的にレンダリングされるかを教えてくれる。
素人ながらに非常に強力過ぎるツールだと思ったし、公式ドキュメント読もうと思った。
エラーが起こった際もReact以上に親切に教えてくれる上、公式ドキュメントも関連しそうなものが表示される。
Zeit社が提供するツールのためZeit社のクラウドホスティングサービスでデプロイするのが素直だが、他のプロバイダー経由でデプロイもできる。
- Gatsby
こちらは静的サイトジェネレータでコンテンツ主体のwebサイトを構築する手段として普及している、らしい。
パフォーマンス、アクセシビリティ、画像最適化等、多くの作業が自動化される。
またコンテンツ主体のページは外部にデータを依存していることも少なくないが、Gatsbyはサーバーから取得したデータをもとに静的なページを生成できるのも特徴。
プロジェクトの作成とgatsbyのインストール自体は済んだようだが、npx gatsby develop（Reactでいうnpm run start）を走らせると
ERROR #11903 API.TYPESCRIPT.COMPILATIONというエラーがずっと出て何も起こらない。
command with the --verbose flag again.
Error opening directoryError: Error opening directory
なにやらエラーを吐いていることとオプションをつけてコマンドを走らせろと書いてあることだけは分かったが、このオプションをつけて走らせても同じエラーが出る。そのうえ違うオプションに置換して走らせろとも出てくるが結果は同じ。
やれYarnを優先するように設定すればいいとかそういうのはちょっと出てきたが、エラーを解消できなかった。
パッケージマネージャーへの理解も薄いため、ここも公式ドキュメント読むなどしてなんとかしていきてぇ。インストールする時も-gのオプションがついたりつかなかったり、npmとnpxどう違うんだよとかもわからんしな。-gはグローバルのオプションだったと思うけど、何がグローバルなのかもわからん。
Gatsbyは自分の場合最優先で勉強すべきでもないなぁと思うので、余裕ができたらチャレンジしていきたい。
積み上げを消化した覚え書きとしてこうやって書いているが、この技術書は補遺や付録を除けばこれで最後だ。
現状HTML、CSS、JavaScript、Reactは多少勉強したが、新しい機能などのキャッチアップはできていない。その上、それ以外の知識はない。
CSSは多少かけてもSaasやtailwindは使えないし、ビルドがなんなのかはそこまで分かってないし、テストもできない（かけない、実行できない）。
まだまだできることがあるということでポジティブに考えておこう。
次は買っておいたオライリー社のTypeScriptの勉強と、合間にNext.jsやJest、パッケージマネージャーなどちょっとずつ触れていくべきものをやっていこう。
