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
この前出たハッカソンでVue.jsを使った話
Search
azurata
December 16, 2019
Programming
300
1
Share
この前出たハッカソンでVue.jsを使った話
v-okinawa meetup #3で話した内容に個人情報を特定できるような項目を削除したものです
azurata
December 16, 2019
More Decks by azurata
See All by azurata
この夏始めたい 「TOPPERS/ASP3」
azurata09
0
55
誰でもわかる!React入門
azurata09
0
170
SPAJAM2022
azurata09
0
120
etrobo2022 Shiokara-z Model
azurata09
0
1.1k
SuggIt!
azurata09
0
110
Other Decks in Programming
See All in Programming
関係性から理解する"同一性"の型用語たち
pvcresin
1
240
KMP × Kotlin 2.3 - How Android Got Slower While iOS Builds Improved by 47%
rio432
0
210
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
susisu
0
140
Oxlintはいかにしてtsgolintのlint ruleを呼び出しているのか
syumai
0
280
Import assertionsが消えた日~ECMAScriptの仕様はどう決まり、なぜ覆るのか~
bicstone
2
190
プラグインで拡張される Context をtype-safe にする難しさと設計判断
kazupon
1
200
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
takuroabe
0
200
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
ytakahashii
0
220
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
manfredsteyer
PRO
0
110
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
linyows
3
420
色即是空、空即是色、データサイエンス
kamoneggi
1
130
Surviving Black Friday: 329 billion requests with Falcon!
ioquatix
0
3.2k
Featured
See All Featured
Utilizing Notion as your number one productivity tool
mfonobong
4
300
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
290
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
300
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
Ethics towards AI in product and experience design
skipperchong
2
280
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
140
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
200
Leo the Paperboy
mayatellez
7
1.8k
Optimising Largest Contentful Paint
csswizardry
37
3.7k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.1k
Transcript
slide master NORMAL この前出たハッカソンで Vue.jsを使った話 あずらた(@azurata45) 1
slide master NORMAL 自己紹介 あずらた • Twitter ⇒ @azurata45 •
情報科高校2年生 • 最近iPhone 11に変えた • 見ての通りVimmer • 普段はインフラ(Cisco) 2
slide master NORMAL 多分懇親会出れません (18歳未満なので) 3
slide master NORMAL 参加したハッカソン PARADISE JAM 2019 • 出場者は学生が多い •
提出作品はゲームが多い 今年のテーマは「首里城」 4
slide master NORMAL 作ったもの 首里城を守るために! • ノベルゲーム • Vue.jsを使用 •
シナリオライター(ほぼ)4人 プログラマー1人 • ソースコード ⇒ azurata45/pjam2019 5
slide master NORMAL やったこと一覧 • セリフの表示 • セリフ表示部のコンポーネント化 • JSONで記述したセリフ読み込み
⇒ JSONが読めなかったので変数として定義 • 選択肢の表示 • 選択肢によるストーリー切り替え • 背景の動的変更 • PWAの設定 6
slide master NORMAL 得られた知見 コンポーネントに状態をつけると面倒 全てこの記事で説明された↓ https://qiita.com/Yametaro/items/38420265011ee8bc42a0 7
slide master NORMAL 要約 • コンポーネント間の 親子関係を崩すな • 子コンポーネントは ディスプレイとして使え
• それがVueの利点だ 8
slide master NORMAL 僕の行動 1. セリフのコンポーネント化に成功 2. 調子に乗ってコンポーネントに 状態を持たせようと試みる 3.
できない 9
slide master NORMAL 当時の僕の知識 • Computedわからん • v-bindって何? 10
slide master NORMAL 当時の僕 こんな覚え方 しちゃ 駄目だな 11
slide master NORMAL 感想 • Vue使いやすかったなぁ~ • プログラマ1人はキツいなぁ • その場のノリで作るプロダクトを決めてはいけない(戒め)
• きちんとVue勉強しなきゃなぁ ⇐ 1年間言い続けている 12
slide master NORMAL この前出たハッカソンで Vue.jsを使った話 あずらた(@azurata45) おしまい 13