$30 off During Our Annual Pro Sale. View Details »

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

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

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

覆面くん Deprecated

July 26, 2019
Tweet

More Decks by 覆面くん Deprecated

Other Decks in Technology

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の印象
    ※当社しらべ
    印象1:
    すごい! 印象2:
    かんたん! 印象3:
    かっこいい!

    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