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

Transcript

1. Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯݚڀॴ
 ୅දཧࣄɹࡗݪণ඙ ୤ʮͳΜͪΌͬͯʯϑϩϯτΤϯυ
3. ࣗݾ঺հ ࡗݪণ඙ Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ
 ݚڀॴ
   ୅දཧࣄ Ұൠࣾஂ๏ਓΤϦΞɾ
 ΠϊϕʔγϣϯɾΞϥΠΞϯε
   $50 *POJD
   +BQBO
   ୅ද
 *POJDίΞίϯτϦϏϡʔλʔ
4. <1SPEVDU>
   "SFB*OOPWBUJPO3FWJFX
5. <1SPEVDU>
   UJQTZT
6. $POUSJCVUF ionic-team/ionic ionic-team/starters ionic-team/ionic-cli
7. ։ൃαϙʔταʔϏε
8. ϑϩϯτΤϯυͱ͸ Ϣʔβͷग़ೖྗΠϯλʔϑΣΠεͷ͢΂ͯ マークアップ UI Design プログラミング
9. ੩తαΠτ マークアップ
10. ಈతαΠτ 出力結果 動的プログラミング言語
11. 1)1ͷಛ௃ の中に を書くための言語 <php foreach($array as $string){
 ?> <li class=‘list-style-apply’><?php echo $string;?></li> <?php } ?>
 <p>ここにもHTML書けちゃう！</p>
12. ͪΌΜͱϑϩϯτΤϯυΛΈΑ͏
13. 8FCͷτϨϯυ ੩తαΠτ 4JOHMF
    1BHF
    "QQMJDBUJPO
    41"
     3&45
    "1*(SBQI2-ʹΑΔόοΫΤ ϯυͱϑϩϯτΤϯυͷϒϦοδ
     +BWB4DSJQUʹΑΔϦονͳ6* 1SPHSFTTJWF
    8FC
    "QQT
    18"
    
    41"
    
    8FC
    "1* ಈతαΠτ ΑΓΑ͍69Λ໨ࢦ͢
14. 41"18"ʹ͓͚Δ1)1ͷ໾ׂ フロントエンド 動的プログラミング言語 API
15. 
    41"ͰγʔϜϨεͳϢʔβମݧΛɻ
16. 41"ͰγʔϜϨεͳϢʔβମݧΛɻ index.html 4JOHMF
    1BHF
    "QQMJDBUJPO
17. 
    41"ͰγʔϜϨεͳϢʔβମݧΛɻ
18. 
    41"ͰγʔϜϨεͳϢʔβମݧΛɻ  ৗʹߴ଎Ͱ҆ఆͨ͠ύϑΥʔϚϯε
 ॳظϩʔυͰTIFMMͷϩʔυ͸׬ྃʗϖʔδ ભҠͷߴ଎Խʗ-B[Z
    -PBEJOH
     ωΠςΟϒ
    ΞϓϦͷΑ͏ͳૢ࡞ੑ
 ʢ1SPHSFTTJWF
    8FC
    "QQTͰޙड़ʣ
     σʔλͷޮ཰తͳ࢖༻
 ࠶ϩʔυΛߦΘͳ͍ʗ+40/ϑΝΠϧ ʢ3&45
    "1*ʣͷޮ཰తར༻ \n^
19. 
    41"ͰγʔϜϨεͳϢʔβମݧΛɻ ͜Εͷ௨৴ίετ
20. 
    41"ͰγʔϜϨεͳϢʔβମݧΛɻ 2435文字
21. 
    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文字
22. 
    41"ͰγʔϜϨεͳϢʔβମݧΛɻ
23. 
    41"ͰγʔϜϨεͳϢʔβମݧΛɻ
24. 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
25. 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏  ΦϑϥΠϯදࣔ
     #BDLHSPVOE
    4ZOD
     1VTI௨஌
     ϗʔϜը໘ʹ௥Ճ
     (14΍ΧϝϥͳͲͷ
 /BUJWFػೳ΁ͷΞΫηε
26. ΦϑϥΠϯදࣔʢΩϟογϡදࣔʣ
    w ࣗ୐ͰνΣοΫ͓ͯ͠ؾʹೖΓʹೖΕ͓ͨ ళ৘ใΛग़ઌͰݟ௚͢
    w ిंͷதͰϒϥ΢βόοΫͨ͠ॠؒʹτϯ ωϧʹೖͬͨ
    w ʰΠϯλʔωοτ઀ଓ͕͋Γ·ͤΜʱ͸ 8FCͰ͸࢓ํͳ͍ʁ
    σϞ
 IUUQTBJSBSFBJBKQ 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
27. #BDLHSPVOE
    4ZOD
    ΦϑϥΠϯ࣌ʹૹ৴ͨ͠σʔλΛ࣋ͪଓ ͚ɺΦϯϥΠϯʹ෮ؼͨ࣌͠ʹࣗಈతʹ ૹ৴͢Δػೳ 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
28. 1VTI௨஌
    ࢈ܦ৽ฉΛ͸͡Ίͱͯ͠ଟ͘ͷେखϝσΟ Ξ΍'BDFCPPL5XJUUFSͳͲ͕͢Ͱʹ࣮ ૷ɻϒϥ΢βͰ1VTI௨஌͕ૹΕ·͢ɻ
    ϗʔϜը໘ʹ௥Ճ
 ΞϓϦͱಉ༷ʹϗʔϜʹΞΠίϯΛ഑ஔ Ͱ͖ΔɻωΠςΟϒΞϓϦͬΆ͘ىಈɻ
    (14΍ΧϝϥͳͲͷ
 εϚϗػೳ΁ͷΞΫηε 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
29. 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏ RAIL モデル 100ms 60FPS 1000ms 活用
30. 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏ https://developers.google.com/web/fundamentals/performance/rail?hl=ja
31. 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
32. 
    18"Ͱ8&#ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
33. 
    Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ
34. 
    Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ )5.-
 $
    +BWB
    "QBDIF
    'PVOEBUJPO
35. )5.-
 $
    +BWB
    4XJGU
    ,PUMJO
    *POJD
    UFBN
    /BUJWF
    1SPHSFTTJWF
    8FC
    "QQT 
    Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ
36. 
    Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ /BUJWF
    6*
    4IFMMʢ/BUJWFͱ8FC
    7JFXͷ༥߹ʣ
    .JYJOH
    /BUJWF
    6*
    BOE
    8FC
    X
    B
    DSPTT
    QMBUGPSN
    6*
37. 
    Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ https://vimeo.com/55486684
38. 
    Ϣʔβ͸·ͩϓϥοτϑΥʔϜΛબ΂ͳ͍ͷʁ 888
39. 
    Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ΋༏͘͠
40. 
    Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ΋༏͘͠  .PEFMͰσʔλΛ੔ܗͯ͠
     ৔߹ʹΑͬͯ͸$PUSPMMFSͰ ͦΕΛల։ɾ࠶੔ܗͯ͠
     7JFXͰల։͢Δ 7JFXͷϨϯμϦϯά͸ॏ͍ɻ
41. 
    Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ΋༏͘͠ EC2��コスト1 （t2 small1台） RDS��コスト3 (t2 small 1台/ medium 1台）
 ���������※ チューニング前はコスト8
42. 
    ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά
43. 
    ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά
44. 
    ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά ͸ʁ
45. 
    ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά
46. 
    ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά ͸ʁ
47. 
    ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά
48. フロントエンド 動的プログラミング言語 HTTPレスポンス 
    ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά
49. 
    "1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ܎
50. 
    "1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ܎ "1*ʹΑΓɺ
    ίϯςϯπͱ6*Λ
    ૄ݁߹ͳؔ܎ʹɻ \n^ https://speakerdeck.com/hideokamoto/javascriptdehazimeru-multi-ui-application
51. 
    "1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ܎ ユーザ、コメント管理 記事の既読管理 カテゴリへのアイキャッチ画像 記事と画像 閲覧
52. 
    "1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ܎ 期間の記事を取得して
 文字列でメルマガ自動生成 記事と画像 メルマガ配信
53. 
    41"18"ʹ͓͚Δޡղ
54.  ىಈ஗͍ΜͰ͠ΐʁ
     (PPHMFݕࡧͰͪΌΜͱಡΈࠐΜͰ͘Εͳ͍ͷͰ͸
     0(1λάͱ͔ͪΌΜͱಈ͔ͳ͍ΜͰ͠ΐʁ 
    18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
55. w 4&-&$5଎͍
    w ෳ਺$16Λ༻͍ͯΫΤϦ࣮ߦ͢ΔʮύϥϨϧΫΤϦʯʢતʣ
    w 1PTU(*4Λ࢖ͬͯ஍ਤσʔλΛѻ͑Δʢۭؒσʔλѻ͑Δ
    w ܕ͕ݫ֨ͳͷͰൺֱ͕ࣜॻ͖΍͍͢
    w ϒϩοΩϯάॲཧ͕ݰਓࢦ޲
 
    18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
56. 
    18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
57. 
    18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
58. 
    18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
59. ͜Ε͔Βͷ1)1 で フロントエンドを描画するのが ΞϯνύλʔϯʹͳΔ೔͸͙ͦͩ͢͜ɻ
60. /&95
    45&1
    ϑϩϯτΤϯυΛֶ΅͏
61. 1)1Ͱ3&45
    "1*ͭ͘Δͷ͸؆୯ <php
 header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST, DELETE, OPTIONS');
 if ($_SERVER['REQUEST_METHOD'] == ‘OPTIONS') exit(); 
 http_response_code(200) ����echo json_encode($array);
 return;  ܕ΋͋Δʢ1)1ʙʣ
     4FSWFSMFTT
    'SBNFXPSL΋1)1ରԠʢBSBJOFTTFSWFSMFTTQIQʣ
     ԿΑΓॻ͖׳ΕͯΔʂ
62. ϑϩϯτΤϯυΛ͸͡ΊΔ͓͢͢Ίύοέʔδ &4Y 8FC1BDL 4$44 443 QSFSFOEFS 5ZQF4DSJQU 3FBDU "OHVMBS 7VFKT -B[Z-PBE $BQBDJUPS $PSEPWB "QQ
 .BOJGFTU 'MBU
 %FTJHO .BUFSJBM
 %FTJHO
63. ϑϩϯτΤϯυΛ͸͡ΊΔ͓͢͢Ίύοέʔδ &4Y 8FC1BDL 4$44 443 QSFSFOEFS 3FBDU "OHVMBS 7VFKT -B[Z-PBE $BQBDJUPS $PSEPWB "QQ
 .BOJGFTU 'MBU
 %FTJHO .BUFSJBM
 %FTJHO 5ZQF4DSJQU
64. ϑϩϯτΤϯυΛ͸͡ΊΔ͓͢͢Ίύοέʔδ $-* %FTJHO 4VQQPSU 18"$PSEPWB$BQBDJUPSϑϧαϙʔτͷ
 +BWB4DSJQU
    6*
    'SBNFXPSLʢશ෦ࡌͤʣ
65. *POJD੡ϓϩμΫτ
66. *POJD੡ϓϩμΫτ
67. *POJD੡ϓϩμΫτ
68. *POJD੡ϓϩμΫτ
69. ॻ੶ʮ*POJDͰ࡞Δ
    ϞόΠϧΞϓϦ੍࡞ೖ໳ʯ IUUQTBN[OUP[I$QQ[
70. 8FCσβΠφʔ͕೔ͰεϚϗΞϓϦΛެ։
71. ͡Ό͋ɺ8PSE1SFTT͸Ͳ͏ͳͷ͞ʢ೥ʣ
72. ͡Ό͋ɺ8PSE1SFTT͸Ͳ͏ͳͷ͞ʢ೥ʣ
73. όοΫΤϯυݴޠ
    Ͱ
    ϑϩϯτΤϯυ
    Λॻ͘ͷ͸
    ΍ΊΑ͏ɻ ݁࿦