空谷に吼える

ブロックチェーン／DLTまわりのなにかしらを書いていく所存

『TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発』を読んだ

フロントエンド JavaScript TypeScript React Next.js

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発を読んでの感想、気をつけておくと良さげなポイントなどのメモ。

評価やら感想やら

  • 前提：本書に取り掛かる前の、筆者の関連しそうなスキルレベル

    • フロントエンドの業務での開発経験はほとんどなし
      • 過去にVue.jsの入門書は読んだ
      • React,Next.jsはなんもわからん
    • JavaScript,HTML,CSSについては基本だけある程度理解しているがうろ覚えなところがある程度

  • 書籍について

    • TypeScript、ReactとNext.jsを利用してのアプリ開発を本格的に行おうとしているひとに向けてはとても良い入門書だと思う
      • チーム開発、CI/CD、監視なども含め、必要となる知識の入り口のところは一通り網羅されている
      • TypeScript、Reactについては特に前提知識がなくても読み通せる内容になっている
    • 一方で、プログラミングそのものが初めてというひと、Webアプリケーションがどのように構成されるか、どのように開発されるかのイメージがないようなひとにはツラいのでもう少し易しい内容の書籍を探したほうが良い
      • JavaScriptやHTML、CSSについては基礎が身についていることが前提になっている
      • Node.jsとnpmも基礎を理解していないと環境構築でつまづく
      • ステップバイステップのガイドにはなっておらず、バージョン差異や環境差異によるエラーの対処などは自力でできることが求められる
  • 紹介されている技術について
    • ReactとNext.jsはVue.jsよりはだいぶ見通しが良く、扱いやすく感じた
      • グローバルな要素が少なく、何が何に影響を与えているのかを慣れていなくてもコードの断片から追って把握しやすい気がする
      • Vue.jsをお勉強したときはNuxtなしの単品だったからという点はある
    • 書籍内のサンプルアプリくらいの規模でしかもひとりでコード読み書きしてるときですらTypeScriptはめちゃめちゃ体験が良かったので今後は使えるとこでは基本TypeScriptを使っていく所存

本書のチュートリアルを実行するうえで気をつけておくと良さげなポイント

  • 書籍内には特にNode.jsおよび各ライブラリやフレームワークのバージョン指定がないが、やっていくうえでバージョン整合性のエラーなどに遭遇する
    • nvmなどでNode.jsのバージョンを切り替えられるようにセットアップしてから始めておいたほうがいい
  • 書籍ではおそらくNext.jsのv12系をベースの記載になっているが、v13系が出ていていくつか差異に遭遇する
    • v13で導入されたApp Routerには書籍の内容が対応していないので、Next.jsにApp Router使う？と聞かれるところでNoにしとく
    • たぶんv13でsrcディレクトリ使う？の選択肢が出てくるようになっていてこれをYesにすると5.2のsrcディレクトリを手動で作って移動する手順をスキップできるかもしれない
      • でも他で差異が出てる気もするのでNoにしておいて5.2の手順をそのままやったほうがいいかも
  • 4.2 styled-components導入のところでnpm ERR! Cannot read properties of null (reading 'edgesOut')が発生
    • styled-componentsの新しめのバージョンに付随する問題らしい
    • npm install styled-components@5.3.10 で古いバージョンを指定したら回避できた
  • リスト5.8~5.13 に記載されている書籍上のサンプルとリポジトリ上にあるサンプルに内容の齟齬がある
  • リスト5.14, 5.15：書籍ではmain.jsとpreview.jsの設定ファイルを修正する手順になっているが、たぶんStorybookのバージョン差異で存在する設定ファイルがmain.tsとpreview.tsになっている
    • main.tsは書籍、リポジトリの内容そのままでOKだった
    • preview.tsはそのままだと通らないので以下の対応が必要
      • preview.tsxに拡張子を変更
      • 以下のようにdecoratorの記述を変えた
export const decorators = [
  (story) => (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      {story()}
    </ThemeProvider>
  ),
];