フレームワーク フロントエンド / 2023 ニフティ新人研修

2023年度ニフティエンジニア新人研修の講義資料です。

Transcript

1. 2023年度エンジニア定例 フレームワーク回フロントエンド By たけろいど
2. こんにちは たけろいど と申します
3. 注意点３つ
4. Too Long
6. 気合い入れすぎました ごめなさい 休憩を適宜いれます
7. Shall We Dance?
8. 一緒に学んでいこう
9. 質問をどんどんしよう
10. 迷惑じゃないかな？ 時間大丈夫かな？ 的外れな質問かな？
11. ᱘Δͳ ͓ ͝
12. 僕は天才です
13. 2021年９月以前 森羅万象 知ってます
14. 2021年９月以前 森羅万象 知っています
15. Take it easy！
16. 何事も楽しく
17. ಥવ͚ͩͲ
18. ҧ͍͕Θ͔Δ ਓʹͳΖ͏
19. SPAとMPA
20. MPA tte nani ?
21. Multi Page Application MPA tte nani ?
22. ページ遷移のたび loadingがあるやつ MPA tte nani ?
23. loadingが遅かったり コードが冗長だったり MPA tte nani ?
24. それでも！ MPA tte nani ?
25. 開発コストが安い！ SEOに有利！ Accessibilityが高い！ MPA tte nani ?
26. SPA ッテ ナニ？
27. S Page Application SPA ッテ ナニ？
28. 🙋
29. Single Page Application SPA ッテ ナニ？
30. ページ遷移がない 不思議なやつ SPA ッテ ナニ？
31. しかも！ SPA ッテ ナニ？
32. 表現の幅が増える loadingが速い ページ遷移が高速 SPA ッテ ナニ？
33. 要は適材適所
34. コンテンツ重視なら MPA…？
35. ニュースサイト 教育コンテンツ ブログ etc…
36. ワクワクするUIなら SPA…?
37. チャットアプリ ストリーミングアプリ ゲーム etc..
38. ҧ͍͕Θ͔Δ ਓʹͳΖ͏
39. 41"ͱ.1"ͷҧ͍͸ʁ ページ遷移はどう違う？ SEOにはどっちが強い？ 開発しやすいのはどっちだろう？ 普段使っているサービスはどっちだろう？
40. 余談（オフレコ）
41. CSRとSSR
42. C S R CSRとSSR
43. 🙋
44. No Hints🙇 CSRとSSR
45. Client Side Rendering CSRとSSR
46. クライアント 側で レンダリングする CSRとSSR
47. Server Side Rendering CSRとSSR
48. サーバー 側で レンダリングする CSRとSSR
49. レンダリングする？ CSRとSSR
50. レンダリングする HTMLファイル → DOMツリー CSSファイル → CSSOMツリー DOMツリー ＋ CSSOMツリー ＝ レンダリングツリー ブラウザがレンダリングツリーのなかの要素をレイアウトし描画する
51. レンダリングどこでする？ CSRとSSR
52. クライアントでする！！！ GOOD - クライアント側ならその分鯖の負荷が減る - 鯖はAPIやデータだけを管理するため責務が明確になる BAD - 古い端末でできなかったりする - SEOに不利
53. サーバーでする！！！ GOOD - SEOに有利 - 古い端末やブラウザでも動作する BAD - サーバー負荷高い - 開発が複雑
54. ҧ͍͕Θ͔Δ ਓʹͳΖ͏ CSRとSSR
55. $43ͱ443ͷҧ͍͸ʁ レンダリングはどこで行う？ SEOにはどっちが強い？ 普段使っているサービスはどっちだろう？
56. ٳ ጥ
57. フレームワーク
58. フレームワーク 知ってる人🙋 ϑϩϯτΤϯυ
59. つーか フレームワークっ て 何?🤔
61. ゐ？
63. ゑ？
64. 固い
65. プログラミング言 語 難しい
66. server.run() と書くだけで鯖が 動けばSoHappy
67. いろんな機能 提供してくれたら 素敵やん
68. それがフレームワー ク
70. 主要なフレームワーク紹介
71. の前に...
72. UIフレームワーク - ウェブアプリケーションのUIを作成するためのもの - ルーティングや状態管理は別 WEBアプリケーションフレームワーク - ウェブアプリケーション全体を管理するためのもの - UIフレームワークを基礎として発展させたもの
73. UIフレームワーク
74. React 主要なフレームワーク
75. React 学びやすさ - コンセプトは簡単だが、高度な利用には深い理解が必須 コミュニティ - Meta社が開発・提供しており人気なフレームワーク パフォーマンス - 仮想DOMを用いてUIの変更を最適化している
76. Vue.js 主要なフレームワーク
77. Vue.js 学びやすさ - 基本的なWEBの知識があれば学びやすく、ドキュメントも豊富 コミュニティ - 人気のあるOSS。公式のルーターや状態管理ライブラリが魅力 パフォーマンス - Vueも仮想DOM。リアクティブデータバインディングも効率的
78. Svelte 主要なフレームワーク
79. Svelte 学びやすさ - 魔法と称されるほど簡単。丁寧なドキュメント コミュニティ - 急成長中のコミュニティ。コアメンバーはVercel社に勤務 パフォーマンス - コンパイラであるため仮想DOMを必要としないため、より高速
80. WEBアプリケーション フレームワーク
81. Next.js 主要なフレームワーク
82. Next.js 学びやすさ - ReactからNext.jsは非常にスムーズ。 コミュニティ - 大規模なコミュニティを有する。Vercelが開発している パフォーマンス - CSRとSSRを組み合わせて最適なパフォーマンスを提供できる
83. Nuxt.js 主要なフレームワーク
84. Nuxt.js 学びやすさ - Vueらしく直感的で学びやすい。バージョンの差異が激しい コミュニティ - 大きく活発なコミュニティが存在。東アジア圏で人気 パフォーマンス - 必要に応じてCSR、SSR、スタティック生成を選択できる
85. SvelteKit 主要なフレームワーク
86. SvelteKit 学びやすさ - シンプルで学びやすい コミュニティ - まだまだ小さいが勢いのあるコミュニティ。エコシステムに不安有 パフォーマンス - Svelteの特性を受け継いだままCSR、SSR、スタティック生成を実現
87. なぜ つかうの！？
88. いつ つかうの！？
89. どうやって つかうの！？
90. 早速 使ってみたく なってきた？
91. མͪண͍ͯɺ ਂݺٵɻਂݺ ٵ
92. ࢲʹ΋ Θ͔Βͳ͍͜ ͱ͋ΔΜͰ͢
93. ͔ͩΒ
94. ҧ͍͕Θ͔Δ ਓʹͳΖ͏ フレームワークについて
95. ϑϨʔϜϫʔΫʹ͍ͭͯ UIフレームワークとは？ WEBアプリケーションフレームワークとは？ 各フレームワークの強みは？ 各フレームワークの弱みは？
96. 余談（オフレコ）
97. コンポーネント指向について
98. コンポーネントとは...
99. コンポーネントとは...
100. コンポーネントとは...
101. コンポーネントとは... <div> <svg ….>{chatGPT icon}</svg> </div> <div> <svg ….>{user icon}</svg> </div>
102. コンポーネントとは... <div> <svg ….>{chatGPT icon}</svg> </div> <div> <svg ….>{user icon}</svg> </div> なんか似てない？
103. コンポーネントとは... <div> <svg ….>{chatGPT icon}</svg> </div> <div> <svg ….>{user icon}</svg> </div> 共通化したい！
104. コンポーネントとは... <div> <svg ….>{XXX icon}</svg> </div>
105. コンポーネントとは... 使い回したり 修正しやすい
106. コンポーネントとは...
107. コンポーネントとは...
108. コンポーネントとは... 再利用性・保守性に優れた設計思 想 現代フレームワークの基礎
109. コンポーネントとは... コンポーネントに着目し て WEBサイトを見てみよう
110. コンポーネントとは... Vercel blog Zenn
111. コンポーネントの構造
112. 1SPQT
113. コンポーネント間で データを受け渡すための メカニズム 1SPQT
114. コンポーネントとは... <div> <svg ….>{XXX icon}</svg> </div>
115. Declaring props • Svelte Examples Passing Props to a Component – React
116. 4UBUF
117. コンポーネントが管理し その状態に応じて 表示や挙動が変わるデータ 4UBUF
118. Reactive declarations • Svelte Examples
119. HTMLは静的なもの 動的にするのは一苦労
120. HTMLとJSのみで表現 <!DOCTYPE html> <html> <head> <3tle>Dynamic Number Change</3tle> </head> <body> <bu?on id="incrementBu?on">増加</bu?on> <bu?on id="decrementBu?on">減少</bu?on> <p id="displayNumber">0</p> <script src="script.js"></script> </body> </html>
121. HTMLとJSのみで表現 // 数値を表示する要素を取得 let displayElement = document.getElementById('displayNumber'); // 増加ボタンにクリックイベントを設定 document.getElementById('incrementButton').addEventListener('click', function() { // 表示されている数値を増加 let currentValue = parseInt(displayElement.innerText); displayElement.innerText = currentValue + 1; }); // 減少ボタンにクリックイベントを設定 docum ent . get El em ent ByI d( ' decrem ent But t on' ) . addEvent Li st ener ( ' cl i ck' , f unct i on( ) { // 表示されている数値を減少 le t c u r r e n t V a lu e = p a r s e In t ( d is p la y E le m e n t .in n e r T e x t ) ; di spl ayEl em ent . i nnerText = cur rent Val ue - 1; });
122. フレームワークを使う場合 <script> let count = 0; function increment() { count += 1; } function decrement() { count -= 1; } </script> <button on:click={increment}> 増加 </button> <button on:click={decrement}> 減少 </button>
123. -JGF$ZDMF
124. ྠ㕩సੜ -JGF$ZDMF 言い換えると
125. コンポーネントにも -JGF$ZDMF 生まれた時 死んだ時がある
126. そんな中でも 楽しく生きたい -JGF$ZDMF
127. コンポーネント同士にも 関係性がある -JGF$ZDMF
128. 親子関係 <script> import Nested from './Nested.svelte'; </script> <p>These styles...</p> <Nested/> <style> p { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; } </style> ίϯϙʔωϯτ͕ೖΕࢠʹͳ͍ͬͯΔ͜ ͱΛࢦ͢
129. 親子関係 <script> import Nested from './Nested.svelte'; </script> <p>These styles...</p> <Nested answer={42} /> <style> p { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; } </style> ࣮ࡍʹ࢖༻͢Δ৔߹͸େ఍ɺ஋Λ౉͢ඞ ཁ͕͋Δ
130. 親子関係 <script> export let answer; </script> <p>The answer is {answer}</p> ड͚औΔଆ͸͜Μͳײ͡ʢ4WFMUFʣ
131. ҧ͍͕Θ͔Δ ਓʹͳΖ͏ フレームワークについて
132. ίϯϙʔωϯτࢦ޲ʹ͍ͭͯ StateとPropsの違いは？ コンポーネント指向ってなんだっけ？