React & Next.js研修

React & Next.js  パーソルキャリア株式会社テクノロジー本部エンジニアリング統括部サービス開発部 ※本資料は2023年3月時点の情報であり、2023年新卒の研修教材です。

- React - ライブラリ - Next.js - フレームワーク - Vue.js
- フレームワーク - Nuxt.js - フレームワーク

要するにプログラムの雛形 

正直  世の中のシステムは  似たようなものが多い 

共通関数をまとめておこう！  → ライブラリ(React)    雛形を作っておいて、穴埋め方式！  → フレームワーク(Next.js, Vue.js, Nuxt.js)

Reactとは  - JavaScript ライブラリの一つ  - UIを構築するために使われます。  - よく比較されるものに、Angular.js, Vue.js などがあります。 

実際に使ってみた方が早い 

Reactを使ってみましょう    以降のコードは*1を参考としています *1 Next.js by Vercel - The React
Framework. Introduction | Learn Next.js. https://nextjs.org/learn/foundations/about-nextjs . 2023-06-22

Hello React  まずは適当にhtmlファイルを作成しましょう。     <html> <body> <div
id="app"></div> <script type="text/javascript"> const app = document.getElementById('app'); </script> </body> </html>

Hello React  … <script type="text/javascript"> const app = document.getElementById('app'); const
header = document.createElement('h1'); const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀'); header.appendChild(headerContent); app.appendChild(header); </script> </body> </html> DOMをいじってみます。

Hello React  <html> <body> <div id="app"></div> <script
src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script type="text/javascript"> const app = document.getElementById('app'); </script> </body> </html> React の導入です。

Hello React コンポーネントで分けて開発するぞ！  function Header() { return <h1>Develop. Preview. Ship.
🚀</h1>; } function HomePage() { return ( <div> <Header /> </div> ); } ReactDOM.render(<HomePage />, app);

Hello React <props> Propsってなんぞや？  // 追加↓ function createTitle(title) { if
(title) { return title; } else { return 'Default title'; } } // 編集↓ function Header({ title }) { return <h1>{createTitle(title)}</h1>; } function HomePage() { return ( <div> <Header title="React 💙" /> <Header title="A new title" /> </div> ); } 自由度が高い、コンポーネントの再利用が可能  

Hello React <リストの繰り返し> function HomePage() { const names = ['A','B','C']
return ( <div> <Header title="Develop. Preview. Ship. 🚀" /> <ul> {names.map((name) => ( <li key={name}>{name}</li> ))} </ul> </div> ); }

Hello React <イベントの実行> function HomePage() { // ... function handleClick()
{ console.log('クリックされたよ！'); } return ( <div> {/* ... */} <button onClick={handleClick}>Like</button> </div> ); }

Hello React <状態1> function HomePage() { // ... let likes
= 0 function handleClick() { likes = likes + 1; } return ( <div> {/* ... */} <button onClick={handleClick}>Likes({likes})</button> </div> ); }

Hello React <状態2> function HomePage() { // ... const [likes,
setLikes] = React.useState(0); function handleClick() { setLikes(likes + 1); } return ( <div> {/* ... */} <button onClick={handleClick}>Likes ({likes})</button> </div> ); } useStateで作成した変数が変更されると再描画される   

React で使われる小技 function Display({disp}) { return ( <div> { disp
&& <p>この文章が見えます。<p> } </div> ); } function Display({isChild}) { return ( <p> あの方は{isChild? '子供' : '大人' }です </p> ); } 式と演算子

[小課題] ディレクティブ  [1, 10, 5, 400, 6]の配列から、下記のように表示させてください。

さて 

Next.js 

Next.js  Next.js = React + よく使われるライブラリ     ・SSRを手軽にReact.jsベースで実装できる  
・ルーティングの自動生成     などのメリットがあり、サービス開発部ではReactを直接使うのではなく、   Next.js を使うことが多いです。  

Next.jsはサーバーサイドでも動く  Reactはクライアント側(ブラウザ)で動いていた  Next.jsはサーバーサイドでNode.jsエンジンの上で動く(target: server) 

Node.jsとは 

JavaScriptの特徴  JavaScriptはChromeやFirefoxといったブラウザ上で動きます。  PythonやRubyのような一般的なプログラミング言語は通常OS上で動作します。 

ブラウザ上で動くと？  OS上で動くプログラムはOSの機能へとアクセスできます。  OSの機能とは例えばファイルの読み書きや、ネットワーク通信などを指します。  ブラウザ上で動くプログラムはユーザーの許可なく  OSの機能へアクセスできません。  もし、ブラウザ上で動くプログラムがOSにアクセス出来てしまうと、悪意のあるサイトにアクセスしただけで、パソコン上のファイルを勝手に書き換えられてしまうような可能性があるからです。 

Node.jsとは？  サーバもJavaScriptで開発がしたぁい！  Node.jsはOS上で動くJavaScript実行環境です。  OSの機能にアクセスするプログラムを組むことができます。  ブラウザ上で動作していたときは出来なかったファイルの読み書きやネットワーク通信ができるようになります。    （Node.jsもChromeと同じJavaScriptエンジン使ってます）

Node.jsをインストールする  実務ではnodenvを使ってNode.jsのバージョンを管理することが多いので、nodenvを使ってみましょう。    anyenv + nodenvでバージョン管理するのがオススメです    https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f 

npmとは 

Node.jsと一緒にインストールされるnpm  Node.jsをインストールすると、同様にnpmもインストールされます。  デフォルトでインストールされることから分かる通り、Node.jsと関連がとても深いです。  業務でよく使います。 

If I have seen further it is by standing on
the shoulders of Giants.  「巨人の肩の上に立つ」という言葉は有名ですが、エンジニアの間では「車輪の再発明をするな」の文脈でよく使われます。  必ずしも「車輪の再発明をするな」が正しいわけでは有りませんが、以下のようなメリットがあります。  - すでに動いていて、製品の品質保証が取れている  - 開発コストが下がる  世の中にはソフトウェアをパッケージやライブラリといった単位で配布されています。こういったライブラリをうまく活用していくことで「巨人の肩の上に立つ」ことができます。   

パッケージ管理  他者が配布しているライブラリがインターネット上の様々な場所に散らばっていたら、検索が面倒です。  一つのソフトが複数のソフトを利用するため、「ソフトAをアップデートしたらソフトB、ソフトCが動かなくなった「という状況が発生します。「ソフトB 5.0にはソフトA 2.0以上が必要「といった関係があるためです。これをソフトの依存関係と言います。  このような依存関係を気にしながら  ライブラリを手動でインストールするのは 
大変です。 

パッケージ管理システム  そこでパッケージを管理するシステムを使います。パッケージ管理システムは以下の動作をおこないます。  - リポジトリと呼ばれる場所に集約し、検索やインストールしやすくします。  - 取得したいパッケージにどのパッケージのバージョン何以上が必要か必要か確認し、必要に応じてパッケージを勝手にダウンロードしてきてインストールしてくれます。   

Node.jsのパッケージ管理システム - npm  npmはNode Package Managerの略で、Node.jsで動く、ライブラリを管理するソフトウェアです。  - パッケージのインストール(npm install
〇〇)  - パッケージのアンインストール(npm uninstall 〇〇)  - パッケージの実行(npm run 〇〇)  などを行うことができます。 

yarn とは  • npmと同じく、Node.jsで動作するパッケージマネージャー  • npmは2010年, yarnは2016年にリリースされた(yarnの方が新しい)  • npmと比較して、インストールが速い、セキュリティが高い  •
yarn.lockファイルにより、バージョン違いのパッケージのインストールが発生しないようになっている  • サビ開でもyarnの方が使われています  • $ brew install yarn    cf. https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b   

Next.jsをインストール 

create next app  $ yarn create next-app      •
project name → my-app(default) • typescript → YES(default) • ESLint → YES(default) • src/ → YES (default) • app/ → No(default) • import alias → YES(default) • パッケージはYarnで管理  • レンダリングはSPA  • デプロイ先はServer 

hello-next  $ yarn dev   

ディレクトリを見てみる 

node_modules  • npmやyarn経由でインストールされたパッケージはここに保存されます。  • 追加や修正を行うことはほぼ有りません。  • gitを使っている場合はgitignoreします。 

package.json  • npm/yarnで管理してるパッケージの中身を表しているファイル  • dependencies, devDependenciesは依存パッケージを表す  • scriptsはyarn
〇〇などで呼び出すコマンドを設定している 

pages/index.tsx .tsxファイルはReactのコンポーネントです。  (TypeScriptで書かれています)  構成は右図のようにすることが多いです。  pagesのように場所と名前が合ってないと動かないものもあるので注意   

[小課題] ページ作成とルーティング  pagesディレクトリに「test-page」という名のディレクトリを作成した後、以下にアクセスできるようにしてください。  http://localhost:3000/test-page

Next.jsではreact-router-domの面倒な設定は不要  無事新規に作成したファイルが表示されたと思います。  Reactを使っている場合はreact-router-domと呼ばれるライブラリを使って、このようにURLとページを紐づける必要がありますが、  Next.jsの場合pagesディレクトリの構造のままルート定義を自動で作成してくれます。  page/[id].tsxのように”[]”を.tsxファイルにつけることで動的ルーティングも可能です。  https://nextjs-ja-translation-docs.vercel.app/docs/routing/dynamic-routes 

[小課題] ページ遷移  pagesディレクトリの中に新しいtsxファイルを作成し、index.tsxからリンクして、遷移できるようにしてください。  下の参考資料を読んで実装してみてください。    これ 

public/  画像などの静的なものを入れる場所です。  「/」からの記述で読み込みできます。 

[小課題] publicの参照  適当な画像をpublicから参照し、ページに表示してください。    参考資料 

[小課題] コンポーネントの作成  新規でcomponentsに.tsxファイルを作成し、propsを活用してコンポーネントに値を渡して表示してください。    参考資料  Displaying Data with Props 
 

next.config.js  Next.jsの設定を行う場所です。以下のような設定ができます。  - グローバルで利用したいCSSファイルの設定  - build時の設定の拡張  - headerの設定  - pluginの設定 
     

ビルドについて 

tsxファイルはブラウザでは動かない？  tsxファイルはブラウザでは動かないです。  基本的にブラウザで動くのはJavaScript, HTML, CSSなどの静的ファイルのみとなります。   

yarn devして動くのはなぜ？  内部的にはtsxファイルをjsファイルに変換してReact ライブラリに紐づけています。  そのため、ブラウザ側からjsファイルを読み取り動いています。    tsx ファイル js ファイル

変換とは？  この時行っているtsxファイルからjsファイルへの変換をコンパイルと呼びます。  コンパイル   tsx ファイル js ファイル

紐付けとは  変換されたjsファイルはReactライブラリを使って動くように変換されているので、 Reactライブラリに紐付けをおこないます。これをリンクと呼びます。  コンパイル   リンク  tsx ファイル js ファイル

ビルドとは  このコンパイルとリンクのまとめてビルドと呼びます。意味合いとしては実行可能ファイルを作成することです。  ビルド  コンパイル   リンク  tsx ファイル js
ファイル

React & Next.js研修

React & Next.js研修

More Decks by techtekt

Other Decks in Programming

Featured

Transcript