概要

12月1日～12/24日のクリスマスまでの間、Vue.jsのコーディングチャレンジが毎日メールで配信される。内容は、ホリデーシーズンをテーマにしたコーディングパズルで、小規模な Vue コンポーネントやアプリケーションの構築らしい。
勉強も兼ねてやってみる。
https://adventofvue.com/

koyama shigehito 2022/11/17に更新

作業用の環境構築

create viteでcreate-vueが選択できるようになっていたので、そちらを利用。
linter、formatterなどそのまま使えて便利。
https://vitejs.dev/guide/

koyama shigehito 2022/11/16に更新

Day 0

ウォーミングアップのパイロットパズル

お題

Reactチュートリアルでおなじみ？の三目並べゲーム (tic-tac-toe) を作る

要件

2人のプレイヤーが交互に、3つのマスからなる3列のボードに自分のシンボル（丸と十字）を配置する
開始の順番はランダムに決めることができる
次の手番のプレーヤーを表示する
最初に自分のシンボルで行、列、または対角線を埋めた人が勝ち（どちらでも達成できなければ引き分けで終了）
ゲーム結果（勝敗/引き分け）の表示
リスタートボタンで再度ゲームを行える

koyama shigehito 2022/11/21に更新

完成品

メモ

勝敗判定のプログラムがかなりまどろっこしい謎コードになってしまった。
解答例が簡潔でArray.prototype.every()の使い所だ！となった。勉強になる。

解答例

export const hasWinner = board => {
  const winningIndexCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ]

  const isWinningCombo = combo => {
    const playerSymbols = combo.map(index => board[index])

    return playerSymbols.every(
      symbol => symbol !== null && symbol === playerSymbols[0]
    )
  }

  return winningIndexCombos.map(isWinningCombo).some(winner => winner === true)
}

koyama shigehito 2022/12/03に更新

Day 1

お題

dummyjsonのproducts APIから製品のデバウンス検索バーを構築する

要件

300ミリ秒の遅延
一般的なロードスピナー/メッセージを表示
関数が正常に実行された場合、商品の名前と価格タグを順不同のリストで表示
エラーの場合、ネイティブのalert()を使ってエラーメッセージを表示
検索語が空の文字列にリセットされた場合は、検索候補も消去

koyama shigehito 2022/12/02

完成

メモ

debounce処理はパッケージを利用
https://www.npmjs.com/package/debounce
ローディングはTailwind CSSの組み込みを利用
https://tailwindcss.com/docs/animation#spin

コード

koyama shigehito 2022/12/03に更新

追記メモ

VueUseのwatchDebounced を使うのも良さそう
https://vueuse.org/shared/watchdebounced/#watchdebounced

koyama shigehito 2022/12/03に更新

Day 2

お題

APIからクリスマスに関するジョークを取得して表示するアプリケーションの作成

要件

joke APIからクリスマスに関するジョークを取得
「ふり」となるテキストをまず表示する
tell me!ボタンをクリックすると「おち」となるテキストが表示される
「おち」のテキスト表示後に次のジョークを表示するためのAnotherボタンを表示する

koyama shigehito 2022/12/04に更新

完成

メモ

JokeAPI

コード

koyama shigehito 2022/12/04に更新

Day 3

お題

クリスマスまでのカウントダウンタイマーの実装

要件

クリスマスまでの日数、時間、分、秒をカウントダウン表示する
現在の時刻の取得にはVueUseのuseNow composableを使う
Vueのトランジション・コンポーネントを使って、数字の遷移にアニメーションを実装する

koyama shigehito 2022/12/05

完成

メモ

Vue.jsのtransition：https://vuejs.org/guide/built-ins/transition.html
key 属性を付与しないとうまく動かなかった（TransitioGroupのガイドにはあるが？：https://vuejs.org/guide/built-ins/transition-group.html）
今回は使ってないが、VueUseのuseNowでポーズや再生などを制御することもできる

<UseNow v-slot="{ now, pause, resume }">
  Now: {{ now }}
  <button @click="pause()">Pause</button>
  <button @click="resume()">Resume</button>
</UseNow>

コード

koyama shigehito 2022/12/05に更新

Day 4

お題

コンポーネントを再帰的に描画してクリスマスツリーを表示する

要件

一つの円形を描画したコンポーネントがある
このコンポーネントを再帰的に描画することでクリスマスツリーを表示する
UI上ででツリーのサイズを変更できるようにする（自己課題）

koyama shigehito 2022/12/06に更新

完成

メモ

再帰的コンポーネント
はじめてコンポーネントの再帰呼び出しを書いた。こんなことできるのかと思ったけど、使い所も難しそう。他階層のリストなどでしょうか？
再帰呼び出しするコンポーネントにもpropsを渡すのを忘れてしばらく動かず唸ってた

コード

koyama shigehito 2022/12/06に更新

Day 5

お題

フォームに入力した名前をギフトカードに表示する

要件

双方向バインディングした「TO」と「FROM」の2つの入力フィールドを作成
入力フィールドにデータを入力すると、カード上の「TO」と「FROM」のテキストが動的に更新される
トグルボタンでレイアウトが変更できるようにする

koyama shigehito 2022/12/06

完成

メモ

カスタムイベントでv-modelを使うのに少しコツがいる
https://ja.vuejs.org/guide/components/events.html#usage-with-v-model
型が絡んでさらによくわからなくなった
https://ja.vuejs.org/guide/components/events.html#usage-with-v-model
ドキュメントが分かりやすくて助かる

コード

koyama shigehito 2022/12/07に更新

Day 6

お題

商品の価格を比較するアプリケーションの作成

要件

DummyJSONのProcuts API (Get All Products endpoint)から商品を取得し、select inputで商品名と価格を表示する
→ サムネイル画像も追加
2つのアイテムが選択されたら比較文を表示（「X 1 つで Y が10個買えるよ」など）
→ 比較分ではなくUI表示に変更
同じアイテムが選択されたら、「These are the same items」メッセージを表示する

koyama shigehito 2022/12/07

完成

メモ

Composablesを利用した簡易的な状態管理
Composables

コード

PageDay6.vue

ItemSelect.vue

itemComparison.ts

koyama shigehito 2022/12/08

Day 7

お題

Drag + Drop APIを使用して、プレゼントをツリーの下に移動する

要件

プレゼントオブジェクトをドラッグ出来るようにする
ツリーの下でドラッグしたプレゼントをドロップできるようにする
startDragとonDropメソッドを使用する

koyama shigehito 2022/12/08

完成

メモ

参考資料

How to Add Drag and Drop to Your VueJS Project
vite-svg-loaderがとても便利だった
Vue3 + ViteでSVGファイルを読み込む方法
HTML Drag and Drop APIを実装したことがあまりなかったのでだいぶ調べた...

コード

koyama shigehito 2022/12/11

Day 8

お題

クリスマスのカウントダウンメッセージ表示を多言語対応する

要件

Vue i18nを使って「Happy Holidays」をローカライズする
何らかの方法でロケールを変更するできるようにする
現在のロケールを表示する
Vue i18nのdate functionを使って、日付を「クリスマス」にローカライズする
クリスマスまでの日数をローカライズして表示する

koyama shigehito 2022/12/11

完成

メモ

Vue I18nを初めて利用したがとても使いやすかった。ドキュメントしっかり読んで色々試したい

コード

koyama shigehito 2022/12/11

Day 9

お題

プレゼントのサイズを計算して並べ替え

要件

プレゼントの表面積（幅×高さ、小さいものから大きいもの）ごとに並べ替える
toggleボタンを設置して、ソートを切り替えることができるようにする
Vue.jsのbuilt-inコンポー念tの<TransitionGroup>を利用してアニメーションさせる（独自課題）

koyama shigehito 2022/12/11

完成

メモ

TransitionGroup

コード

koyama shigehito 2022/12/12に更新

Day 10

koyama shigehito 2022/12/12

Day 11

お題

Day 4で作成したクリスマスツリーにライトを点ける

要件

ツリーの中にライトに見えるようなオブジェクトを実装
スイッチでライトのon/offを切り替えられるようにする（独自課題）

koyama shigehito 2022/12/12

完成

メモ

ツリーの中央からランダムな位置にライトを配置する計算式と、点灯のタイミングをずらす計算式

const AMPLIFY = 15;
const offsetY = Math.random() * AMPLIFY - AMPLIFY / 2;
const offsetX = Math.random() * AMPLIFY - AMPLIFY / 2;
const MAX_DELAY = 2;
const twinkleDelay = Math.random() * MAX_DELAY;

コード

koyama shigehito 2022/12/13

Day12

お題

サンタがクリスマスプレゼントのラベルを剥がし、誰へのプレゼントか分からなくした。プレゼントを見つけるためのロジックを示す手紙が残されていたので、それを手がかりに自分のプレゼントを探し出すためのアプリケーションの構築

要件

ロジック：まず2番のプレゼントを捨て、次に4番のプレゼントを捨て、最後に残った1つが自分のプレゼント
プレゼントの総数を変更できるようにする（1～30個）
全てのプレゼントをグリッドで表示させる
前のステップと次のステップのボタンで各ステップを切り替え、最初のステップと最後のステップにもそれぞれボタンで切り替えられるようにする
消去された各ボックスは、透過して表示する

koyama shigehito 2022/12/13

完成

メモ

v-modelに.number修飾子をつけずに動かなくてつまった
https://vuejs.org/guide/essentials/forms.html#number