脱なんちゃってフロントエンド/frontend_to_properly

Slide 1

Slide 1 text

Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯݚڀॴ  ୅දཧࣄɹࡗݪণ඙ ୤ʮͳΜͪΌͬͯʯϑϩϯτΤϯυ

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

ࣗݾ঺հ ࡗݪণ඙ Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ  ݚڀॴ୅දཧࣄ Ұൠࣾஂ๏ਓΤϦΞɾ  ΠϊϕʔγϣϯɾΞϥΠΞϯε$50 *POJD+BQBO୅ද  *POJDίΞίϯτϦϏϡʔλʔ

Slide 4

Slide 4 text

<1SPEVDU>"SFB*OOPWBUJPO3FWJFX

Slide 5

Slide 5 text

<1SPEVDU>UJQTZT

Slide 6

Slide 6 text

$POUSJCVUF ionic-team/ionic ionic-team/starters ionic-team/ionic-cli

Slide 7

Slide 7 text

։ൃαϙʔταʔϏε

Slide 8

Slide 8 text

ϑϩϯτΤϯυͱ͸ Ϣʔβͷग़ೖྗΠϯλʔϑΣΠεͷ͢΂ͯ マークアップ UI Design プログラミング

Slide 9

Slide 9 text

੩తαΠτ マークアップ

Slide 10

Slide 10 text

ಈతαΠτ 出力結果動的プログラミング言語

Slide 11

Slide 11 text

1)1ͷಛ௃ の中にを書くための言語

ここにもHTML書けちゃう！

Slide 12

Slide 12 text

ͪΌΜͱϑϩϯτΤϯυΛΈΑ͏

Slide 13

Slide 13 text

8FCͷτϨϯυ ੩తαΠτ 4JOHMF1BHF"QQMJDBUJPO 41" 3&45"1*(SBQI2-ʹΑΔόοΫΤ ϯυͱϑϩϯτΤϯυͷϒϦοδ +BWB4DSJQUʹΑΔϦονͳ6* 1SPHSFTTJWF8FC"QQT 18" 41"8FC"1* ಈతαΠτ ΑΓΑ͍69Λ໨ࢦ͢

Slide 14

Slide 14 text

41"18"ʹ͓͚Δ1)1ͷ໾ׂ フロントエンド動的プログラミング言語 API

Slide 15

Slide 15 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ

Slide 16

Slide 16 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ index.html 4JOHMF1BHF"QQMJDBUJPO

Slide 17

Slide 17 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ

Slide 18

Slide 18 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ ৗʹߴ଎Ͱ҆ఆͨ͠ύϑΥʔϚϯε  ॳظϩʔυͰTIFMMͷϩʔυ͸׬ྃʗϖʔδ ભҠͷߴ଎Խʗ-B[Z-PBEJOH ωΠςΟϒΞϓϦͷΑ͏ͳૢ࡞ੑ  ʢ1SPHSFTTJWF8FC"QQTͰޙड़ʣ σʔλͷޮ཰తͳ࢖༻  ࠶ϩʔυΛߦΘͳ͍ʗ+40/ϑΝΠϧ ʢ3&45"1*ʣͷޮ཰తར༻ \n^

Slide 19

Slide 19 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ ͜Εͷ௨৴ίετ

Slide 20

Slide 20 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ 2435文字

Slide 21

Slide 21 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ [{ "name": "tipsys", "desc": "国内で唯一の女友だちをつくる女性専用ソーシャルサービス。PWA・iOS・Androidアプリで配信中。ユーザ数1万人を突破しました！", "image": "assets/images/tipsys.svg", "miniImage": "assets/images/tipsys.svg", "url": "https://tipsys.me" }, { "name": "Ionic-WP.com", "desc": "アプリ制作に興味をもつWeb制作者のためのパッケージをオープンソースで公開。WordPressとIonicで簡単にアプリをつくることができます。", "image": "assets/images/wppocket@120.png", "miniImage": "assets/images/wppocket@60.png", "url": "https://ionic-wp.com" }, { "name": "執筆・出版", "desc": "技術書籍の執筆を行っております。「Ionicで作るモバイルアプリ制作入門」「PHPフレームワークCodeIgniter3 超入門」好評発売中！", "image": "assets/images/gitbook@120.png", "miniImage": "assets/images/gitbook@60.png", "url": "https://amzn.to/2HOhiy1" }] 716文字

Slide 22

Slide 22 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ

Slide 23

Slide 23 text

41"ͰγʔϜϨεͳϢʔβମݧΛɻ

Slide 24

Slide 24 text

18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏

Slide 25

Slide 25 text

18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏ ΦϑϥΠϯදࣔ #BDLHSPVOE4ZOD 1VTI௨஌ ϗʔϜը໘ʹ௥Ճ (14΍ΧϝϥͳͲͷ  /BUJWFػೳ΁ͷΞΫηε

Slide 26

Slide 26 text

ΦϑϥΠϯදࣔʢΩϟογϡදࣔʣ w ࣗ୐ͰνΣοΫ͓ͯ͠ؾʹೖΓʹೖΕ͓ͨ ళ৘ใΛग़ઌͰݟ௚͢ w ిंͷதͰϒϥ΢βόοΫͨ͠ॠؒʹτϯ ωϧʹೖͬͨ w ʰΠϯλʔωοτ઀ଓ͕͋Γ·ͤΜʱ͸ 8FCͰ͸࢓ํͳ͍ʁ σϞ  IUUQTBJSBSFBJBKQ 18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏

Slide 27

Slide 27 text

#BDLHSPVOE4ZOD ΦϑϥΠϯ࣌ʹૹ৴ͨ͠σʔλΛ࣋ͪଓ ͚ɺΦϯϥΠϯʹ෮ؼͨ࣌͠ʹࣗಈతʹ ૹ৴͢Δػೳ 18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏

Slide 28

Slide 28 text

1VTI௨஌ ࢈ܦ৽ฉΛ͸͡Ίͱͯ͠ଟ͘ͷେखϝσΟ Ξ΍'BDFCPPL5XJUUFSͳͲ͕͢Ͱʹ࣮ ૷ɻϒϥ΢βͰ1VTI௨஌͕ૹΕ·͢ɻ ϗʔϜը໘ʹ௥Ճ  ΞϓϦͱಉ༷ʹϗʔϜʹΞΠίϯΛ഑ஔ Ͱ͖ΔɻωΠςΟϒΞϓϦͬΆ͘ىಈɻ (14΍ΧϝϥͳͲͷ  εϚϗػೳ΁ͷΞΫηε 18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏

Slide 29

Slide 29 text

18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏ RAIL モデル 100ms 60FPS 1000ms 活用

Slide 30

Slide 30 text

18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏ https://developers.google.com/web/fundamentals/performance/rail?hl=ja

Slide 31

Slide 31 text

18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏

Slide 32

Slide 32 text

18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏

Slide 33

Slide 33 text

Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ

Slide 34

Slide 34 text

Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ )5.-  $ +BWB "QBDIF'PVOEBUJPO

Slide 35

Slide 35 text

)5.-  $ +BWB 4XJGU ,PUMJO *POJDUFBN /BUJWF1SPHSFTTJWF8FC"QQT Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ

Slide 36

Slide 36 text

Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ /BUJWF6*4IFMMʢ/BUJWFͱ8FC7JFXͷ༥߹ʣ .JYJOH/BUJWF6*BOE8FCXBDSPTTQMBUGPSN6*

Slide 37

Slide 37 text

Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ https://vimeo.com/55486684

Slide 38

Slide 38 text

Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ 888

Slide 39

Slide 39 text

Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ΋༏͘͠

Slide 40

Slide 40 text

Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ΋༏͘͠ .PEFMͰσʔλΛ੔ܗͯ͠ ৔߹ʹΑͬͯ͸$PUSPMMFSͰ ͦΕΛల։ɾ࠶੔ܗͯ͠ 7JFXͰల։͢Δ 7JFXͷϨϯμϦϯά͸ॏ͍ɻ

Slide 41

Slide 41 text

Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ΋༏͘͠ EC2��コスト1 （t2 small1台） RDS��コスト3 (t2 small 1台/ medium 1台）  ��※ チューニング前はコスト8

Slide 42

Slide 42 text

ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά

Slide 43

Slide 43 text

ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά

Slide 44

Slide 44 text

ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά ͸ʁ

Slide 45

Slide 45 text

ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά

Slide 46

Slide 46 text

ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά ͸ʁ

Slide 47

Slide 47 text

ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά

Slide 48

Slide 48 text

フロントエンド動的プログラミング言語 HTTPレスポンス ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά

Slide 49

Slide 49 text

"1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ܎

Slide 50

Slide 50 text

"1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ܎ "1*ʹΑΓɺ ίϯςϯπͱ6*Λ ૄ݁߹ͳؔ܎ʹɻ \n^ https://speakerdeck.com/hideokamoto/javascriptdehazimeru-multi-ui-application

Slide 51

Slide 51 text

"1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ܎ ユーザ、コメント管理記事の既読管理カテゴリへのアイキャッチ画像記事と画像閲覧

Slide 52

Slide 52 text

"1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ܎ 期間の記事を取得して  文字列でメルマガ自動生成記事と画像メルマガ配信

Slide 53

Slide 53 text

41"18"ʹ͓͚Δޡղ

Slide 54

Slide 54 text

ىಈ஗͍ΜͰ͠ΐʁ (PPHMFݕࡧͰͪΌΜͱಡΈࠐΜͰ͘Εͳ͍ͷͰ͸ 0(1λάͱ͔ͪΌΜͱಈ͔ͳ͍ΜͰ͠ΐʁ 18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ

Slide 55

Slide 55 text

w 4&-&$5଎͍ w ෳ਺$16Λ༻͍ͯΫΤϦ࣮ߦ͢ΔʮύϥϨϧΫΤϦʯʢતʣ w 1PTU(*4Λ࢖ͬͯ஍ਤσʔλΛѻ͑Δʢۭؒσʔλѻ͑Δ w ܕ͕ݫ֨ͳͷͰൺֱ͕ࣜॻ͖΍͍͢ w ϒϩοΩϯάॲཧ͕ݰਓࢦ޲  18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ

Slide 56

Slide 56 text

18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ

Slide 57

Slide 57 text

18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ

Slide 58

Slide 58 text

18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ

Slide 59

Slide 59 text

͜Ε͔Βͷ1)1 でフロントエンドを描画するのが ΞϯνύλʔϯʹͳΔ೔͸͙ͦͩ͢͜ɻ

Slide 60

Slide 60 text

/&9545&1ϑϩϯτΤϯυΛֶ΅͏

Slide 61

Slide 61 text

1)1Ͱ3&45"1*ͭ͘Δͷ͸؆୯

Slide 62

Slide 62 text

ϑϩϯτΤϯυΛ͸͡ΊΔ͓͢͢Ίύοέʔδ &4Y 8FC1BDL 4$44 443 QSFSFOEFS 5ZQF4DSJQU 3FBDU "OHVMBS 7VFKT -B[Z-PBE $BQBDJUPS $PSEPWB "QQ  .BOJGFTU 'MBU  %FTJHO .BUFSJBM  %FTJHO

Slide 63

Slide 63 text

ϑϩϯτΤϯυΛ͸͡ΊΔ͓͢͢Ίύοέʔδ &4Y 8FC1BDL 4$44 443 QSFSFOEFS 3FBDU "OHVMBS 7VFKT -B[Z-PBE $BQBDJUPS $PSEPWB "QQ  .BOJGFTU 'MBU  %FTJHO .BUFSJBM  %FTJHO 5ZQF4DSJQU

Slide 64

Slide 64 text

ϑϩϯτΤϯυΛ͸͡ΊΔ͓͢͢Ίύοέʔδ $-* %FTJHO 4VQQPSU 18"$PSEPWB$BQBDJUPSϑϧαϙʔτͷ  +BWB4DSJQU6*'SBNFXPSLʢશ෦ࡌͤʣ

Slide 65

Slide 65 text

*POJD੡ϓϩμΫτ

Slide 66

Slide 66 text

*POJD੡ϓϩμΫτ

Slide 67

Slide 67 text

*POJD੡ϓϩμΫτ

Slide 68

Slide 68 text

*POJD੡ϓϩμΫτ

Slide 69

Slide 69 text

ॻ੶ʮ*POJDͰ࡞ΔϞόΠϧΞϓϦ੍࡞ೖ໳ʯ IUUQTBN[OUP[I$QQ[

Slide 70

Slide 70 text

8FCσβΠφʔ͕೔ͰεϚϗΞϓϦΛެ։

Slide 71

Slide 71 text

͡Ό͋ɺ8PSE1SFTT͸Ͳ͏ͳͷ͞ʢ೥ʣ

Slide 72

Slide 72 text

͡Ό͋ɺ8PSE1SFTT͸Ͳ͏ͳͷ͞ʢ೥ʣ

Slide 73

Slide 73 text

όοΫΤϯυݴޠͰ ϑϩϯτΤϯυΛॻ͘ͷ͸΍ΊΑ͏ɻ ݁࿦

Slide 74

Slide 74 text

No content