Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
slide master NORMAL この前出たハッカソンで Vue.jsを使った話 あずらた(@azurata45) 1
Slide 2
Slide 2 text
slide master NORMAL 自己紹介 あずらた ● Twitter ⇒ @azurata45 ● 情報科高校2年生 ● 最近iPhone 11に変えた ● 見ての通りVimmer ● 普段はインフラ(Cisco) 2
Slide 3
Slide 3 text
slide master NORMAL 多分懇親会出れません (18歳未満なので) 3
Slide 4
Slide 4 text
slide master NORMAL 参加したハッカソン PARADISE JAM 2019 ● 出場者は学生が多い ● 提出作品はゲームが多い 今年のテーマは「首里城」 4
Slide 5
Slide 5 text
slide master NORMAL 作ったもの 首里城を守るために! ● ノベルゲーム ● Vue.jsを使用 ● シナリオライター(ほぼ)4人 プログラマー1人 ● ソースコード ⇒ azurata45/pjam2019 5
Slide 6
Slide 6 text
slide master NORMAL やったこと一覧 ● セリフの表示 ● セリフ表示部のコンポーネント化 ● JSONで記述したセリフ読み込み ⇒ JSONが読めなかったので変数として定義 ● 選択肢の表示 ● 選択肢によるストーリー切り替え ● 背景の動的変更 ● PWAの設定 6
Slide 7
Slide 7 text
slide master NORMAL 得られた知見 コンポーネントに状態をつけると面倒 全てこの記事で説明された↓ https://qiita.com/Yametaro/items/38420265011ee8bc42a0 7
Slide 8
Slide 8 text
slide master NORMAL 要約 ● コンポーネント間の 親子関係を崩すな ● 子コンポーネントは ディスプレイとして使え ● それがVueの利点だ 8
Slide 9
Slide 9 text
slide master NORMAL 僕の行動 1. セリフのコンポーネント化に成功 2. 調子に乗ってコンポーネントに 状態を持たせようと試みる 3. できない 9
Slide 10
Slide 10 text
slide master NORMAL 当時の僕の知識 ● Computedわからん ● v-bindって何? 10
Slide 11
Slide 11 text
slide master NORMAL 当時の僕 こんな覚え方 しちゃ 駄目だな 11
Slide 12
Slide 12 text
slide master NORMAL 感想 ● Vue使いやすかったなぁ~ ● プログラマ1人はキツいなぁ ● その場のノリで作るプロダクトを決めてはいけない(戒め) ● きちんとVue勉強しなきゃなぁ ⇐ 1年間言い続けている 12
Slide 13
Slide 13 text
slide master NORMAL この前出たハッカソンで Vue.jsを使った話 あずらた(@azurata45) おしまい 13