Closed28
Advent Of Vue やってみる
koyama shigehito概要
12月1日～12/24日のクリスマスまでの間、Vue.jsのコーディングチャレンジが毎日メールで配信される。内容は、ホリデーシーズンをテーマにしたコーディングパズルで、小規模な Vue コンポーネントやアプリケーションの構築らしい。
勉強も兼ねてやってみる。
koyama shigehito作業用の環境構築
create viteでcreate-vueが選択できるようになっていたので、そちらを利用。
linter、formatterなどそのまま使えて便利。
koyama shigehitoDay 0
ウォーミングアップのパイロットパズル
お題
Reactチュートリアルでおなじみ？の三目並べゲーム (tic-tac-toe) を作る
要件
- 2人のプレイヤーが交互に、3つのマスからなる3列のボードに自分のシンボル（丸と十字）を配置する
- 開始の順番はランダムに決めることができる
- 次の手番のプレーヤーを表示する
- 最初に自分のシンボルで行、列、または対角線を埋めた人が勝ち（どちらでも達成できなければ引き分けで終了）
- ゲーム結果（勝敗/引き分け）の表示
- リスタートボタンで再度ゲームを行える
koyama shigehito完成品
メモ
勝敗判定のプログラムがかなりまどろっこしい謎コードになってしまった。
解答例が簡潔で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)
}
Day 1
お題
dummyjsonのproducts APIから製品のデバウンス検索バーを構築する
要件
- 300ミリ秒の遅延
- 一般的なロードスピナー/メッセージを表示
- 関数が正常に実行された場合、商品の名前と価格タグを順不同のリストで表示
- エラーの場合、ネイティブのalert()を使ってエラーメッセージを表示
- 検索語が空の文字列にリセットされた場合は、検索候補も消去
koyama shigehito完成
メモ
- debounce処理はパッケージを利用
https://www.npmjs.com/package/debounce - ローディングはTailwind CSSの組み込みを利用
https://tailwindcss.com/docs/animation#spin
コード
koyama shigehito追記メモ
- VueUseのwatchDebounced を使うのも良さそう
https://vueuse.org/shared/watchdebounced/#watchdebounced
koyama shigehitoDay 2
お題
APIからクリスマスに関するジョークを取得して表示するアプリケーションの作成
要件
- joke APIからクリスマスに関するジョークを取得
- 「ふり」となるテキストをまず表示する
-
tell me!ボタンをクリックすると「おち」となるテキストが表示される - 「おち」のテキスト表示後に次のジョークを表示するための
Anotherボタンを表示する
koyama shigehitoDay 3
お題
クリスマスまでのカウントダウンタイマーの実装
要件
- クリスマスまでの日数、時間、分、秒をカウントダウン表示する
- 現在の時刻の取得にはVueUseの
useNowcomposableを使う - Vueのトランジション・コンポーネントを使って、数字の遷移にアニメーションを実装する
koyama shigehito完成
メモ
- 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 shigehitoDay 4
お題
コンポーネントを再帰的に描画してクリスマスツリーを表示する
要件
- 一つの円形を描画したコンポーネントがある
- このコンポーネントを再帰的に描画することでクリスマスツリーを表示する
- UI上ででツリーのサイズを変更できるようにする（自己課題）
koyama shigehito完成
メモ
- 再帰的コンポーネント
- はじめてコンポーネントの再帰呼び出しを書いた。こんなことできるのかと思ったけど、使い所も難しそう。他階層のリストなどでしょうか？
- 再帰呼び出しするコンポーネントにもpropsを渡すのを忘れてしばらく動かず唸ってた
コード
koyama shigehitoDay 5
お題
フォームに入力した名前をギフトカードに表示する
要件
- 双方向バインディングした「TO」と「FROM」の2つの入力フィールドを作成
- 入力フィールドにデータを入力すると、カード上の「TO」と「FROM」のテキストが動的に更新される
- トグルボタンでレイアウトが変更できるようにする
koyama shigehito完成
メモ
- カスタムイベントで
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 shigehitoDay 6
お題
商品の価格を比較するアプリケーションの作成
要件
-
DummyJSONのProcuts API (Get All Products endpoint)から商品を取得し、select inputで商品名と価格を表示する
→ サムネイル画像も追加 - 2つのアイテムが選択されたら比較文を表示（「X 1 つで Y が10個買えるよ」など）
→ 比較分ではなくUI表示に変更 - 同じアイテムが選択されたら、「These are the same items」メッセージを表示する
koyama shigehitoDay 7
お題
Drag + Drop APIを使用して、プレゼントをツリーの下に移動する
要件
- プレゼントオブジェクトをドラッグ出来るようにする
- ツリーの下でドラッグしたプレゼントをドロップできるようにする
-
startDragとonDropメソッドを使用する
koyama shigehito完成
メモ
参考資料
- How to Add Drag and Drop to Your VueJS Project
- vite-svg-loaderがとても便利だった
- Vue3 + ViteでSVGファイルを読み込む方法
- HTML Drag and Drop APIを実装したことがあまりなかったのでだいぶ調べた...
コード
koyama shigehitoDay 8
お題
クリスマスのカウントダウンメッセージ表示を多言語対応する
要件
- Vue i18nを使って「Happy Holidays」をローカライズする
- 何らかの方法でロケールを変更するできるようにする
- 現在のロケールを表示する
- Vue i18nのdate functionを使って、日付を「クリスマス」にローカライズする
- クリスマスまでの日数をローカライズして表示する
koyama shigehitoDay 9
お題
プレゼントのサイズを計算して並べ替え
要件
- プレゼントの表面積（幅×高さ、小さいものから大きいもの）ごとに並べ替える
- toggleボタンを設置して、ソートを切り替えることができるようにする
- Vue.jsのbuilt-inコンポー念tの
<TransitionGroup>を利用してアニメーションさせる（独自課題）
koyama shigehitoDay 10
koyama shigehitoDay 11
お題
Day 4で作成したクリスマスツリーにライトを点ける
要件
- ツリーの中にライトに見えるようなオブジェクトを実装
- スイッチでライトのon/offを切り替えられるようにする（独自課題）
koyama shigehito完成
メモ
ツリーの中央からランダムな位置にライトを配置する計算式と、点灯のタイミングをずらす計算式
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 shigehitoDay12
お題
サンタがクリスマスプレゼントのラベルを剥がし、誰へのプレゼントか分からなくした。プレゼントを見つけるためのロジックを示す手紙が残されていたので、それを手がかりに自分のプレゼントを探し出すためのアプリケーションの構築
要件
- ロジック：まず2番のプレゼントを捨て、次に4番のプレゼントを捨て、最後に残った1つが自分のプレゼント
- プレゼントの総数を変更できるようにする（1～30個）
- 全てのプレゼントをグリッドで表示させる
- 前のステップと次のステップのボタンで各ステップを切り替え、最初のステップと最後のステップにもそれぞれボタンで切り替えられるようにする
- 消去された各ボックスは、透過して表示する
このスクラップは2023/01/19にクローズされました