$30 off During Our Annual Pro Sale. View Details »

React & Next.js研修

techtekt
August 23, 2023

React & Next.js研修

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

techtekt

August 23, 2023
Tweet

More Decks by techtekt

Other Decks in Programming

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