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
280
単一ファイルコンポーネントは動かない
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
82
第一回 KYOTO.git 未完LT
mrexcluded
0
77
WordPressのローカルステージング環境を作ってみたお話です
mrexcluded
0
190
AWS、ロイヤリティー無用のゲームエンジン現るの巻
mrexcluded
0
170
WPたのしい舞台裏列伝 さらばWo(以下略)
mrexcluded
1
640
中学生を連れて開発合宿に行ってみた件につきまして
mrexcluded
0
180
WPたのしい 実演プラグイン Debug Bar と Health Check 編
mrexcluded
0
240
WPたのしい 実演プラグイン UpdraftPlus 編
mrexcluded
0
170
Qiita版 WordPress Advent Calendar 2017 即興前半ダイジェスト の巻
mrexcluded
0
150
Other Decks in Technology
See All in Technology
Amazon Aurora のバージョンアップ手法について
smt7174
2
160
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
280
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
270
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
110
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
950
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
180
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.5k
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
120
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
偏光画像処理ライブラリを作った話
elerac
1
180
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
300
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Six Lessons from altMBA
skipperchong
27
3.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
4 Signs Your Business is Dying
shpigford
182
22k
GitHub's CSS Performance
jonrohan
1030
460k
Agile that works and the tools we love
rasmusluckow
328
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Automating Front-end Workflow
addyosmani
1368
200k
Fireside Chat
paigeccino
34
3.2k
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日