Upgrade to Pro — share decks privately, control downloads, hide ads and more …

基礎から学ぶNext.js

 基礎から学ぶNext.js

OCHaCafe Season8 #2の資料です。
https://ochacafe.connpass.com/event/308830/

セッションアーカイブ動画:https://youtu.be/Ywd2J3GZ8wQ

oracle4engineer

March 06, 2024
Tweet

Video

More Decks by oracle4engineer

Other Decks in Technology

Transcript

  1. Copyright © 2023, Oracle and/or its affiliates. 3 野中 恭大郎

    ソリューション・アーキテクト 日本オラクル株式会社 • AppDev/Messaging/NoSQL/Frontend • Oracle Cloud Hangout Caféメンバー /Oracle Groundbreakers Advocate • 某パッケージの開発者でした • Oracleにjoinしてもう4年半 • 趣味は釣りとかキャンプとか(最近行けてない) @non_kyon
  2. Copyright © 2024, Oracle and/or its affiliates. 6 1995年 JavaScript誕生

    • Webブラウザ(Netscape)を操作するための言語 • ブラウザ間の非互換問題多発 • 1997年よりECMAScriptとして標準化が始まる 2006年 jQueryの登場 • ブラウザに依存しないDOM操作 • DOM(Document Object Model): ウェブページ(HTML)とスクリプトやプログラミング言語を接続するもの • Ajax • ブラウザとサーバーサイド間の非同期通信を実現 • 画面遷移を伴わない動的Webアプリケーション 2009年 Node.jsの登場 • サーバーサイドのJavaScript実行環境 JavaScriptフロントエンドの歴史 黎明期
  3. Copyright © 2024, Oracle and/or its affiliates. 7 2012年 AngularJS

    1.0.0 のリリース(初版は2009年) • シングルページアプリケーション(SPA)の実現 • MVCモデルによる記述 • フルスタックフレームワーク 2013年 Reactの登場 • 仮想DOMによるレンダリングの高速化/効率化 • 1方向データフロー • JSX(後述) 2014年 Vue.jsの登場 • コンポーネント・セントリック • ルーティングや状態管理はあくまでもサブ JavaScriptフロントエンドの歴史 3大フレームワークの登場
  4. Copyright © 2024, Oracle and/or its affiliates. 8 2016年 Next.jsの登場

    • ReactベースのServer Side Renderingを実現 同年 Nuxt.jsの登場 • Vue.jsベースのServer Side Renderingを実現 2020年 SSGの登場 • Next.jsがStatic Site Generationをサポート • Nuxt.jsがStatic Site Generationをサポート JavaScriptフロントエンドの歴史 SSR/SSGの登場
  5. Copyright © 2024, Oracle and/or its affiliates. 9 ウェブアプリの実装の一種 •

    単一のHTMLファイルのみを読み込む • サーバ側で画面のレンダリングを行わない • CSR(Client Server Rendering)とも呼ばれる • 別な内容を表示する際にはコンポーネントを差分更新 • XMLHttpRequest • Fetch • Ajax 業務アプリによく利用される • データの送受信量を削減 • クライアントとサーバで処理量を分散 • より動的な画面の構築 Single Page Application(SPA) Client Server GET HTMLJS API(Ajax) JSON 差分更新 レンダリング
  6. Copyright © 2024, Oracle and/or its affiliates. 10 クライアント側のパフォーマンス問題 •

    WebブラウザがWebページとスクリプトのダウンロードとレンダリングを担当するため、負荷が上がる • 特に初回のページ表示でパフォーマンスの問題が起きやすい 開発プロセス • 比較的新しい技術(かつトレンドの移り変わりも早い)のため、専門的な知識が必要 • フレームワークやツールの幅が広く、自由度も高い代わりに、コードの追跡が難しくなる SEO対策 • SPAはクライアントからのリクエストに応じてデータをロードするため • URLが変わらず、ページごとに固有のアドレスがない SPAの課題
  7. Copyright © 2024, Oracle and/or its affiliates. 11 コンテンツ表示速度の高速化 •

    Web Serverがレンダリングと初回データロードを担当 • JavaScriptのダウンロードと実行が完了するまで表示されるのを待つ 必要がない • ユーザーはより早く、完全にレンダリングされたページを見ることが可能 • Core Web Vitals*メトリクスが向上し、ユーザー体験が改善 統一されたメンタルモデル • 同じ言語で、同じ宣言型の、コンポーネント指向のメンタルモデ ルを使って、アプリケーション全体を開発 SEO 向上 • 検索エンジンクローラーが完全にレンダーされたページを直接見る Server Side Rendering(SSR)の登場 Client Web Server 1. Request 4. HTMLファイル 5. API(Ajax) 6. JSON API Server 2. GET 3. レンダリング 7. 差分更新 ▪SPAと組み合わせて利用 *読み込み、インタラクティブ性、視覚的な安定性
  8. Copyright © 2024, Oracle and/or its affiliates. 12 Web Serverを持つ必要がある

    • ブラウザの代わりにレンダリングを行うサーバ運用の考慮が必要 2段階のレンダリングの考慮 • SPAの差分更新と組み合わせるパターンがほとんどなので、設計と実装に考慮が必要 Server Side Rendering(SSR)の課題
  9. Copyright © 2024, Oracle and/or its affiliates. 13 プリレンダリング •

    あらかじめWebページのレンダリング(ビルド)を行う • プリレンダリングされたページは、静的なHTMLファイルとして生成・提供 • リクエストが来るたびのレンダリングを行わない 優れたコンテンツ表示速度 • 出力内容が静的なHTMLとアセットであるため、低コストで簡単なデプ ロイが可能 • ビルド時に既に内容が分かっているデータを使用するページにのみ適用 • ドキュメント • ブログ • カタログ • データが変更される場合は、新しいデプロイが必要 Static Site Generation(SSG)の登場 Client Server etc. 1. Request 2. HTMLファイル Build Server 2. 配置 1. プリレンダリング
  10. Copyright © 2024, Oracle and/or its affiliates. 14 オープンソースでクロスプラットフォームのJavaScript実行環境 •

    ECMAScriptに準拠 • Webサーバなどのスケーラブルなネットワークプログラムの記述を意図 • ブラウザ用のJavaScriptを書くフロントエンド開発者が、クライアント側の コードに加えてサーバー側のコードを書くことが可能 NPM • Node.jsのパッケージ管理ツール • Node.jsをインストールすれば利用できる • バージョン管理にはnというツールが便利(Windowsでは利用できないので注意) node.js サーバサイドのJavaScript実行環境
  11. Copyright © 2024, Oracle and/or its affiliates. 17 Viewを設計するだけで、Reactはデータの変更を検知 •

    関連するコンポーネントだけを更新、描画 • 読みやすいコード、容易なデバッグ 自分自身の状態を管理するカプセル化されたコンポーネント作成 • コンポーネントをJavaScript/TypeScriptで書く • それらのコンポーネントを組み合わせ、UIを構築 node.jsを使いサーバ上でもレンダリング(SSR可能) React Native を使うことでモバイルアプリケーションの中でも動作 React UI構築のための JavaScript ライブラリ(フレームワークではない!)
  12. Copyright © 2024, Oracle and/or its affiliates. 18 公式のSandboxをダウンロード •

    react.js • React本体 • react-dom.js • ReactのDOM操作を司る • babel.js • ビルド Reactを始めてみる Quickstart
  13. Copyright © 2024, Oracle and/or its affiliates. 19 React座学 コンポーネントの追加

    Buttonコンポーネントを定義 ・ MyAppコンポーネントを定義 ・ Buttonをコンポーネントを追加 MyAppコンポーネントをレンダー ▪sandbox.html
  14. Copyright © 2024, Oracle and/or its affiliates. 20 JSXを使用することで、React上で簡単にHTMLを記述することが可能 •

    仕様は任意 • 便利さゆえにReactプロジェクトのデファクトになる • HTML to JSXのコンバートツール React座学 JSX(JavaScript XML) const myElement = <h1>I Love JSX!</h1>; const root = ReactDOM.createRoot( document.getElementById('root’) ); root.render(myElement); ▪JSXで記述 const myElement = React.createElement( 'h1', {}, 'I do not use JSX!’ ); const root = ReactDOM.createRoot( document.getElementById('root’) ); root.render(myElement); ▪JSXを使わずに記述
  15. Copyright © 2024, Oracle and/or its affiliates. 21 • 波括弧を使うことで、JSXからJavaScript

    に「戻る」ことが可能 • コード内の変数を埋め込んでUIに表示 React座学 データの表示(バインディング) userオブジェクトを定義 {}でuserのプロパティを表示 {}はJSXのAttributeにも使える ▪sandbox.html
  16. Copyright © 2024, Oracle and/or its affiliates. 22 if文でJSXの条件分岐が可能 React座学

    レンダリングの条件分岐 ?演算子の利用(JSX内で動 作) &&演算子の利用(JSX内で動 作)
  17. Copyright © 2024, Oracle and/or its affiliates. 23 map()関数やfor文を使った配列のレンダーが可能 React座学

    配列のレンダリング ▪配列の定義 ▪map()関数とJSXコンポーネント ▪parentに配置
  18. Copyright © 2024, Oracle and/or its affiliates. 26 useで始まる関数は、フック (Hook)

    と呼ばれる • useStateはReactが提供する組み込みのフック • 他のフックは以下のようなもの • コンテクストフック(useContext): 離れた親要素から情報を取得 • refフック(useRef): レンダリングに用いない情報を保持 • パフォーマンス関連フック • useMemo: 高負荷な計算の結果をキャッシュ • useCallback:関数定義をキャッシュ • 既存のフックを組み合わせて独自のフックを作成することが可能 React座学 フック
  19. Copyright © 2024, Oracle and/or its affiliates. 28 SPAのルーティング 「Single

    Page」なのにルーティング(ページ遷移) ? • 実際はコンポーネントが置き換わっているだけ • ブラウザ上はURLも変わっているのでルーティングしているように見える • ライブラリやフレームワークの機能で実装 • 中身はJavaScriptのhistory API • ReactであればReact Router • Next.jsはフレームワークに内包
  20. Copyright © 2024, Oracle and/or its affiliates. 29 Demo: ReactのSPAを眺める

    • コンポーネント • JSX • データ表示(バインディング) • 条件分岐レンダリング • 配列レンダリング • イベントハンドラ • state
  21. Copyright © 2024, Oracle and/or its affiliates. 31 • 2016年に初版リリース

    • UIの構築にReactコンポーネントを利用 • バンドルやコンパイルなどを抽象化 • 個人開発者から大規模なチームまで • 主な機能 • ルーティング • レンダリング • データ取得 • スタイリング • 最適化 • TypeScript対応 Next.js フルスタックのWebアプリケーションを構築するためのReactフレームワーク
  22. Copyright © 2024, Oracle and/or its affiliates. 32 create-next-app の利用がおすすめ

    • Interactive/Non-interactive • npx(npmの同梱コマンド)/yarn/pnpm/bunx npxで実行 Interactiveモードでプロジェクトを作成(中身については後述) • src/ディレクトリのデフォルト選択肢はNoなので、最初はそこに注意 Next.jsを始めてみる Next.jsプロジェクトの作成 npx create-next-app@latest ※VSCodeでコーディングする際にはnext.js Extensionのインストールがおすすめ
  23. Copyright © 2024, Oracle and/or its affiliates. 33 プロジェクトのルートディレクトリ(今回はmy-app/)でコマンドを実行 3000番ポートで起動

    src/app/page.tsxを編集すれば変更が反映される Next.jsを始めてみる 開発サーバの起動 npm run dev $ npm run dev > [email protected] dev > next dev ▲ Next.js 14.1.0 - Local: http://localhost:3000
  24. Copyright © 2024, Oracle and/or its affiliates. 34 app App

    Router pages Pages Router public 静的アセット() next.config.js Next.jsのコンフィグ package.json プロジェクトの依存ライブラリとスクリプト instrumentation.ts OpenTelemetryのインストルメント(設定値) middleware.ts Middlewareの記述 .env 環境変数 .env.local ローカル環境の環境変数 .env.production 本番環境の環境変数 .env.development 開発環境の環境変数 .eslintrc.json ESLintのコンフィグ next-env.d.ts TypeScriptの宣言ファイル tsconfig.json TypeScriptのコンフィグ jsconfig.json JavaScriptのコンフィグ Next.js座学 Next.jsプロジェクトの構造 – Top-level ディレクトリ&ファイル Middleware : • クライアントとサーバーの間で動作 • 認証 • バリデーション • データ整形 • セキュリティチェック • etc.,
  25. Copyright © 2024, Oracle and/or its affiliates. 35 Next.js座学 App

    Router / Pages Router Next.jsでルーティングを実装する方法は2つ • App Router (今回はこちらをベースにお話し) • 2023年にリリース • 公式はこのApp Routerを推奨 • Pages Router • 元々のルーティング実装方法 • 歴史が古く、多くのUIコンポーネントライブラリが対応
  26. Copyright © 2024, Oracle and/or its affiliates. 36 カート画面/購入画面/購入完了画面の3つの画面遷移を実装 •

    cart/order/confディレクトリを作成し、それぞれpages.tsxを作成 • 各ページへのルーティングは<Link>タグを使って記述 Next.jsでアプリケーションを作ってみる ルーティングの実装
  27. Copyright © 2024, Oracle and/or its affiliates. 38 Next.jsで外部データを取得するFetch()は結果をキャッシュ可能 •

    デフォルトでは結果をキャッシュする • 明示的に記述する場合は以下のようになる • ビルドごとにキャッシュをクリアするわけではないので、初学者は注意が必要 • キャッシュしたくない場合は以下のように記述 関数はビルド時とリクエスト時の両方で実行されるが、キャッシュがあればそれを利用する(App Router) 関数をビルド時に実行するかリクエスト時に実行するかを選べる(Pages Router) ※後述 Next.jsでアプリケーションを作ってみる Fetchしたデータのキャッシュ fetch('https://...', { cache: 'no-store' }) fetch('https://...', { cache: ‘force-cache' })
  28. Copyright © 2024, Oracle and/or its affiliates. 39 配列で受け取ったAPIのレスポンスを表示す るためのコンポーネントを作成

    Next.jsでアプリケーションを作ってみる スタイリング – React Component UIライブラリにNextUIを利用 配列をmap()で回してコンポーネント作成 関数で出来上がったコンポーネントを配置 ▪components/ProdTable.tsx
  29. Copyright © 2024, Oracle and/or its affiliates. 40 クライアント・コンポーネント •

    クライアント側でレンダリングされるコンポーネント • これまでのReactコンポーネントは全てこれ • “use client” ディレクティブはサーバ/クライアント・コンポーネントの「境界線」 • use clientが付いたコンポーネントの子コンポーネントは全てクライアント・コンポーネントになるため サーバ・コンポーネント(React Server Component/RSC) • サーバー側でレンダリングされる • Next.js(のApp Routerを使う場合)ではデフォルトがこのサーバ・コンポーネント • 初期表示のためのデータをAPIサーバから受け取ってサーバ側でレンダリングしておくことができる Next.jsでアプリケーションを作ってみる レンダリング – クライアント・コンポーネントとサーバ・コンポーネント
  30. Copyright © 2024, Oracle and/or its affiliates. 41 Next.jsでアプリケーションを作ってみる コンポーネント間のデータ共有

    ▪components/ProdTable.tsx ▪pages.tsx 引数でデータを受け取れるようにpropsを定義 子要素となっているProdTableにAPIから取得したデータを受け渡す . ├── components │ └── ProdTable.tsx └── page.tsx ▪ページの階層
  31. Copyright © 2024, Oracle and/or its affiliates. 42 静的レンダリング (≒

    SSG + RSC) →デフォルトはこちら • ルートやページはビルド時にレンダリングされるか、データの再検証後にバックグラウンドでレンダリング • レンダリングの結果はキャッシュされ、CDNに配置可能 • ブログ記事や製品ページなど、ルートがユーザーにパーソナライズされておらず、ビルド時に知ることができる データを持つ場合に便利 動的レンダリング(≒ SSR + RSC) • ルートやページはリクエスト時にユーザーごとにレンダリング • ルートやページがユーザーにパーソナライズされたデータを持つ場合や、CookieやURLの検索パラメータなど リクエスト時にしかわからない情報を持つ場合に便利 • Cookie、Headerなどの動的な機能群を利用する場合に自動的に行われる 静的レンダリングと動的レンダリング App Router利用時におけるSSGとSSR
  32. Copyright © 2024, Oracle and/or its affiliates. 43 • Client

    Side Rendering(SPA)がすべての始まり • クライアント側のパフォーマンス問題やSEO問題を解決するためにServer Side Renderingが登場 • 静的なアセットで構成されたページのパフォーマンスをより向上させるためのSSGが登場 • UI/UXの設計と実装をより高パフォーマンスにするため、SSR/SSGとRSCを組み合わせるパターンが登場 頭の整理 Client Side Rendering (CSR/SPA) Server Side Rendering (SSR) Server Component (RSC) Static Site Generation (SSG) 2012 2024 2016
  33. Copyright © 2024, Oracle and/or its affiliates. 44 利用する関数によってビルド時に自動的にSSR/SSGが切り替わるようなイメージ •

    デフォルトはSSG • 関数とは、外部データをどのタイミングで取得するかを決める関数 getSeverSideProps() • この関数でデータを取得すると、リクエストごとに関数が実行される • つまり、リクエストごとにAPIなどからデータを取得し、レンダリングを行う処理が記述できる getStaticProps() • この関数でデータを取得すると、ビルド時に関数が実行される • ビルド時にAPIなどからデータを取得し、ページに表示 Pages Routerを利用したSSR/SSG
  34. Copyright © 2024, Oracle and/or its affiliates. 45 Node.jsサーバ •

    Node.jsが実行可能なサーバ上で実行する場合 • 使い方は以下 • package.json に「build」スクリプトと「start」スクリプトが含まれていることを確認 • 次に、npm run build を実行してアプリケーションをビルド • 最後に、npm run start を実行して Node.js サーバーを起動 Dockerコンテナー • Kubernetesやクラウド プロバイダーのコンテナー内で実行する場合 静的HTMLエクスポート • HTML/CSS/JS 静的アセットを提供できる任意のWebサーバなどで実行する場合 • 静的エクスポートとして実行すると、サーバーを必要とする Next.js 機能が未サポート(動的ルーティングなど) Next.jsアプリをデプロイ
  35. Copyright © 2024, Oracle and/or its affiliates. 46 公式サンプルはここから取得 •

    そのままでは動かせないので編集が必要 1. Dockerfileをアプリのルートディレクトリに準備 2. npm、yarnなどの条件分岐があるので削除(optional) 3. RUN npm ci をruntimeのステージに追加(L:15) 4. .next以下を全てCOPY (L:22) 5. CMDをnpm startに変更 (L:27) 6. docker build –t <name> . 7. docker run –p 3000:3000 <name> Next.jsでコンテナ化 ▪Dockerfile
  36. Copyright © 2024, Oracle and/or its affiliates. 48 SSRフレームワーク •

    Nuxt.js • Vue.jsベースのフルスタックフレームワーク • Next.jsを参考に作られた • Server Componentsも対応(※開発途中) SSGフレームワーク • Jekyll • Ruby製のSSGフレームワーク • 何を隠そうocitutorialsは今のところJekyllベース(githubのDockerfile見れば一目瞭然) • Gatsby • ReactベースのSSGフレームワーク 他のSSR/SSGフレームワーク
  37. Copyright © 2024, Oracle and/or its affiliates. 50 SPA •

    単一のHTMLファイルのみを読み込む • サーバ側で画面のレンダリングを行わなず、別な内容を表示する際にはコンポーネントを差分更新 • 業務アプリによく利用される SSR • Web Serverがレンダリングと初回データロードを担当 • 同じ言語で、同じ宣言型の、コンポーネント指向のメンタルモデルを使って、アプリケーション全体を開発 • 検索エンジンクローラーが完全にレンダーされたページを直接見る SSG • あらかじめWebページのプリレンダリング(ビルド)を行い、静的なHTMLファイルとして生成・提供 • 出力内容が静的なHTMLとアセットであるため、低コストで簡単なデプロイが可能 • ビルド時に既に内容が分かっているデータを使用するページにのみ適用 SPA/SSR/SSG おさらい
  38. Copyright © 2024, Oracle and/or its affiliates. 51 React •

    UI構築のためのJavaScriptライブラリ • コンポーネント単位の実装とコンポーネント単位の描画 • バインディング/条件分岐レンダリング/配列レンダリング/イベントハンドラ/state/コンポーネント間データ共有 Next.js • フルスタックでReactベースのフロントエンド構築フレームワーク • これまで利用されてきたPages Routerとこれからの推奨のApp Router • クライアントでレンダリングされるクライアント・コンポーネントと、サーバでレンダリングされるサーバ・コンポーネント • 動的/静的レンダリングによる、要件に合わせたレンダリングの戦略を決められる柔軟性 React/Next.js おさらい