単一ファイルコンポーネントは動かない

2019/07/26開催
https://vuejs-osaka.connpass.com/event/136805/
VueJS Osaka #2 で発表した内容の公開版です。

Transcript

1. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   ●なぜなのか？
   ●エピローグ
   ゆかいなフロントエンド劇場
   単一 コンポーネントは動かない
   もしくは、
   フロントエンド カジュアル勢の安全生息圏について
   何とかならないの？
   Vueをはじめて3週間、Linuxひとすじ300年の人の日記より抜粋
   #VueJSOsaka 2019年7月26日
   ファイル
   

   View Slide

2. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   なぜなのか？
   エピローグ
   2019年7月26日
   #VueJSOsaka
   2
   今日のお話
   ・初心者です・
   ・やりたかったこと・
   ・Vueがあるわ、たぶんできるやろ・
   ・関数とかないの？たぶんできるやろ・
   ・えっ全部まとめて？ すごいじゃん！・
   ・なぜなのか・
   ・エピローグ・
   

   View Slide

3. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   なぜなのか？
   エピローグ
   2019年7月26日
   #VueJSOsaka
   3
   初心者です
   ● Vueを使いはじめて早3週間。
   ● Linuxとオープンソース・ソフトウェアを
   使って働いているプロの自営業です。
   ● 香川高専の研究室が手がけているプロジェクトにUI改善の担
   当者として参加する事になり、そこでVueを使ってみまし
   た。
   ● 趣味は読書です
   

   View Slide

4. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   なぜなのか？
   エピローグ
   2019年7月26日
   #VueJSOsaka
   4
   ● Vueを使いはじめて早3週間。
   ● Linuxとオープンソース・ソフトウェアを
   使って働いているプロの自営業です。
   ● 香川高専の研究室が手がけているプロジェクトにUI改善の担
   当者として参加する事になり、そこでVueを使ってみまし
   た。
   ● 趣味は読書です
   趣味は読書です
   https://jumpbookstore.com
   ※注
   これは個人の趣味
   についての話です。
   

   View Slide

5. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   なぜなのか？
   エピローグ
   2019年7月26日
   #VueJSOsaka
   5
   ● Vueを使いはじめて早3週間。
   ● Linuxとオープンソース・ソフトウェアを
   使って働いているプロの自営業です。
   ● 香川高専の研究室が手がけているプロジェクトにUI改善の担
   当者として参加する事になり、そこでVueを使ってみまし
   た。
   ● 趣味は読書です
   趣味は読書です
   https://jumpbookstore.com
   ※注
   これは個人の趣味
   についての話です。
   

   View Slide

6. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   なぜなのか？
   エピローグ
   2019年7月26日
   #VueJSOsaka
   6
   ● Vueを使いはじめて早3週間。
   ● Linuxとオープンソース・ソフトウェアを
   使って働いているプロの自営業です。
   ● 香川高専の研究室が手がけているプロジェクトにUI改善の担
   当者として参加する事になり、そこでVueを使ってみまし
   た。
   ● 趣味は読書です
   趣味は読書です
   https://jumpbookstore.com
   ※注
   これは個人の趣味
   についての話です。
   

   View Slide

7. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   なぜなのか？
   エピローグ
   2019年7月26日
   #VueJSOsaka
   7
   ● Vueを使いはじめて早3週間。
   ● Linuxとオープンソース・ソフトウェアを
   使って働いているプロの自営業です。
   ● 香川高専の研究室が手がけているプロジェクトにUI改善の担
   当者として参加する事になり、そこでVueを使ってみまし
   た。
   ● 趣味は読書です
   趣味は読書です
   https://jumpbookstore.com
   ※注
   これは個人の趣味
   についての話です。
   

   View Slide

8. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   なぜなのか？
   エピローグ
   2019年7月26日
   #VueJSOsaka
   8
   やりたかったこと
   

   View Slide

9. 初心者です
   やりたかったこと
   vueがあるわ、たぶんできるやろ
   関数とかないの？たぶんできるやろ
   えっ全部まとめて？ すごいじゃん！
   ●なぜなのか？
   ●エピローグ
   2019年7月26日
   #VueJSOsaka
   9
   やりたかったこと
   HTMLをたくさん書くの
   とても大変
   

   View Slide

10. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    10
    やりたかったこと
    HTMLをたくさん書くの
    とても大変
    

    View Slide

11. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    11
    やりたかったこと
    ほう
    PHP抜き
    BootStrap4ですか・・・
    たいしたものですね
    

    View Slide

12. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    12
    やりたかったこと
    このへんを
    foreachしたい・・・
    foreachとは
    この foreach は、PHPで配列を反復処理す
    るための便利な方法です。
    実在の人物、団体などとはいっさい関係あ
    りません。
    

    View Slide

13. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    13
    やりたかったこと
    何とかならないの？
    H
    T
    M
    L
    PHPおじさん
    

    View Slide

14. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    なぜなのか？
    エピローグ
    2019年7月26日
    #VueJSOsaka
    14
    !? Vueがあるわ、たぶんできるやろ
    

    View Slide

15. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    15
    !? Vue があるわ、
    たぶんできるやろ
    一般的な社会人が持つVueの印象
    ※当社しらべ
    印象１：
    すごい！ 印象２：
    かんたん！ 印象３：
    かっこいい！
    

    View Slide

16. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    16
    検索BOXにforと書くだけでv-forがサジェストされる親切設計
    !? Vue があるわ、
    たぶんできるやろ
    

    View Slide

17. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    17
    充実した日本語ドキュメント
    !? Vue があるわ、
    たぶんできるやろ
    

    View Slide

18. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    18
    v-forでできたわ
    !? Vue があるわ、
    たぶんできるやろ
    

    View Slide

19. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    19
    やりたかったこと
    このへんを
    foreachしたい・・・
    foreachとは
    この foreach は、PHPで配列を反復処理す
    るための便利な方法です。
    実在の人物、団体などとはいっさい関係あ
    りません。
    

    View Slide

20. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    20
    やったぜ!!!!
    !? Vue があるわ、
    たぶんできるやろ
    

    View Slide

21. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    21
    ・・・
    でも何度も同じHTMLを書くの
    めんどくさい
    !? Vue があるわ、
    たぶんできるやろ
    書く とは
    コピペすること。
    

    View Slide

22. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    なぜなのか？
    エピローグ
    2019年7月26日
    #VueJSOsaka
    22
    関数とかないの？ たぶんできるやろ
    

    View Slide

23. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    23
    関数とかないの？
    たぶんできるやろ
    充実した日本語ドキュメント
    

    View Slide

24. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    24
    関数とかないの？
    たぶんできるやろ
    コンポーネント化されたHTML。
    もう怖くない。
    「えっ？ BootStrapのカラム増やしてもいいのか？」
    「ああ、しっかり書け」
    コンポーネントを呼び出すとこ
    

    View Slide

25. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    25
    関数とかないの？
    たぶんできるやろ
    やったぜ!!!!
    

    View Slide

26. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    なぜなのか？
    エピローグ
    2019年7月26日
    #VueJSOsaka
    26
    えっ全部まとめて？ すごいじゃん！
    

    View Slide

27. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    27
    えっ全部まとめて？
    すごいじゃん！
    これが
    単一ファイル
    コンポーネントだ
    HTMLタグと
    JavaScriptとCSSを
    一つのファイルにまとめて
    コンポーネント化できるぞ
    ※意訳：覆面くん
    

    View Slide

28. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    28
    えっ全部まとめて？
    すごいじゃん！
    まずは
    サンプルコードを読むのだ
    

    View Slide

29. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    29
    えっ全部まとめて？
    すごいじゃん！
    おもむろに
    コンポーネントを
    ファイル化するのだ
    はぁはぁ...
    vueファイルを
    インポートするのだ
    

    View Slide

30. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    30
    えっ全部まとめて？
    すごいじゃん！
    ???
    動かんやんけ!!
    

    View Slide

31. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    なぜなのか？
    エピローグ
    2019年7月26日
    #VueJSOsaka
    31
    なぜなのか？
    

    View Slide

32. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    32
    なぜなのか？
    RTFM
    マニュアルは
    飛ばさず全部 読みましょう
    

    View Slide

33. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    33
    なぜなのか？
    RTFM
    マニュアルは
    飛ばさず全部 読みましょう
    

    View Slide

34. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    34
    なぜなのか？
    ファッ!?
    Webpack !?
    

    View Slide

35. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    35
    なぜなのか？
    ファッ!?
    Browserify !?
    

    View Slide

36. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    36
    なぜなのか？
    ファッ!?
    What is
    Vue Loader !?
    

    View Slide

37. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    37
    なぜなのか？
    https://potato4d.github.io/huniki_generator/?text=JavaScript
    ※URLに注意してクリックしてみよう
    

    View Slide

38. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    なぜなのか？
    エピローグ
    2019年7月26日
    #VueJSOsaka
    38
    単一 コンポーネントは動かない
    ファイル
    

    View Slide

39. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    なぜなのか？
    エピローグ
    2019年7月26日
    #VueJSOsaka
    39
    単一 コンポーネントは動かない
    なぜなら我々は、
    フロントエンド カジュアル勢の安全生息圏で働いているのだから。
    ファイル
    

    View Slide

40. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    2019年7月26日
    #VueJSOsaka
    40
    何とかならないの？
    この辺に書いて読み込めないの？
    

    View Slide

41. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    なぜなのか？
    エピローグ
    2019年7月26日
    #VueJSOsaka
    41
    エピローグ
    -まとめ-
    マニュアルを飛ばさずに読んで。
    ご了承ください。
    

    View Slide

42. 初心者です
    やりたかったこと
    vueがあるわ、たぶんできるやろ
    関数とかないの？たぶんできるやろ
    えっ全部まとめて？ すごいじゃん！
    ●なぜなのか？
    ●エピローグ
    ご清聴ありがとうございました
    追伸
    Nuxt.js を学びましょう
    #VueJSOsaka 2019年7月26日
    

    View Slide