回答のはじめかた

事前準備（初回のみ）

1. Vueパッケージの用意

直前の技能五輪もしくは若年者ものづくり競技会のインフラストラクチャリストからVueのパッケージをダウンロードします。

2. ファイルの整理

ダウンロードしたパッケージの中から不要なファイル・フォルダを削除します。

• src/assets/
• src/components/HelloWorld.vue

次のファイルは中身を空にします。

• src/style.css
• src/App.vue（空の<template>、<script>は残しておく）

最後に、index.htmlのlang属性を「ja」にしておきます。

3. Tailwind CSSの読み込み

index.htmlに Tailwind CSSのCDN版 を読み込みます。

ここまでで準備は完了です！

回答のしかた

1. 回答用フォルダの用意

src/以下に「drills」フォルダを作成します。

2. 回答ファイルの作成

src/drills/以下に回答用のコンポーネントファイルを作成します。ファイル名は課題ページのURLを参考にするとわかりやすいでしょう。

例）

https://learning.konamemo.com/vue/array-sort/ の課題を解く場合、ArraySort.vue など

3. 回答ファイルの読み込み・実装

2で作成したコンポーネントファイルを src/App.vue に読み込み、ブラウザで表示できるようにします。

例）

<script setup>
  import ArraySort from './drills/ArraySort.vue';
</script>
<template>
  <!-- ここにコンポーネントを読み込む -->
  <array-sort />
</template>

ブラウザで正常に表示できることを確認したら、回答ファイル上で実装を進めていきましょう。

4. チェックリストで確認

このWebサイトには自動採点機能はありません。
回答が実装できたと思ったら、課題ページのチェックリストで自己採点しましょう。

各課題には、少し難しい「チャレンジ問題」も用意されています。
余裕があればぜひ挑戦してみてください！