Slide 1

Slide 1 text

2023年度エンジニア定例 フレームワーク回フロントエンド By たけろいど

Slide 2

Slide 2 text

こんにちは たけろいど と申します

Slide 3

Slide 3 text

注意点3つ

Slide 4

Slide 4 text

Too Long

Slide 5

Slide 5 text

131

Slide 6

Slide 6 text

気合い入れすぎました ごめなさい 休憩を適宜いれます

Slide 7

Slide 7 text

Shall We Dance?

Slide 8

Slide 8 text

一緒に学んでいこう

Slide 9

Slide 9 text

質問をどんどんしよう

Slide 10

Slide 10 text

迷惑じゃないかな? 時間大丈夫かな? 的外れな質問かな?

Slide 11

Slide 11 text

᱘Δͳ ͓ ͝

Slide 12

Slide 12 text

僕は天才です

Slide 13

Slide 13 text

2021年9月以前 森羅万象 知ってます

Slide 14

Slide 14 text

2021年9月以前 森羅万象 知っています

Slide 15

Slide 15 text

Take it easy!

Slide 16

Slide 16 text

何事も楽しく

Slide 17

Slide 17 text

ಥવ͚ͩͲ

Slide 18

Slide 18 text

ҧ͍͕Θ͔Δ ਓʹͳΖ͏

Slide 19

Slide 19 text

SPAとMPA

Slide 20

Slide 20 text

MPA tte nani ?

Slide 21

Slide 21 text

Multi Page Application MPA tte nani ?

Slide 22

Slide 22 text

ページ遷移のたび loadingがあるやつ MPA tte nani ?

Slide 23

Slide 23 text

loadingが遅かったり コードが冗長だったり MPA tte nani ?

Slide 24

Slide 24 text

それでも! MPA tte nani ?

Slide 25

Slide 25 text

開発コストが安い! SEOに有利! Accessibilityが高い! MPA tte nani ?

Slide 26

Slide 26 text

SPA ッテ ナニ?

Slide 27

Slide 27 text

S Page Application SPA ッテ ナニ?

Slide 28

Slide 28 text

🙋

Slide 29

Slide 29 text

Single Page Application SPA ッテ ナニ?

Slide 30

Slide 30 text

ページ遷移がない 不思議なやつ SPA ッテ ナニ?

Slide 31

Slide 31 text

しかも! SPA ッテ ナニ?

Slide 32

Slide 32 text

表現の幅が増える loadingが速い ページ遷移が高速 SPA ッテ ナニ?

Slide 33

Slide 33 text

要は適材適所

Slide 34

Slide 34 text

コンテンツ重視なら MPA…?

Slide 35

Slide 35 text

ニュースサイト 教育コンテンツ ブログ etc…

Slide 36

Slide 36 text

ワクワクするUIなら SPA…?

Slide 37

Slide 37 text

チャットアプリ ストリーミングアプリ ゲーム etc..

Slide 38

Slide 38 text

ҧ͍͕Θ͔Δ ਓʹͳΖ͏

Slide 39

Slide 39 text

41"ͱ.1"ͷҧ͍͸ʁ ページ遷移はどう違う? SEOにはどっちが強い? 開発しやすいのはどっちだろう? 普段使っているサービスはどっちだろう?

Slide 40

Slide 40 text

余談(オフレコ)

Slide 41

Slide 41 text

CSRとSSR

Slide 42

Slide 42 text

C S R CSRとSSR

Slide 43

Slide 43 text

🙋

Slide 44

Slide 44 text

No Hints🙇 CSRとSSR

Slide 45

Slide 45 text

Client Side Rendering CSRとSSR

Slide 46

Slide 46 text

クライアント 側で レンダリングする CSRとSSR

Slide 47

Slide 47 text

Server Side Rendering CSRとSSR

Slide 48

Slide 48 text

サーバー 側で レンダリングする CSRとSSR

Slide 49

Slide 49 text

レンダリングする? CSRとSSR

Slide 50

Slide 50 text

レンダリングする HTMLファイル → DOMツリー CSSファイル → CSSOMツリー DOMツリー + CSSOMツリー = レンダリングツリー ブラウザがレンダリングツリーのなかの要素をレイアウトし描画する

Slide 51

Slide 51 text

レンダリングどこでする? CSRとSSR

Slide 52

Slide 52 text

クライアントでする!!! GOOD - クライアント側ならその分鯖の負荷が減る - 鯖はAPIやデータだけを管理するため責務が明確になる BAD - 古い端末でできなかったりする - SEOに不利

Slide 53

Slide 53 text

サーバーでする!!! GOOD - SEOに有利 - 古い端末やブラウザでも動作する BAD - サーバー負荷高い - 開発が複雑

Slide 54

Slide 54 text

ҧ͍͕Θ͔Δ ਓʹͳΖ͏ CSRとSSR

Slide 55

Slide 55 text

$43ͱ443ͷҧ͍͸ʁ レンダリングはどこで行う? SEOにはどっちが強い? 普段使っているサービスはどっちだろう?

Slide 56

Slide 56 text

ٳ ጥ

Slide 57

Slide 57 text

フレームワーク

Slide 58

Slide 58 text

フレームワーク 知ってる人🙋 ϑϩϯτΤϯυ

Slide 59

Slide 59 text

つーか フレームワークっ て 何?🤔

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

ゐ?

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

ゑ?

Slide 64

Slide 64 text

固い

Slide 65

Slide 65 text

プログラミング言 語 難しい

Slide 66

Slide 66 text

server.run() と書くだけで鯖が 動けばSoHappy

Slide 67

Slide 67 text

いろんな機能 提供してくれたら 素敵やん

Slide 68

Slide 68 text

それがフレームワー ク

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

主要なフレームワーク紹介

Slide 71

Slide 71 text

の前に...

Slide 72

Slide 72 text

UIフレームワーク - ウェブアプリケーションのUIを作成するためのもの - ルーティングや状態管理は別 WEBアプリケーションフレームワーク - ウェブアプリケーション全体を管理するためのもの - UIフレームワークを基礎として発展させたもの

Slide 73

Slide 73 text

UIフレームワーク

Slide 74

Slide 74 text

React 主要なフレームワーク

Slide 75

Slide 75 text

React 学びやすさ - コンセプトは簡単だが、高度な利用には深い理解が必須 コミュニティ - Meta社が開発・提供しており人気なフレームワーク パフォーマンス - 仮想DOMを用いてUIの変更を最適化している

Slide 76

Slide 76 text

Vue.js 主要なフレームワーク

Slide 77

Slide 77 text

Vue.js 学びやすさ - 基本的なWEBの知識があれば学びやすく、ドキュメントも豊富 コミュニティ - 人気のあるOSS。公式のルーターや状態管理ライブラリが魅力 パフォーマンス - Vueも仮想DOM。リアクティブデータバインディングも効率的

Slide 78

Slide 78 text

Svelte 主要なフレームワーク

Slide 79

Slide 79 text

Svelte 学びやすさ - 魔法と称されるほど簡単。丁寧なドキュメント コミュニティ - 急成長中のコミュニティ。コアメンバーはVercel社に勤務 パフォーマンス - コンパイラであるため仮想DOMを必要としないため、より高速

Slide 80

Slide 80 text

WEBアプリケーション フレームワーク

Slide 81

Slide 81 text

Next.js 主要なフレームワーク

Slide 82

Slide 82 text

Next.js 学びやすさ - ReactからNext.jsは非常にスムーズ。 コミュニティ - 大規模なコミュニティを有する。Vercelが開発している パフォーマンス - CSRとSSRを組み合わせて最適なパフォーマンスを提供できる

Slide 83

Slide 83 text

Nuxt.js 主要なフレームワーク

Slide 84

Slide 84 text

Nuxt.js 学びやすさ - Vueらしく直感的で学びやすい。バージョンの差異が激しい コミュニティ - 大きく活発なコミュニティが存在。東アジア圏で人気 パフォーマンス - 必要に応じてCSR、SSR、スタティック生成を選択できる

Slide 85

Slide 85 text

SvelteKit 主要なフレームワーク

Slide 86

Slide 86 text

SvelteKit 学びやすさ - シンプルで学びやすい コミュニティ - まだまだ小さいが勢いのあるコミュニティ。エコシステムに不安有 パフォーマンス - Svelteの特性を受け継いだままCSR、SSR、スタティック生成を実現

Slide 87

Slide 87 text

なぜ つかうの!?

Slide 88

Slide 88 text

いつ つかうの!?

Slide 89

Slide 89 text

どうやって つかうの!?

Slide 90

Slide 90 text

早速 使ってみたく なってきた?

Slide 91

Slide 91 text

མͪண͍ͯɺ ਂݺٵɻਂݺ ٵ

Slide 92

Slide 92 text

ࢲʹ΋ Θ͔Βͳ͍͜ ͱ͋ΔΜͰ͢

Slide 93

Slide 93 text

͔ͩΒ

Slide 94

Slide 94 text

ҧ͍͕Θ͔Δ ਓʹͳΖ͏ フレームワークについて

Slide 95

Slide 95 text

ϑϨʔϜϫʔΫʹ͍ͭͯ UIフレームワークとは? WEBアプリケーションフレームワークとは? 各フレームワークの強みは? 各フレームワークの弱みは?

Slide 96

Slide 96 text

余談(オフレコ)

Slide 97

Slide 97 text

コンポーネント指向について

Slide 98

Slide 98 text

コンポーネントとは...

Slide 99

Slide 99 text

コンポーネントとは...

Slide 100

Slide 100 text

コンポーネントとは...

Slide 101

Slide 101 text

コンポーネントとは...
{chatGPT icon}
{user icon}

Slide 102

Slide 102 text

コンポーネントとは...
{chatGPT icon}
{user icon}
なんか似てない?

Slide 103

Slide 103 text

コンポーネントとは...
{chatGPT icon}
{user icon}
共通化したい!

Slide 104

Slide 104 text

コンポーネントとは...
{XXX icon}

Slide 105

Slide 105 text

コンポーネントとは... 使い回したり 修正しやすい

Slide 106

Slide 106 text

コンポーネントとは...

Slide 107

Slide 107 text

コンポーネントとは...

Slide 108

Slide 108 text

コンポーネントとは... 再利用性・保守性に優れた設計思 想 現代フレームワークの基礎

Slide 109

Slide 109 text

コンポーネントとは... コンポーネントに着目し て WEBサイトを見てみよう

Slide 110

Slide 110 text

コンポーネントとは... Vercel blog Zenn

Slide 111

Slide 111 text

コンポーネントの構造

Slide 112

Slide 112 text

1SPQT

Slide 113

Slide 113 text

コンポーネント間で データを受け渡すための メカニズム 1SPQT

Slide 114

Slide 114 text

コンポーネントとは...
{XXX icon}

Slide 115

Slide 115 text

Declaring props • Svelte Examples Passing Props to a Component – React

Slide 116

Slide 116 text

4UBUF

Slide 117

Slide 117 text

コンポーネントが管理し その状態に応じて 表示や挙動が変わるデータ 4UBUF

Slide 118

Slide 118 text

Reactive declarations • Svelte Examples

Slide 119

Slide 119 text

HTMLは静的なもの 動的にするのは一苦労

Slide 120

Slide 120 text

HTMLとJSのみで表現 <3tle>Dynamic Number Change 増加 減少

0

Slide 121

Slide 121 text

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; });

Slide 122

Slide 122 text

フレームワークを使う場合 let count = 0; function increment() { count += 1; } function decrement() { count -= 1; } 増加 減少

Slide 123

Slide 123 text

-JGF$ZDMF

Slide 124

Slide 124 text

ྠ㕩సੜ -JGF$ZDMF 言い換えると

Slide 125

Slide 125 text

コンポーネントにも -JGF$ZDMF 生まれた時 死んだ時がある

Slide 126

Slide 126 text

そんな中でも 楽しく生きたい -JGF$ZDMF

Slide 127

Slide 127 text

コンポーネント同士にも 関係性がある -JGF$ZDMF

Slide 128

Slide 128 text

親子関係 import Nested from './Nested.svelte';

These styles...

p { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; } ίϯϙʔωϯτ͕ೖΕࢠʹͳ͍ͬͯΔ͜ ͱΛࢦ͢

Slide 129

Slide 129 text

親子関係 import Nested from './Nested.svelte';

These styles...

p { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; } ࣮ࡍʹ࢖༻͢Δ৔߹͸େ఍ɺ஋Λ౉͢ඞ ཁ͕͋Δ

Slide 130

Slide 130 text

親子関係 export let answer;

The answer is {answer}

ड͚औΔଆ͸͜Μͳײ͡ʢ4WFMUFʣ

Slide 131

Slide 131 text

ҧ͍͕Θ͔Δ ਓʹͳΖ͏ フレームワークについて

Slide 132

Slide 132 text

ίϯϙʔωϯτࢦ޲ʹ͍ͭͯ StateとPropsの違いは? コンポーネント指向ってなんだっけ?