Slide 1
Slide 1 text
React & Next.js
パーソルキャリア株式会社 テクノロジー本部 エンジニアリング統括部 サービス開発部
※本資料は2023年3月時点の情報であり、2023年新卒の研修教材です。
Slide 2
Slide 2 text
- React
- ライブラリ
- Next.js
- フレームワーク
- Vue.js
- フレームワーク
- Nuxt.js
- フレームワーク
Slide 3
Slide 3 text
要するにプログラムの雛形
Slide 4
Slide 4 text
正直
世の中のシステムは
似たようなものが多い
Slide 5
Slide 5 text
共通関数をまとめておこう！
→ ライブラリ(React)
雛形を作っておいて、穴埋め方式！
→ フレームワーク(Next.js, Vue.js, Nuxt.js)
Slide 6
Slide 6 text
Reactとは
- JavaScript ライブラリの一つ
- UIを構築するために使われます。
- よく比較されるものに、Angular.js, Vue.js などがあります。
Slide 7
Slide 7 text
実際に使ってみた方が早い
Slide 8
Slide 8 text
Reactを使ってみましょう
以降のコードは*1を参考としています
*1 Next.js by Vercel - The React Framework. Introduction | Learn Next.js.
https://nextjs.org/learn/foundations/about-nextjs . 2023-06-22
Slide 9
Slide 9 text
Hello React
まずは適当にhtmlファイルを作成しましょう。
const app = document.getElementById('app');
Slide 10
Slide 10 text
Hello React
…
const app = document.getElementById('app');
const header = document.createElement('h1');
const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
header.appendChild(headerContent);
app.appendChild(header);
Slide 11
Slide 11 text
Hello React
const app = document.getElementById('app');
React の導入です。
Slide 12
Slide 12 text
Hello React
コンポーネントで分けて開発するぞ！
function Header() {
return
);
}
ReactDOM.render(, app);
Develop. Preview. Ship. 🚀
; } function HomePage() { return (Slide 13
Slide 13 text
Hello React
Propsってなんぞや？
// 追加↓
function createTitle(title) {
if (title) {
return title;
} else {
return 'Default title';
}
}
// 編集↓
function Header({ title }) {
return
);
}
自由度が高い、コンポーネントの再利用が可能
{createTitle(title)}
; } function HomePage() { return (Slide 14
Slide 14 text
Hello React <リストの繰り返し>
function HomePage() {
const names = ['A','B','C']
return (
);
}
-
{names.map((name) => (
- {name} ))}
Slide 15
Slide 15 text
Hello React <イベントの実行>
function HomePage() {
// ...
function handleClick() {
console.log('クリックされたよ！');
}
return (
{/* ... */}
Like
);
}
Slide 16
Slide 16 text
Hello React <状態1>
function HomePage() {
// ...
let likes = 0
function handleClick() {
likes = likes + 1;
}
return (
{/* ... */}
Likes({likes})
);
}
Slide 17
Slide 17 text
Hello React <状態2>
function HomePage() {
// ...
const [likes, setLikes] = React.useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
{/* ... */}
Likes ({likes})
);
}
useStateで作成した変数が変更されると再描画される
Slide 18
Slide 18 text
React で使われる小技
function Display({disp}) {
return (
{ disp &&
);
}
function Display({isChild}) {
return (
この文章が見えます。
}
あの方は{isChild? '子供' : '大人' }です
); } 式と演算子Slide 19
Slide 19 text
[小課題] ディレクティブ
[1, 10, 5, 400, 6]の配列から、
下記のように表示させてください。
Slide 20
Slide 20 text
さて
Slide 21
Slide 21 text
Next.js
Slide 22
Slide 22 text
Next.js
Next.js = React + よく使われるライブラリ
・SSRを手軽にReact.jsベースで実装できる
・ルーティングの自動生成
などのメリットがあり、サービス開発部ではReactを直接使うのではなく、
Next.js を使うことが多いです。
Slide 23
Slide 23 text
Next.jsはサーバーサイドでも動く
Reactはクライアント側(ブラウザ)で動いていた
Next.jsはサーバーサイドでNode.jsエンジンの上で動く(target: server)
Slide 24
Slide 24 text
Node.jsとは
Slide 25
Slide 25 text
JavaScriptの特徴
JavaScriptはChromeやFirefoxといったブラウザ上で動きます。
PythonやRubyのような一般的なプログラミング言語は通常OS上で動作します。
Slide 26
Slide 26 text
ブラウザ上で動くと？
OS上で動くプログラムはOSの機能へとアクセスできます。
OSの機能とは例えばファイルの読み書きや、ネットワーク通信などを指します。
ブラウザ上で動くプログラムはユーザーの許可なく
OSの機能へアクセスできません。
もし、ブラウザ上で動くプログラムがOSにアクセス出来てしまうと、悪意のあるサイト
にアクセスしただけで、パソコン上のファイルを勝手に書き換えられてしまうような可
能性があるからです。
Slide 27
Slide 27 text
Node.jsとは？
サーバもJavaScriptで開発がしたぁい！
Node.jsはOS上で動くJavaScript実行環境です。
OSの機能にアクセスするプログラムを組むことができます。
ブラウザ上で動作していたときは出来なかったファイルの読み書きやネットワーク通
信ができるようになります。
（Node.jsもChromeと同じJavaScriptエンジン使ってます）
Slide 28
Slide 28 text
Node.jsをインストールする
実務ではnodenvを使ってNode.jsのバージョンを管理することが多いので、nodenvを
使ってみましょう。
anyenv + nodenvでバージョン管理するのがオススメです
https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f
Slide 29
Slide 29 text
npmとは
Slide 30
Slide 30 text
Node.jsと一緒にインストールされるnpm
Node.jsをインストールすると、同様にnpmもインストールされます。
デフォルトでインストールされることから分かる通り、Node.jsと関連がとても深いで
す。
業務でよく使います。
Slide 31
Slide 31 text
If I have seen further it is by standing on the shoulders of Giants.
「巨人の肩の上に立つ」という言葉は有名ですが、エンジニアの間では「車輪の再
発明をするな」の文脈でよく使われます。
必ずしも「車輪の再発明をするな」が正しいわけでは有りませんが、以下のようなメ
リットがあります。
- すでに動いていて、製品の品質保証が取れている
- 開発コストが下がる
世の中にはソフトウェアをパッケージやライブラリといった単位で配布されていま
す。こういったライブラリをうまく活用していくことで「巨人の肩の上に立つ」ことがで
きます。
Slide 32
Slide 32 text
パッケージ管理
他者が配布しているライブラリがインターネット上の様々な場所に散らばっていた
ら、検索が面倒です。
一つのソフトが複数のソフトを利用するため、「ソフトAをアップデートしたらソフトB、
ソフトCが動かなくなった「という状況が発生します。「ソフトB 5.0にはソフトA 2.0以上
が必要「といった関係があるためです。これをソフトの依存関係と言います。
このような依存関係を気にしながら
ライブラリを手動でインストールするのは
大変です。
Slide 33
Slide 33 text
パッケージ管理システム
そこでパッケージを管理するシステムを使います。パッケージ管理システムは以下
の動作をおこないます。
- リポジトリと呼ばれる場所に集約し、検索やインストールしやすくします。
- 取得したいパッケージにどのパッケージのバージョン何以上が必要か必要か
確認し、必要に応じてパッケージを勝手にダウンロードしてきてインストールし
てくれます。
Slide 34
Slide 34 text
Node.jsのパッケージ管理システム - npm
npmはNode Package Managerの略で、Node.jsで動く、ライブラリを管理するソフト
ウェアです。
- パッケージのインストール(npm install 〇〇)
- パッケージのアンインストール(npm uninstall 〇〇)
- パッケージの実行(npm run 〇〇)
などを行うことができます。
Slide 35
Slide 35 text
yarn とは
● npmと同じく、Node.jsで動作するパッケージマネージャー
● npmは2010年, yarnは2016年にリリースされた(yarnの方が新しい)
● npmと比較して、インストールが速い、セキュリティが高い
● yarn.lockファイルにより、バージョン違いのパッケージのインストールが発生し
ないようになっている
● サビ開でもyarnの方が使われています
● $ brew install yarn
cf. https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b
Slide 36
Slide 36 text
Next.jsをインストール
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
hello-next
$ yarn dev
Slide 39
Slide 39 text
ディレクトリを見てみる
Slide 40
Slide 40 text
node_modules
● npmやyarn経由でインストールされたパッケージは
ここに保存されます。
● 追加や修正を行うことはほぼ有りません。
● gitを使っている場合はgitignoreします。
Slide 41
Slide 41 text
package.json
● npm/yarnで管理してるパッケージの中身を
表しているファイル
● dependencies, devDependenciesは依存パッ
ケージを表す
● scriptsはyarn 〇〇などで呼び出すコマンド
を設定している
Slide 42
Slide 42 text
pages/index.tsx
.tsxファイルはReactのコンポーネントです。
(TypeScriptで書かれています)
構成は右図のようにすることが多いです。
pagesのように場所と名前が合ってないと動かない
ものもあるので注意
Slide 43
Slide 43 text
[小課題] ページ作成とルーティング
pagesディレクトリに「test-page」という名のディレクトリを作成した後、以下にアクセ
スできるようにしてください。
http://localhost:3000/test-page
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
[小課題] ページ遷移
pagesディレクトリの中に新しいtsxファイルを作成し、index.tsxからリンクして、遷移
できるようにしてください。
下の参考資料を読んで実装してみてください。
これ
Slide 46
Slide 46 text
public/
画像などの静的なものを入れる場所です。
「/」からの記述で読み込みできます。
Slide 47
Slide 47 text
[小課題] publicの参照
適当な画像をpublicから参照し、ページに表示してください。
参考資料
Slide 48
Slide 48 text
[小課題] コンポーネントの作成
新規でcomponentsに.tsxファイルを作成し、propsを活用してコンポーネントに値を
渡して表示してください。
参考資料
Displaying Data with Props
Slide 49
Slide 49 text
next.config.js
Next.jsの設定を行う場所です。以下のような設定ができます。
- グローバルで利用したいCSSファイルの設定
- build時の設定の拡張
- headerの設定
- pluginの設定
Slide 50
Slide 50 text
ビルドについて
Slide 51
Slide 51 text
tsxファイルはブラウザでは動かない？
tsxファイルはブラウザでは動かないです。
基本的にブラウザで動くのはJavaScript, HTML, CSSなどの静的ファイルのみとなり
ます。
Slide 52
Slide 52 text
yarn devして動くのはなぜ？
内部的にはtsxファイルをjsファイルに変換してReact ライブラリに紐づけています。
そのため、ブラウザ側からjsファイルを読み取り動いています。
tsx
ファイル
js
ファイル
Slide 53
Slide 53 text
変換とは？
この時行っているtsxファイルからjsファイルへの変換をコンパイルと呼びます。
コンパイル
tsx
ファイル
js
ファイル
Slide 54
Slide 54 text
紐付けとは
変換されたjsファイルはReactライブラリを使って動くように変換されているので、
Reactライブラリに紐付けをおこないます。これをリンクと呼びます。
コンパイル
リンク
tsx
ファイル
js
ファイル
Slide 55
Slide 55 text
ビルドとは
このコンパイルとリンクのまとめてビルドと呼びます。意味合いとしては実行可能
ファイルを作成することです。
ビルド
コンパイル
リンク
tsx
ファイル
js
ファイル