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

1.

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

2.

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

3.

3 初心者です • Vueを使いはじめて早3週間。 • Linuxとオープンソース・ソフトウェアを使って働いているプロの自営業です。 • 香川高専の研究室が手がけているプロジェクトにUI改善の担当者として参加する事になり、そこでVueを使ってみました。 • 趣味は読書です

4.

4 • Vueを使いはじめて早3週間。 • Linuxとオープンソース・ソフトウェアを使って働いているプロの自営業です。 • 香川高専の研究室が手がけているプロジェクトにUI改善の担当者として参加する事になり、そこでVueを使ってみました。 • 趣味は読書です趣味は読書です https://jumpbookstore.com ※注これは個人の趣味についての話です。

5.


6.


7.


8.

8 やりたかったこと

9.

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

10.

10 やりたかったこと HTMLをたくさん書くのとても大変

11.

11 やりたかったことほう PHP抜き BootStrap4ですか・・・たいしたものですね

12.

12 やりたかったことこのへんを foreachしたい・・・ foreachとはこの foreach は、PHPで配列を反復処理するための便利な方法です。実在の人物、団体などとはいっさい関係ありません。

13.

13 やりたかったこと何とかならないの？ H T M L PHPおじさん

14.

14 !? Vueがあるわ、たぶんできるやろ

15.

15 !? Vue があるわ、たぶんできるやろ一般的な社会人が持つVueの印象 ※当社しらべ印象１：すごい！印象２：かんたん！印象３：かっこいい！

16.

16 検索BOXにforと書くだけでv-forがサジェストされる親切設計 !? Vue があるわ、たぶんできるやろ

17.

17 充実した日本語ドキュメント !? Vue があるわ、たぶんできるやろ

18.

18 v-forでできたわ !? Vue があるわ、たぶんできるやろ

19.

19 やりたかったことこのへんを foreachしたい・・・ foreachとはこの foreach は、PHPで配列を反復処理するための便利な方法です。実在の人物、団体などとはいっさい関係ありません。

20.

20 やったぜ!!!! !? Vue があるわ、たぶんできるやろ

21.

21 ・・・でも何度も同じHTMLを書くのめんどくさい !? Vue があるわ、たぶんできるやろ書くとはコピペすること。

22.

22 関数とかないの？たぶんできるやろ

23.

23 関数とかないの？たぶんできるやろ充実した日本語ドキュメント

24.

24 関数とかないの？たぶんできるやろコンポーネント化されたHTML。もう怖くない。「えっ？ BootStrapのカラム増やしてもいいのか？」「ああ、しっかり書け」コンポーネントを呼び出すとこ

25.

25 関数とかないの？たぶんできるやろやったぜ!!!!

26.

26 えっ全部まとめて？すごいじゃん！

27.

27 えっ全部まとめて？すごいじゃん！これが単一ファイルコンポーネントだ HTMLタグと JavaScriptとCSSを一つのファイルにまとめてコンポーネント化できるぞ ※意訳：覆面くん

28.

28 えっ全部まとめて？すごいじゃん！まずはサンプルコードを読むのだ

29.

29 えっ全部まとめて？すごいじゃん！おもむろにコンポーネントをファイル化するのだはぁはぁ... vueファイルをインポートするのだ

30.

30 えっ全部まとめて？すごいじゃん！ ??? 動かんやんけ!!

31.

31 なぜなのか？

32.

32 なぜなのか？ RTFM マニュアルは飛ばさず全部読みましょう

33.

33 なぜなのか？ RTFM マニュアルは飛ばさず全部読みましょう

34.

34 なぜなのか？ファッ!? Webpack !?

35.

35 なぜなのか？ファッ!? Browserify !?

36.

36 なぜなのか？ファッ!? What is Vue Loader !?

37.

37 なぜなのか？ https://potato4d.github.io/huniki_generator/?text=JavaScript ※URLに注意してクリックしてみよう

38.

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

39.

39 単一コンポーネントは動かないなぜなら我々は、フロントエンドカジュアル勢の安全生息圏で働いているのだから。ファイル

40.

40 何とかならないの？この辺に書いて読み込めないの？

41.

41 エピローグ -まとめ- マニュアルを飛ばさずに読んで。ご了承ください。

42.

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

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

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

Want more?

Transcript