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
98
第一回 KYOTO.git 未完LT
mrexcluded
0
98
WordPressのローカルステージング環境を作ってみたお話です
mrexcluded
0
210
AWS、ロイヤリティー無用のゲームエンジン現るの巻
mrexcluded
0
190
WPたのしい舞台裏列伝 さらばWo(以下略)
mrexcluded
1
660
中学生を連れて開発合宿に行ってみた件につきまして
mrexcluded
0
200
WPたのしい 実演プラグイン Debug Bar と Health Check 編
mrexcluded
0
270
WPたのしい 実演プラグイン UpdraftPlus 編
mrexcluded
0
180
Qiita版 WordPress Advent Calendar 2017 即興前半ダイジェスト の巻
mrexcluded
0
170
Other Decks in Technology
See All in Technology
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
610
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.2k
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
930
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
100
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
660
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
150
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
270
Leveraging Open-Source Tools for Creating 3D Tiles in the Urban Environment
simboss
PRO
0
120
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Designing for Performance
lara
609
69k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Bash Introduction
62gerente
614
210k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Reviewing Like a Champion
maltzj
524
40k
Being A Developer After 40
akosma
90
590k
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日