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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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