2024新卒技術研修_FE②

DMM.comの24新卒エンジニア技術研修_フロントエンド研修の資料②です。

Transcript

1. © DMM.com 座学中盤：Yatter演習
2. © DMM.com 井内 将俊 (iuchi masatoshi) 2 自己紹介 23卒 LC開発部VCグロースグループ 主にフロントエンドを担当し、たまにLive2Dと戦っています #times_iuchi-masatoshi
3. © DMM.com • Yatter開発で大きく詰まらない • Yatter開発で必要なFE技術の大枠が分かる • 詰まった時に何が分からないのかが分かる 3 本講義の目的
4. © DMM.com React/Next.js (Pages Router/Static Exports) TypeScript その他(UI、データ取得、状態管理等)の技術は基本指定無し 4 Yatterの技術構成 Vercel, the Vercel design, Next.js and related marks, designs and logos are trademarks or registered trademarks of Vercel, Inc. or its affiliates in the US and other countries . https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f2 5972/fixtures/dom/public/react-logo.svg https://www.typescriptlang.org/branding/ https://vercel.com/geist/brands#usage
5. © DMM.com もくじ • Reactの話 • Next.jsの話 • TypeScriptの話 • データ取得の話 • 擬似ログインセッション管理の話 • その他 • テスト • デプロイ • スタイル適応 5 Yatter開発で必要になる技術を 一通り解説/紹介します
6. © DMM.com Reactのお話 6
7. © DMM.com Reactとは？ React：JavaScriptのライブラリ(既存のJSプロダクトの一部に使ったりもできる) Reactを選ぶメリットは？ • Facebook(現Meta)が開発している安定感 • TypeScriptとの相性が良い • コミュニティが大きく、周辺ライブラリが優秀 • 宣言的UI • React以外にも宣言的UIを採用するフレームワーク/ライブラリは沢山ある 例）Vue, Angular, Svelte 7
8. © DMM.com 宣言的UI/命令的UI 8 命令的UI 具体的な手順に1つ1つを書いていく → 複雑な処理になると可読性が下がる 宣言的UI 作りたい物の設計図を書く → パッと見ただけで何が作りたいのか分かる
9. © DMM.com 命令的 宣言的 宣言的UI/命令的UI 9 UIとステート(データ)をわけて考えることができる → 実装しやすい & 可読性が高くなりやすい Reactは宣言的 複雑な処理になると可読性が低くなりやす い
10. © DMM.com React復習：hooks コンポーネントからReactの機能を利用するときに使う。 useState：状態を持たせるためのhook とてもよく使う useEffect：副作用を扱う為のhook よく使う hooksを組み合わせて独自のhooks(カステムフック)を作ることもできる 10 TRY Playgroundでそれぞれの役割を確認しましょう ※このPlaygroundはこのあとも使うので開いたままにしておいてください
11. © DMM.com 10:45 まで休憩&Try1 11
12. © DMM.com React復習：コンポーネント コンポーネント • UIを作るための部品/関数として定義できる( ボタンとか、各ツイートとか ) • 再利用できる/できそうなUIはコンポーネントとして分ける • コンポーネント間はpropsという仕組みを用いてデータ共有を行う ※コンポーネントはパスカルケース(アッパーキャメルケース)で始まる 例：HogePiyo 12 12 TRY Playgroundでそれぞれの役割を確認しましょう Quick Start：コンポーネント作成とネスト/コンポーネントのデータ共有 ※このPlaygroundはもう少し使うので開いたままにしておいてください
13. © DMM.com 11:00まで休憩&Try2・3 13
14. © DMM.com React小話：クラスコンポーネント React 16.8 (2019/02/06)以前はクラスを使ってコンポーネントを定義 していた 古い書き方なので、基本的にもう使わない （昔のコードで一部使われていることはある） 14 (https://ja.reactjs.org/docs/react-component.html より)
15. © DMM.com Reactのレンダリング 1/3 DOM 15 DOM(Document Object Model) HTMLの要素取得や操作をするための仕組み DOMツリーというツリー構造でHTMLドキュメントを表現する html html body html html div img h1
16. © DMM.com Reactのレンダリング 2/3 仮想DOM 16 FacebookでReactを作った人の思考 「ステートが変わったら、勝手に表示が変わるようにしたい」 「でもステート変更で不必要に多くのDOM更新をするのは重たい」 「間に仮想DOM(※)という仕組みを挟んで、差分だけDOMを更新するよ うにしよう」 ※最近は仮想DOMと呼ばれなくなってきました 正確な解説は公式ドキュメントを読んでみてください
17. © DMM.com Reactのレンダリング 3/3 再レンダリング ・ステートが変わったとき ・仮想DOMを更新する ・比較的軽い処理 17 React ランタイム 仮想DOM DOM render ・差分だけを反映する (差分がなければスキップ) ・比較的重い処理 Reconciliation (前回と差分を計算) commit ブラウザ paint ブラウザ表示に 反映する 注意！ React界隈では「レンダリング」と言ったら、「仮想DOMの更新〜差分の計算」を意味します。 ただ、一般的に「レンダリング」と言ったら、ブラウザの画面描画(図で言うpaintの部分)やHTMLの生成 (CSR/SSRなど)も意味します。
18. © DMM.com レンダリングが起きる条件 18 • レンダリングがいつ起きるか？ • 初回読み込み • 自身のステートが変更されたとき • 親のステートが変わったとき • Reactではレンダリング時に関数コンポーネントが実行される TRY さきほどのPlaygroundで確認しよう！ ※ StrictModeになっているので、レンダリング・エフェクトの実行が追加でもう1回実行されます
19. © DMM.com まとめ Reactが不安な方はQuick Startは読んでおきましょう - コンポーネント：作成とネスト データ共有 事前課題 Reactの公式ドキュメントから3ページ - Quick Start Reactの機能の概要が分かる。 初心者は全員読んで損はない。 - Tutorial: Tic-Tac-Toe ゲームを作るチュートリアル。 - Thinking in React Reactで製品データテーブルを構築する思考プロセス。 19
20. © DMM.com 00:00 まで休憩&Try 20
21. © DMM.com Next.jsのお話 21
22. © DMM.com Next.jsとは Vercel社が作っているReactベースのフレームワーク • Reactベースのフレームワークには他にもある • Remix • Gatsby 22 ( 余談 ) • Reactはライブラリであり、既存のアプリの一部に追加できる( Next.jsは基本的に適さない ) • Reactを用いたアプリを0から構築するなら、フレームワークを用いることが推奨されています 参考：React プロジェクトを始める
23. © DMM.com Next.jsが行うこと • ルーティング • ファイルシステムベース(ファイルの配置位置)ルーティングを行っている Next.js公式ドキュメント • 画面遷移に使用する<Link>やuseRouter もNext.jsの機能 Next.js公式ドキュメント • 各種最適化 • ビルドで吐き出されるJSの最適化 • 画像 next/image • フォント next/font • 外部スクリプトの読み込み next/script • メタデータ管理 • SEO対策が容易になる • SSR / SG • 別の講義で詳しく解説！ 23 ポイント これら以外は基本Reactの機能 Next.jsの機能なのかReactの機能なのか (又はjavascript/typescriptの機能なのか)意識できると Good！
24. © DMM.com (補足) YatterでのNext.js - Pages Routerの利用 - Next.jsには他にもApp Routerという別のルーティングシステムがある - 本研修ではPages Routerを利用 - 静的出力設定を使用 - Node.jsサーバーを用いた運用は基本考えない - Yatterは外部公開禁止なため、実弾演習場等を用いたSSR運用は基本非推奨 24 Yatter開発中はNext.jsよりもReactの機能で手一杯かも - できる人 or 挑戦したい人はNext.jsの機能をどんどん活用しよう！
25. © DMM.com まとめ • Next.jsはReactベースのフレームワークの1つ • ルーティングや各種最適化を行うが本研修で意識することは少ない • 基本はReact本体の機能を意識する • 今後Next.jsで開発する予定がある人は以下の2点を意識しておく • Pages Routerを使っている • 静的出力設定を利用している 25
26. © DMM.com TypeScriptのお話 26
27. © DMM.com TypeScript • JavaScriptに静的な型が追加されたもの • メリット • 型安全：型によってエラー・不具合の検出がプログラム実行前にできる • 補完 ：型情報からエディタが補完してくれるため、開発効率が向上 他にも… • 可読性・保守性の向上 • 互換性：JavaScript と共存でき、段階的に置き換えることができる • DMMでもTypeScriptを使っている事業部が多い 27 TRY TypeScriptのエラーを解決してみる Playground
28. © DMM.com 11:25 までTry 28
29. © DMM.com TypeScriptでの型活用 ( 書き手の利点 29 型安全/型補完 型定義により、意図しない値の混入をビルド時にエラーとできる → 実行時におかしな値が入る心配を減らせる
30. © DMM.com TypeScriptでの型活用 ( 読み手の利点 30 可読性/保守性 例：コンポーネントへ渡すPropsの型定義 • どんな値を受け取るのか一目で分かりGood！ 型定義
31. © DMM.com どうしてもTypeScriptエラーが消えない時は... 31 • any 型：どんな型でも代入を許す型 • 型アサーション「as」：型を上書きする機能 • @ts-expect-error：型エラーを正とするコメント(型エラーが無いとエラー) • @ts-ignore：型エラーを無視するコメント(型エラーの有無は関係なし) 基本的に使用は避けるべき ただ、型エラーにつまづき開発が大きく滞る際には選択肢に入る ( 型エラーで詰まった際は、積極的に講師に頼ろう！)
32. © DMM.com まとめ 32 型定義のメリット • 型安全/型補完 • 可読性/保守性の向上 型定義のデメリット • 後々嬉しくなる性質上、 短期開発では煩わしく感じることも... まずは動くものを作り、後から型を活用するのもあり 頼りになるサイト • サバイバルTypeScript • TypeScript Deep Dive 日本語版 • ( 生成AIへの壁打ちも頼りになる )
33. © DMM.com もくじ • Reactの話 • Next.jsの話 • TypeScriptの話 • データ取得の話 • 擬似ログインセッション管理の話 • その他 • テスト • デプロイ • スタイル適応 33 ←次はここ
34. © DMM.com データ取得/送信の話 (API繋ぎこみの話) 34
35. © DMM.com FetchとAxios Fetch API ブラウザに組み込まれた標準API。外部ライブラリに依存しない。 参考資料: MDN Fetch API 35 Axios HTTPクライアントのライブラリ。インストールが必要。Fetchよりも機能が多い 例：タイムアウト設定 参考資料: Axios 入門 どちらか好みの技術を使ってデータの取得・送信を行う
36. © DMM.com useEffectをFetchを用いたデータ取得 36 引用元：https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side#client-side-data-fetching-with- useeffect Next.js 公式ドキュメントより引用 Reactスライドの TRY でも同じことを行っている 余裕のある人はエラーハンドリングも挑戦しよう！
37. © DMM.com 応用編：SWR Next.js公式ドキュメントより引用 ・キャッシュ ・一定間隔での再取得 ・ローディングの取得 等を行える Next.jsと同じ組織が開発し、DMMの プロダクトでも実際に使用されている ( ポイントクラブ等 ※ 余裕のある人は 挑戦してみよう！ 37 引用元：https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side#client-side-data-fetching-with- swr
38. © DMM.com ブラウザの開発者ツールの活用 38 Networkタブの活用 どのような通信を行われているか確認 Headers：Header、通信先、ステータスコードの確認 Payload：送信データの確認 Preview/Response：取得データの確認
39. © DMM.com モックサーバーの活用 39 READMEのコピペ
40. © DMM.com 擬似ログインセッション管理 の話 40
41. © DMM.com 一般的なログインセッション ※ 詳細は07/05の認証認可研修で教わります 41 ログインセッション：ユーザーを識別するために利用する情報(自分の鍵のようなイメージ ) ブラウザ サーバー ログインをリクエスト 成功 ログインセッション
42. © DMM.com 一般的なログインセッション ※ 詳細は07/05の認証認可研修で教わります 42 ブラウザ サーバー 認証が必要なAPIを叩く 成功 ログインセッション Yatterの場合 ・フォロー ・アンフォロー ・アカウント情報編集 等 認証が必要なAPIを叩く際には ログインセッションも一緒に送る ログインセッション：ユーザーを識別するために利用する情報(自分の鍵のようなイメージ )
43. © DMM.com 一般的なログインセッション管理 43 ログイン時に受け取ったセッションを、認証付きAPIを叩く際に使用する → ログインセッションはどこで保持する？ → Local Storage or Cookieにて保持するのが一般的 ※ 詳細は07/05の認証認可研修で教わります ここまでは一般的な話 Local Storage / Cookie JavaScriptのメモリ内では無く、ブラウザに 保存されるデータ。 よって再読み込みしても消えずに残る。
44. © DMM.com Yatterでの話 44 Yatterにはセッションを生成する機能が無い → 代わりにユーザー名が擬似的なログインセッションの役割となっている ブラウザ サーバー ログインをリクエスト 成功 ユーザー名 ブラウザ 認証が必要なAPIを叩く 成功 ユーザー名 サーバー ユーザー名を Local Storage or Cookie にて管理 認証つきAPIのHeaderのAuthenticationには ユーザー名を入れる必要があるハズ
45. © DMM.com • 実プロダクトではログイン時にログインセッションを受け取り管理する • Yatterではセッション生成機能が無いのでユーザー名が擬似的にセッションの 役割をしている • セッション保持(ユーザー名保持)はLocal storage or Cookieがオススメ まとめ 上記を意識せずとも、ユーザー名を認証付きAPIを叩く時のHeaderに入れれば動く ただ、意識しておくと認証認可研修での学びが増えるはず... !
46. © DMM.com その他 諸々 46
47. © DMM.com フロントエンドのテスト 47 テストの詳細は木曜日の最後の講習でお話しします できる人 or 挑戦したい人ははどんどんテストケースを書いてみましょう！ FEのテストの優先度はBEほど高くない場合も多く、ファーストリリースで テストコードがないことも多々ある 要因 - デザインの更新に伴うテストの再実装 - 不具合がシステム全体の致命的となることが少ない テストケースの例はこちら Homeコンポーネントに”Yatter”テキストが含まれることを確認する例
48. © DMM.com スタイル適用 でも... 見た目もカッコよくしてモチベを上げたい！ という人は 48 前提：CSSは努力目標です。0行でもかまいません (※ LP開発で既に触れている為) UIコンポーネントライブラリを活用しましょう！ - MUI - Chakra UI - Mantine - ( shadcn/ui ) 上記3つとは毛色が異なる - etc… ( 選択肢が多い為、迷ったらチームメンバーや講師に相談しよう！ ) 注意 CSSに慣れていない人が TailwindやCSS Modules 等でゴリゴリスタイルを書くことはオススメしませ ん (機能実装時間が圧迫される為) CSSに慣れてないけどそれっぽい見た目にしたい人 は、UIコンポーネントライブラリを活用しよう！
49. © DMM.com 簡単CI/CDとホスティング テンプレートリポジトリ には、以下の技術を用いた設定が既にあります 活用してみましょう！ README 49 ※ Yatterは外部公開禁止とのことなので、その点に注意してください CI/CD ：継続的インテグレーションおよび継続的デリバリー/デプロイメント) Circle CIを利用 ホスティング：コンテンツをインターネットに公開する GitHub Pagesを利用
50. © DMM.com 以上 Yatter演習前講義内容は終わり 50
51. © DMM.com 演習：Next.jsでYatterを作ろう 51
52. © DMM.com • CSSは努力目標です。 • スタイルよりも、Reactの学習が目的です • テストケースを最低1個書いてみましょう • テストケースの例はこちら • できる人 or 挑戦したい人ははどんどんテストケースを書いてみましょう • ただ、テストに関する詳しい紹介は木曜日に行うので、一旦後回しでもOK • 助け合いましょう • わからないことがあったら班のメンバー or 講師に遠慮せず聞きましょう • 慣れてる人は完成させるよりも教えることを優先 • 希望者はフロントエンド講師からレビューを受けることができます 昨年の例 演習：Next.jsでYatterを作ろう(注意) 52
53. © DMM.com • まずGitHub Enterpriseでテンプレートリポジトリをフォークしましょう • TypeScriptで開発してください • 環境構築手順はREADMEに書いています • 進捗表 に作ったリポジトリのリンクを貼ってください • 各項目を達成したら◦をつけてください 演習：Next.jsでYatterを作ろう(手順) 53
54. © DMM.com やってみよう！ 54
55. © DMM.com - Comment Screen - 進捗管理表 - Yatterテンプレートリポジトリ 55 リンク集
56. © DMM.com 00:00 まで休憩&Try2 3 56