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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
azurata
December 16, 2019
Programming
310
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
この前出たハッカソンでVue.jsを使った話
v-okinawa meetup #3で話した内容に個人情報を特定できるような項目を削除したものです
azurata
December 16, 2019
More Decks by azurata
See All by azurata
この夏始めたい 「TOPPERS/ASP3」
azurata09
0
62
誰でもわかる!React入門
azurata09
0
180
SPAJAM2022
azurata09
0
130
etrobo2022 Shiokara-z Model
azurata09
0
1.1k
SuggIt!
azurata09
0
110
Other Decks in Programming
See All in Programming
Modding RubyKaigi for Myself
yui_knk
0
900
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
nao_mk2
1
1.2k
oxlintはeslint/typescript-eslintを置き換えられるのか
shomafujita
2
320
JavaDoc 再入門
nagise
0
300
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
ternbusty
1
150
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
3.2k
Language Server 使ってる? 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
handlename
0
770
A2UI という光を覗いてみる
satohjohn
1
110
フロントエンドとバックエンドで「1文字」を揃えよう
youkidearitai
PRO
0
220
Spec Driven Development | AI Summit Lisbon
danielsogl
PRO
0
160
Datadog × OpenTelemetry 入門と実践のあいだ
kn_to_maxpno
1
150
AIとASP.NET Coreで雑Webアプリを作った話
mayuki
0
430
Featured
See All Featured
Chasing Engaging Ingredients in Design
codingconduct
0
210
Faster Mobile Websites
deanohume
310
31k
Bash Introduction
62gerente
615
210k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.8k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
840
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
720
How to make the Groovebox
asonas
2
2.2k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.5k
Color Theory Basics | Prateek | Gurzu
gurzu
0
360
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