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
310
単一ファイルコンポーネントは動かない
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
100
第一回 KYOTO.git 未完LT
mrexcluded
0
100
WordPressのローカルステージング環境を作ってみたお話です
mrexcluded
0
220
AWS、ロイヤリティー無用のゲームエンジン現るの巻
mrexcluded
0
200
WPたのしい舞台裏列伝 さらばWo(以下略)
mrexcluded
1
670
中学生を連れて開発合宿に行ってみた件につきまして
mrexcluded
0
210
WPたのしい 実演プラグイン Debug Bar と Health Check 編
mrexcluded
0
280
WPたのしい 実演プラグイン UpdraftPlus 編
mrexcluded
0
180
Qiita版 WordPress Advent Calendar 2017 即興前半ダイジェスト の巻
mrexcluded
0
170
Other Decks in Technology
See All in Technology
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
ビギナーであり続ける/beginning
ikuodanaka
3
770
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
2
7.2k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
3
17k
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
120
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
790
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Why Our Code Smells
bkeepers
PRO
336
57k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
GitHub's CSS Performance
jonrohan
1031
460k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Rails Girls Zürich Keynote
gr2m
95
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
For a Future-Friendly Web
brad_frost
179
9.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
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日