Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 - フレームワーク - Vue.js

    - フレームワーク - Nuxt.js - フレームワーク
  2. Reactを使ってみましょう
 
 以降のコードは*1を参考としています *1 Next.js by Vercel - The React

    Framework. Introduction | Learn Next.js. https://nextjs.org/learn/foundations/about-nextjs . 2023-06-22
  3. Hello React
 まずは適当にhtmlファイルを作成しましょう。
 
 <!-- index.html --> <html> <body> <div

    id="app"></div> <script type="text/javascript"> const app = document.getElementById('app'); </script> </body> </html>
  4. 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をいじってみます。
  5. 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 の導入です。
  6. Hello React コンポーネントで分けて開発するぞ!
 function Header() { return <h1>Develop. Preview. Ship.

    🚀</h1>; } function HomePage() { return ( <div> <Header /> </div> ); } ReactDOM.render(<HomePage />, app);
  7. 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> ); } 自由度が高い、コンポーネントの再利用が可能 

  8. 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> ); }
  9. Hello React <イベントの実行> function HomePage() { // ... function handleClick()

    { console.log('クリックされたよ!'); } return ( <div> {/* ... */} <button onClick={handleClick}>Like</button> </div> ); }
  10. Hello React <状態1> function HomePage() { // ... let likes

    = 0 function handleClick() { likes = likes + 1; } return ( <div> {/* ... */} <button onClick={handleClick}>Likes({likes})</button> </div> ); }
  11. 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で作成した変数が変更されると再描画される
 

  12. React で使われる小技 function Display({disp}) { return ( <div> { disp

    && <p>この文章が見えます。<p> } </div> ); } function Display({isChild}) { return ( <p> あの方は{isChild? '子供' : '大人' }です </p> ); } 式と演算子
  13. Next.js
 Next.js = React + よく使われるライブラリ 
 
 ・SSRを手軽にReact.jsベースで実装できる 


    ・ルーティングの自動生成 
 
 などのメリットがあり、サービス開発部ではReactを直接使うのではなく、 
 Next.js を使うことが多いです。 

  14. If I have seen further it is by standing on

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

  15. Node.jsのパッケージ管理システム - npm
 npmはNode Package Managerの略で、Node.jsで動く、ライブラリを管理するソフト ウェアです。
 - パッケージのインストール(npm install

    〇〇)
 - パッケージのアンインストール(npm uninstall 〇〇)
 - パッケージの実行(npm run 〇〇)
 などを行うことができます。

  16. yarn とは
 • npmと同じく、Node.jsで動作するパッケージマネージャー
 • npmは2010年, yarnは2016年にリリースされた(yarnの方が新しい)
 • npmと比較して、インストールが速い、セキュリティが高い
 •

    yarn.lockファイルにより、バージョン違いのパッケージのインストールが発生し ないようになっている
 • サビ開でもyarnの方が使われています
 • $ brew install yarn
 
 cf. https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b
 

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