React & Next.js研修

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

Transcript

1. React & Next.js

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

   View Slide

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

   View Slide

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

   

   View Slide

4. 正直

   世の中のシステムは

   似たようなものが多い

   

   View Slide

5. 共通関数をまとめておこう！

   → ライブラリ(React)

   

   雛形を作っておいて、穴埋め方式！

   → フレームワーク(Next.js, Vue.js, Nuxt.js)
   

   View Slide

6. Reactとは

   - JavaScript ライブラリの一つ

   - UIを構築するために使われます。

   - よく比較されるものに、Angular.js, Vue.js などがあります。

   

   View Slide

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

   

   View Slide

8. Reactを使ってみましょう

   

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

   View Slide

9. Hello React

   まずは適当にhtmlファイルを作成しましょう。

   

   
   
   
   <br/>const app = document.getElementById('app');<br/>
   
   
   

   View Slide

10. Hello React

    …
    <br/>const app = document.getElementById('app');<br/>const header = document.createElement('h1');<br/>const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');<br/>header.appendChild(headerContent);<br/>app.appendChild(header);
    

    View Slide

11. Hello React
    
    
    
    
    
    
    <br/>const app = document.getElementById('app');<br/>
    
    
    React の導入です。
    

    View Slide

12. Hello React
    コンポーネントで分けて開発するぞ！

    function Header() {
    return Develop. Preview. Ship. 🚀;
    }
    function HomePage() {
    return (
    
    
    
    );
    }
    ReactDOM.render(, app);
    

    View Slide

13. Hello React
    Propsってなんぞや？

    // 追加↓
    function createTitle(title) {
    if (title) {
    return title;
    } else {
    return 'Default title';
    }
    }
    // 編集↓
    function Header({ title }) {
    return {createTitle(title)};
    }
    function HomePage() {
    return (
    
    
    
    
    );
    }
    自由度が高い、コンポーネントの再利用が可能 

    

    View Slide

14. Hello React <リストの繰り返し>
    function HomePage() {
    const names = ['A','B','C']
    return (
    
    
    
    {names.map((name) => (
    {name}
    ))}
    
    
    );
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    

    

    View Slide

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

    View Slide

19. [小課題] ディレクティブ

    [1, 10, 5, 400, 6]の配列から、
    下記のように表示させてください。
    

    View Slide

20. さて

    

    View Slide

21. Next.js

    

    View Slide

22. Next.js

    Next.js = React + よく使われるライブラリ 

    

    ・SSRを手軽にReact.jsベースで実装できる 

    ・ルーティングの自動生成 

    

    などのメリットがあり、サービス開発部ではReactを直接使うのではなく、 

    Next.js を使うことが多いです。 

    

    View Slide

23. Next.jsはサーバーサイドでも動く

    Reactはクライアント側(ブラウザ)で動いていた

    Next.jsはサーバーサイドでNode.jsエンジンの上で動く(target: server)

    

    View Slide

24. Node.jsとは

    

    View Slide

25. JavaScriptの特徴

    JavaScriptはChromeやFirefoxといったブラウザ上で動きます。

    PythonやRubyのような一般的なプログラミング言語は通常OS上で動作します。

    

    View Slide

26. ブラウザ上で動くと？

    OS上で動くプログラムはOSの機能へとアクセスできます。

    OSの機能とは例えばファイルの読み書きや、ネットワーク通信などを指します。

    ブラウザ上で動くプログラムはユーザーの許可なく

    OSの機能へアクセスできません。

    もし、ブラウザ上で動くプログラムがOSにアクセス出来てしまうと、悪意のあるサイト
    にアクセスしただけで、パソコン上のファイルを勝手に書き換えられてしまうような可
    能性があるからです。

    

    View Slide

27. Node.jsとは？

    サーバもJavaScriptで開発がしたぁい！

    Node.jsはOS上で動くJavaScript実行環境です。

    OSの機能にアクセスするプログラムを組むことができます。

    ブラウザ上で動作していたときは出来なかったファイルの読み書きやネットワーク通
    信ができるようになります。

    

    （Node.jsもChromeと同じJavaScriptエンジン使ってます）
    

    View Slide

28. Node.jsをインストールする

    実務ではnodenvを使ってNode.jsのバージョンを管理することが多いので、nodenvを
    使ってみましょう。

    

    anyenv + nodenvでバージョン管理するのがオススメです

    

    https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f

    

    View Slide

29. npmとは

    

    View Slide

30. Node.jsと一緒にインストールされるnpm

    Node.jsをインストールすると、同様にnpmもインストールされます。

    デフォルトでインストールされることから分かる通り、Node.jsと関連がとても深いで
    す。

    業務でよく使います。

    

    View Slide

31. If I have seen further it is by standing on the shoulders of Giants.

    「巨人の肩の上に立つ」という言葉は有名ですが、エンジニアの間では「車輪の再
    発明をするな」の文脈でよく使われます。

    必ずしも「車輪の再発明をするな」が正しいわけでは有りませんが、以下のようなメ
    リットがあります。

    - すでに動いていて、製品の品質保証が取れている

    - 開発コストが下がる

    世の中にはソフトウェアをパッケージやライブラリといった単位で配布されていま
    す。こういったライブラリをうまく活用していくことで「巨人の肩の上に立つ」ことがで
    きます。

    

    

    View Slide

32. パッケージ管理

    他者が配布しているライブラリがインターネット上の様々な場所に散らばっていた
    ら、検索が面倒です。

    一つのソフトが複数のソフトを利用するため、「ソフトAをアップデートしたらソフトB、
    ソフトCが動かなくなった「という状況が発生します。「ソフトB 5.0にはソフトA 2.0以上
    が必要「といった関係があるためです。これをソフトの依存関係と言います。

    このような依存関係を気にしながら

    ライブラリを手動でインストールするのは

    大変です。

    

    View Slide

33. パッケージ管理システム

    そこでパッケージを管理するシステムを使います。パッケージ管理システムは以下
    の動作をおこないます。

    - リポジトリと呼ばれる場所に集約し、検索やインストールしやすくします。

    - 取得したいパッケージにどのパッケージのバージョン何以上が必要か必要か
    確認し、必要に応じてパッケージを勝手にダウンロードしてきてインストールし
    てくれます。

    

    

    View Slide

34. Node.jsのパッケージ管理システム - npm

    npmはNode Package Managerの略で、Node.jsで動く、ライブラリを管理するソフト
    ウェアです。

    - パッケージのインストール(npm install 〇〇)

    - パッケージのアンインストール(npm uninstall 〇〇)

    - パッケージの実行(npm run 〇〇)

    などを行うことができます。

    

    View Slide

35. yarn とは

    ● npmと同じく、Node.jsで動作するパッケージマネージャー

    ● npmは2010年, yarnは2016年にリリースされた(yarnの方が新しい)

    ● npmと比較して、インストールが速い、セキュリティが高い

    ● yarn.lockファイルにより、バージョン違いのパッケージのインストールが発生し
    ないようになっている

    ● サビ開でもyarnの方が使われています

    ● $ brew install yarn

    

    cf. https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b

    

    

    View Slide

36. Next.jsをインストール

    

    View Slide

37. 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

    

    View Slide

38. hello-next

    $ yarn dev

    

    

    View Slide

39. ディレクトリを見てみる

    

    View Slide

40. node_modules

    ● npmやyarn経由でインストールされたパッケージは
    ここに保存されます。

    ● 追加や修正を行うことはほぼ有りません。

    ● gitを使っている場合はgitignoreします。

    

    View Slide

41. package.json

    ● npm/yarnで管理してるパッケージの中身を
    表しているファイル

    ● dependencies, devDependenciesは依存パッ
    ケージを表す

    ● scriptsはyarn 〇〇などで呼び出すコマンド
    を設定している

    

    View Slide

42. pages/index.tsx
    .tsxファイルはReactのコンポーネントです。

    (TypeScriptで書かれています)

    構成は右図のようにすることが多いです。

    pagesのように場所と名前が合ってないと動かない
    ものもあるので注意

    

    

    View Slide

43. [小課題] ページ作成とルーティング

    pagesディレクトリに「test-page」という名のディレクトリを作成した後、以下にアクセ
    スできるようにしてください。

    http://localhost:3000/test-page
    

    View Slide

44. 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

    

    View Slide

45. [小課題] ページ遷移

    pagesディレクトリの中に新しいtsxファイルを作成し、index.tsxからリンクして、遷移
    できるようにしてください。

    下の参考資料を読んで実装してみてください。

    

    これ

    

    View Slide

46. public/

    画像などの静的なものを入れる場所です。

    「/」からの記述で読み込みできます。

    

    View Slide

47. [小課題] publicの参照

    適当な画像をpublicから参照し、ページに表示してください。

    

    参考資料

    

    View Slide

48. [小課題] コンポーネントの作成

    新規でcomponentsに.tsxファイルを作成し、propsを活用してコンポーネントに値を
    渡して表示してください。

    

    参考資料

    Displaying Data with Props

    

    

    View Slide

49. next.config.js

    Next.jsの設定を行う場所です。以下のような設定ができます。

    - グローバルで利用したいCSSファイルの設定

    - build時の設定の拡張

    - headerの設定

    - pluginの設定

    

    

    

    

    View Slide

50. ビルドについて

    

    View Slide

51. tsxファイルはブラウザでは動かない？

    tsxファイルはブラウザでは動かないです。

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

    

    

    View Slide

52. yarn devして動くのはなぜ？

    内部的にはtsxファイルをjsファイルに変換してReact ライブラリに紐づけています。

    そのため、ブラウザ側からjsファイルを読み取り動いています。

    

    tsx
    ファイル
    js
    ファイル
    

    View Slide

53. 変換とは？

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

    コンパイル 

    tsx
    ファイル
    js
    ファイル
    

    View Slide

54. 紐付けとは

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

    コンパイル 
 リンク

    tsx
    ファイル
    js
    ファイル
    

    View Slide

55. ビルドとは

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

    ビルド

    コンパイル 
 リンク

    tsx
    ファイル
    js
    ファイル
    

    View Slide