初心者向け！Vue 3 を使った簡単なアプリ開発入門

todo-app/
│── public/ 
│── src/
│   ├── assets/ 
│   ├── components/
│   │   ├── TodoList.vue  ← TODOリストのコンポーネント
│   ├── App.vue  ← メインレイアウト
│   ├── main.js  ← Vue インスタンスの作成
│   ├── store.js  ← (オプション) 状態管理を使う場合
│── package.json
│── vite.config.js  (または vue.config.js)
│── index.html

<script setup>
import TodoList from './components/TodoList.vue';
</script>

<template>
  <div>
    <h1>Vue 3 TODOリスト</h1>
    <TodoList />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const tasks = ref([]);  // タスクの配列
const newTask = ref(''); // ユーザーが入力するタスク

// ページロード時にローカルストレージからデータを取得
onMounted(() => {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    tasks.value = JSON.parse(savedTasks);
  }
});

// タスクを追加
const addTask = () => {
  if (newTask.value.trim() === '') return; // 空白チェック
  tasks.value.push(newTask.value); // タスク追加
  localStorage.setItem('tasks', JSON.stringify(tasks.value)); // localStorage に保存
  newTask.value = ''; // 入力フィールドをクリア
};

// タスクを削除
const removeTask = (index) => {
  tasks.value.splice(index, 1); // 指定したタスクを削除
  localStorage.setItem('tasks', JSON.stringify(tasks.value)); // localStorage を更新
};
</script>

<template>
  <div class="todo-container">
    <h2>TODOリスト</h2>
    <div class="todo-input">
      <input v-model="newTask" placeholder="新しいタスクを入力" />
      <button @click="addTask">追加</button>
    </div>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button @click="removeTask(index)">削除</button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.todo-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.todo-input {
  display: flex;
  gap: 10px;
}
input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 12px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #218838;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background: white;
  margin: 5px 0;
  border-radius: 4px;
}
li button {
  background: #dc3545;
}
li button:hover {
  background: #c82333;
}
</style>

onMounted(() => {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    tasks.value = JSON.parse(savedTasks);
  }
});

const addTask = () => {
  if (newTask.value.trim() === '') return; // 空白チェック
  tasks.value.push(newTask.value); // タスク追加
  localStorage.setItem('tasks', JSON.stringify(tasks.value)); // localStorage に保存
  newTask.value = ''; // 入力フィールドをクリア
};

const removeTask = (index) => {
  tasks.value.splice(index, 1); // 指定したタスクを削除
  localStorage.setItem('tasks', JSON.stringify(tasks.value)); // localStorage を更新
};

weather-app/
│── src/
│   ├── components/
│   │   ├── Weather.vue  ← 天気情報のコンポーネント
│   ├── App.vue  ← メインレイアウト
│   ├── main.js  ← Vue インスタンスの作成
│── package.json
│── vite.config.js  (または vue.config.js)
│── index.html

<script setup>
import Weather from './components/Weather.vue';
</script>

<template>
  <div>
    <h1>天気予報アプリ</h1>
    <Weather />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const city = ref('');
const weather = ref(null);
const errorMessage = ref('');
const apiKey = 'YOUR_API_KEY';

// 天気データ取得用関数
const fetchWeather = async () => {
  if (!city.value.trim()) {
    errorMessage.value = '都市名を入力してください';
    return;
  }

  try {
    const response = await axios.get(
  `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city.value)}&appid=${apiKey}&units=metric&lang=ja`
  );
    weather.value = response.data;
    errorMessage.value = '';
  } catch (error) {
    errorMessage.value = '天気情報の取得に失敗しました。都市名を確認してください。';
  }
};
</script>

<template>
  <div class="weather-container">
    <h2>天気予報</h2>
    <div class="input-container">
      <input v-model="city" placeholder="都市名を入力" />
      <button @click="fetchWeather">検索</button>
    </div>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    <div v-if="weather" class="weather-info">
      <h3>{{ weather.name }} の天気</h3>
      <p>気温: {{ weather.main.temp }}℃</p>
      <p>天気: {{ weather.weather[0].description }}</p>
    </div>
  </div>
</template>

<style scoped>
.weather-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.input-container {
  display: flex;
  gap: 10px;
}
input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #0056b3;
}
.error {
  color: red;
  margin-top: 10px;
}
.weather-info {
  margin-top: 20px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}
</style>

<script setup>
import { ref } from 'vue';

const name = ref('');
const email = ref('');
const password = ref('');
const errors = ref([]);

const validateForm = () => {
  errors.value = [];

  if (!name.value.trim()) {
    errors.value.push('名前を入力してください');
  }

  if (!email.value.trim()) {
    errors.value.push('メールアドレスを入力してください');
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    errors.value.push('正しいメールアドレスを入力してください');
  }

  if (!password.value.trim()) {
    errors.value.push('パスワードを入力してください');
  } else if (password.value.length < 6) {
    errors.value.push('パスワードは6文字以上で入力してください');
  }
};
</script>

<template>
  <div class="form-container">
    <h2>ユーザー登録</h2>
    <div class="input-group">
      <input v-model="name" placeholder="名前" />
      <input v-model="email" placeholder="メールアドレス" />
      <input type="password" v-model="password" placeholder="パスワード" />
    </div>
    <button @click="validateForm">登録</button>
    <ul v-if="errors.length" class="error-list">
      <li v-for="error in errors" :key="error">{{ error }}</li>
    </ul>
  </div>
</template>

<style scoped>
.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 12px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #218838;
}
.error-list {
  color: red;
  margin-top: 10px;
}
</style>