Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
単一ファイルコンポーネントは動かない
Search
覆面くん Deprecated
July 26, 2019
Technology
0
220
単一ファイルコンポーネントは動かない
2019/07/26開催
https://vuejs-osaka.connpass.com/event/136805/
VueJS Osaka #2 で発表した内容の公開版です。
覆面くん Deprecated
July 26, 2019
Tweet
Share
More Decks by 覆面くん Deprecated
See All by 覆面くん Deprecated
第一回 KYOTO.git タイムテーブル
mrexcluded
0
52
第一回 KYOTO.git 未完LT
mrexcluded
0
50
WordPressのローカルステージング環境を作ってみたお話です
mrexcluded
0
170
AWS、ロイヤリティー無用のゲームエンジン現るの巻
mrexcluded
0
130
WPたのしい舞台裏列伝 さらばWo(以下略)
mrexcluded
1
530
中学生を連れて開発合宿に行ってみた件につきまして
mrexcluded
0
140
WPたのしい 実演プラグイン Debug Bar と Health Check 編
mrexcluded
0
170
WPたのしい 実演プラグイン UpdraftPlus 編
mrexcluded
0
130
Qiita版 WordPress Advent Calendar 2017 即興前半ダイジェスト の巻
mrexcluded
0
120
Other Decks in Technology
See All in Technology
LLM開発・活用の舞台裏@2024.04.25
yushin_n
2
740
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
640
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
230
Grafana x PagerDuty Better Together
jacopen
0
110
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
260
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
2
490
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
430
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
830
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
3
310
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
370
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
Featured
See All Featured
KATA
mclloyd
15
12k
Side Projects
sachag
451
41k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Practical Orchestrator
shlominoach
182
9.7k
Docker and Python
trallard
34
2.7k
How to name files
jennybc
65
93k
Navigating Team Friction
lara
178
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Become a Pro
speakerdeck
PRO
11
4.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Designing with Data
zakiwarfel
96
4.8k
Music & Morning Musume
bryan
41
5.6k
Transcript
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ ゆかいなフロントエンド劇場 単一
コンポーネントは動かない もしくは、 フロントエンド カジュアル勢の安全生息圏について 何とかならないの? Vueをはじめて3週間、Linuxひとすじ300年の人の日記より抜粋 #VueJSOsaka 2019年7月26日 ファイル
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
2 今日のお話 ・初心者です・ ・やりたかったこと・ ・Vueがあるわ、たぶんできるやろ・ ・関数とかないの?たぶんできるやろ・ ・えっ全部まとめて? すごいじゃん!・ ・なぜなのか・ ・エピローグ・
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
3 初心者です • Vueを使いはじめて早3週間。 • Linuxとオープンソース・ソフトウェアを 使って働いているプロの自営業です。 • 香川高専の研究室が手がけているプロジェクトにUI改善の担 当者として参加する事になり、そこでVueを使ってみまし た。 • 趣味は読書です
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
4 • Vueを使いはじめて早3週間。 • Linuxとオープンソース・ソフトウェアを 使って働いているプロの自営業です。 • 香川高専の研究室が手がけているプロジェクトにUI改善の担 当者として参加する事になり、そこでVueを使ってみまし た。 • 趣味は読書です 趣味は読書です https://jumpbookstore.com ※注 これは個人の趣味 についての話です。
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
5 • Vueを使いはじめて早3週間。 • Linuxとオープンソース・ソフトウェアを 使って働いているプロの自営業です。 • 香川高専の研究室が手がけているプロジェクトにUI改善の担 当者として参加する事になり、そこでVueを使ってみまし た。 • 趣味は読書です 趣味は読書です https://jumpbookstore.com ※注 これは個人の趣味 についての話です。
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
6 • Vueを使いはじめて早3週間。 • Linuxとオープンソース・ソフトウェアを 使って働いているプロの自営業です。 • 香川高専の研究室が手がけているプロジェクトにUI改善の担 当者として参加する事になり、そこでVueを使ってみまし た。 • 趣味は読書です 趣味は読書です https://jumpbookstore.com ※注 これは個人の趣味 についての話です。
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
7 • Vueを使いはじめて早3週間。 • Linuxとオープンソース・ソフトウェアを 使って働いているプロの自営業です。 • 香川高専の研究室が手がけているプロジェクトにUI改善の担 当者として参加する事になり、そこでVueを使ってみまし た。 • 趣味は読書です 趣味は読書です https://jumpbookstore.com ※注 これは個人の趣味 についての話です。
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
8 やりたかったこと
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
9 やりたかったこと HTMLをたくさん書くの とても大変
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
10 やりたかったこと HTMLをたくさん書くの とても大変
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
11 やりたかったこと ほう PHP抜き BootStrap4ですか・・・ たいしたものですね
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
12 やりたかったこと このへんを foreachしたい・・・ foreachとは この foreach は、PHPで配列を反復処理す るための便利な方法です。 実在の人物、団体などとはいっさい関係あ りません。
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
13 やりたかったこと 何とかならないの? H T M L PHPおじさん
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
14 !? Vueがあるわ、たぶんできるやろ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
15 !? Vue があるわ、 たぶんできるやろ 一般的な社会人が持つVueの印象 ※当社しらべ 印象1: すごい! 印象2: かんたん! 印象3: かっこいい!
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
16 検索BOXにforと書くだけでv-forがサジェストされる親切設計 !? Vue があるわ、 たぶんできるやろ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
17 充実した日本語ドキュメント !? Vue があるわ、 たぶんできるやろ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
18 v-forでできたわ !? Vue があるわ、 たぶんできるやろ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
19 やりたかったこと このへんを foreachしたい・・・ foreachとは この foreach は、PHPで配列を反復処理す るための便利な方法です。 実在の人物、団体などとはいっさい関係あ りません。
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
20 やったぜ!!!! !? Vue があるわ、 たぶんできるやろ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
21 ・・・ でも何度も同じHTMLを書くの めんどくさい !? Vue があるわ、 たぶんできるやろ 書く とは コピペすること。
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
22 関数とかないの? たぶんできるやろ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
23 関数とかないの? たぶんできるやろ 充実した日本語ドキュメント
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
24 関数とかないの? たぶんできるやろ コンポーネント化されたHTML。 もう怖くない。 「えっ? BootStrapのカラム増やしてもいいのか?」 「ああ、しっかり書け」 コンポーネントを呼び出すとこ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
25 関数とかないの? たぶんできるやろ やったぜ!!!!
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
26 えっ全部まとめて? すごいじゃん!
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
27 えっ全部まとめて? すごいじゃん! これが 単一ファイル コンポーネントだ HTMLタグと JavaScriptとCSSを 一つのファイルにまとめて コンポーネント化できるぞ ※意訳:覆面くん
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
28 えっ全部まとめて? すごいじゃん! まずは サンプルコードを読むのだ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
29 えっ全部まとめて? すごいじゃん! おもむろに コンポーネントを ファイル化するのだ はぁはぁ... vueファイルを インポートするのだ
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
30 えっ全部まとめて? すごいじゃん! ??? 動かんやんけ!!
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
31 なぜなのか?
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
32 なぜなのか? RTFM マニュアルは 飛ばさず全部 読みましょう
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
33 なぜなのか? RTFM マニュアルは 飛ばさず全部 読みましょう
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
34 なぜなのか? ファッ!? Webpack !?
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
35 なぜなのか? ファッ!? Browserify !?
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
36 なぜなのか? ファッ!? What is Vue Loader !?
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
37 なぜなのか? https://potato4d.github.io/huniki_generator/?text=JavaScript ※URLに注意してクリックしてみよう
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
38 単一 コンポーネントは動かない ファイル
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
39 単一 コンポーネントは動かない なぜなら我々は、 フロントエンド カジュアル勢の安全生息圏で働いているのだから。 ファイル
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ 2019年7月26日 #VueJSOsaka
40 何とかならないの? この辺に書いて読み込めないの?
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! なぜなのか? エピローグ 2019年7月26日 #VueJSOsaka
41 エピローグ -まとめ- マニュアルを飛ばさずに読んで。 ご了承ください。
初心者です やりたかったこと vueがあるわ、たぶんできるやろ 関数とかないの?たぶんできるやろ えっ全部まとめて? すごいじゃん! •なぜなのか? •エピローグ ご清聴ありがとうございました 追伸
Nuxt.js を学びましょう #VueJSOsaka 2019年7月26日