🌽

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発の本の備忘録

2022/10/16に公開

概要

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発の本の備忘録

https://www.amazon.co.jp/dp/4297129167

1章

SPA(シングルページアプリケーション)

起動時に一時度HTML全体を読み込み、以後は画面の処理に応じて適宜Ajaxを使用してサーバーからデータ取得、動的にページを更新するもの

  • メリット
    • 従来のRailsのような画面遷移の度にHTMLを読み込む(MPA)よりも、高速なUI動作が可能
    • SPAの登場によって、サーバーの役割が大きく変わった(HTMLを生成するのではなく、JSONレスポンスを返すAPIというシンプルな形)
    • サーバーサイドとクライエントサイドの分業が用意
    • iOSやAndroidなどのネイティブクライアントへの応用
  • デメリット
    • 初期表示に少し時間かかる
    • フロントエンドの学習コストが高い(ReactやVue、Angular)

SSR

RailsなどのMPA(Multiple Page Application)とは異なるものなので注意
でもやっていることはサーバー側でレンダリングを行いHTMLを生成してサーバーに返している
MPAとの大きな違いは、SSR単独で利用されるのではなく、SPAと組み合わせて利用するオプション機能であること

参考

  • メリット
    • レンダリングをサーバー側で行った結果を返すためサイト表示の高速化が可能
    • SPAで難しかったSEOを向上させることが可能
  • デメリット
    • サーバー側でレンダリング処理が必要になるので、サーバーサイドJavaScript実行環境が必要になる
    • サーバーとクライアントでJavaScriptのロジックが分散

SSG

事前に静的ファイルとして生成し、デプロイする仕組み

  • メリット
    • SSRは画面遷移の度にHTMLを生成して高負荷だけど、SSGなら事前作成済みなので負荷軽減される(ブログなどのサービスと相性良い)
  • デメリット
    • ログインしたユーザーによって表示を切り替える必要があるサービスとは相性が悪い

React

フロントエンドのコードは記述量が増大し、可読性が悪く、メンテナンスが困難になりがちだった(AngularJS,KnockoutJS,Riot.jsなど)
Reactは上記の課題を回避して効率的に開発を進めるための思想が取り込まれているフレームワーク

  • 特徴

    • 仮想DOM
      • ブラウザが持つDOMのAPIの操作はしない
      • ノードが変更があった場合、変更前後の仮想DOMを比較して変更箇所を特定し、必要に応じてまとめて実際のDOMに変更を適用する
    • 宣言的UI
    • 単一方向のデータの受け渡し
    • コンポーネント指向・関数コンポーネント
    • Fluxアーキテクチャとの親和性
      • MVVMフレームワークによるデメリットに対する解決策
        • 双方向データバインディングはコードを簡素化するメリットはあるが、多用しすぎるとどこの変更がどこに影響を与えるかを判断するのが難しくなる。またコードの複雑性があがる
        • Faceboxはこの課題に対してFluxアーキテクチャを提唱した
          • データの流れを単一方向に限定し、状態管理をよりわかりやすくしたもの
  • Reactコンポーネント

    • props
      • コンポーネントの外側から受け取ることができる値
        • 単一方向データフローを実現している
          • 現実的にアプリケーションを実装していくと、コンポーネントを飛び越えてデータを伝播させたいケースが出る
            • propsを通じてコールバックを受け渡す方法があるが、複雑度が高くなり、可読性が悪くなる(propsによるバケツリレー)
              • Contextを利用することで回避できる
                • Providerで指定したReactコンポーネント配下のツリーに対してグローバルにアクセスできる仕組み
    • state
      • コンポーネント内部で保持するデータ。propsと異なりコンポーネントの外側から値を受け取ることはできない
      • 影響を与えるのはコンポーネント自身か、配下のコンポーネントのみになる
      • stateの値を更新するにはReact Hooksという機能の一つであるuseState関数を使う
    • JSX
      • JavaScript内でHTMLっぽい表現をするJavascriptの拡張構文

AltJS

コンパイルすることでJavaScriptが生成されるプログラミング言語のこと
TypeScriptやCoffeeScriptはAltJS
DartもAltJSとして使える

ビルド

ビルドシステムはソースコード上で読み込んでいるモジュールの依存関係を解決し、実行可能なJavaScriptの形式に変換する仕組みのこと
フロントエンドの開発が活発化していき、より複雑化していった
単にトランスパイルするだけでなく、SCSSのCSSへの変換、画像の圧縮、デプロイなど色々やることが増えた
npmのタスクスクリプトで良しなに解決を目指してきたが、2015年頃から、webpackというビルドツールが台頭してきた

  • webpackのメリット
    • 利用している依存モジュールのバージョン管理と解決を自動化できる
    • ファイルの結合やコードの圧縮を自動化できる
    • プラグイン機能により様々なカスタマイズが可能
    • ホットリロードなど開発の効率化ツールを同梱している

Next.js

Reactを使ったフルスタックフレームワーク
ちなみに、Nuxt.jsはNext.jsのVue版

  • レンダリングが柔軟に
    • ReactではReact Routerを使用した方法が主流だが、これだとSSRやSSGには対応できない
      • Next.jsではSSRやSSGにも対応できるように独自のルーティングが組み込まれている
        • ディレクトリベースの自動ルーティング
  • メリット
    • Reactを使っている
    • SPA, SSR, SSGの切り替えが容易
    • デプロイが簡単
    • webpackの設定の隠蔽

Discussion