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