Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React & Next.js研修
Search
techtekt
August 23, 2023
Programming
0
4.5k
React & Next.js研修
パーソルキャリア株式会社 テクノロジー本部 エンジニアリング統括部 サービス開発部
※本資料は2023年3月時点の情報であり、当該部門における2023年新卒の研修教材です。
techtekt
August 23, 2023
Tweet
Share
More Decks by techtekt
See All by techtekt
VSMを活用したFindy Team+の運用促進 / promoting-operation-of-findy-team-plus-using-vsm
techtekt
0
14
ハッピーになる機械学習モデル開発 〜なるべく手間をかけずにコードの品質向上を目指す 〜
techtekt
0
77
Power BI 活用推進の歩み
techtekt
0
66
_microCMS_を使ってNext.jsアプリ開発しよう_.pdf
techtekt
0
1.4k
スクラム研修
techtekt
0
4.4k
データベース研修
techtekt
7
5.8k
良いコードとは 研修
techtekt
2
4.6k
Git研修1
techtekt
0
4.6k
Security基礎研修
techtekt
1
4.5k
Other Decks in Programming
See All in Programming
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
WEBエンジニア向けAI活用入門
sutetotanuki
0
320
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.4k
Outline View in SwiftUI
1024jp
1
260
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
290
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
490
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
270
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
750
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
580
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
330
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
4.1k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.4k
It's Worth the Effort
3n
183
27k
Ruby is Unlike a Banana
tanoku
96
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Happy Clients
brianwarren
97
6.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
Scaling GitHub
holman
458
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Transcript
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ファイルを作成しましょう。 <!-- index.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 <!-- index.html --> <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
ファイル