Vue.jsに触れよう7
公開日: 2025/1/23
Windowsのメモ帳とVue.jsを使用して日記を記録するアプリを作成しました。
本記事では、作成したアプリの概要と実際に書いたコードを記したいと思います。
1. アプリについて
以下が作成したアプリです。
タイトルが一行で、内容が複数行記入できるようになっています。
日記がない時は「履歴なし」と表示されます。
追加を押すと日記リストに表示されます。
複数の日記を追加することができます。
検索機能も追加しました。
タイトルが一行で、内容が複数行記入できるようになっています。
日記がない時は「履歴なし」と表示されます。
追加を押すと日記リストに表示されます。
複数の日記を追加することができます。
検索機能も追加しました。
2. コードについて
以下が実際に書いたコードです。
・diary.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日記一覧</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<h1>日記一覧</h1>
<!-- 検索フィールド -->
<div>
<label for="search">検索:</label>
<input type="text" v-model="searchQuery" @input="searchDiaries">
</div>
<!-- 新規日記の入力フォーム -->
<div>
<label for="title">タイトル:</label>
<input type="text" v-model="newDiary.title">
<label for="content">内容:</label>
<textarea v-model="newDiary.content"></textarea>
<button @click="addDiary">追加</button>
</div>
<!-- 日記のリスト -->
<div v-if="filteredDiaries.length > 0">
<h2>日記リスト</h2>
<ul>
<li v-for="(diary, index) in filteredDiaries" :key="index">
<strong>{{ diary.title }}</strong>: {{ diary.content }}
</li>
</ul>
</div>
<div v-else>
<p>履歴なし</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
newDiary: {
title: '',
content: ''
&n3. コードの説明
headタグには文字コードの指定、表示領域の指定、上部タイトル、vue2のcdnの読み込みを行ってます。
検索フォームのタイプはinputです。
日記の入力フォームはinput要素とtextareaを使用しています。
また、HTMLの要素では追加ボタンの表示や追加した日記のリスト表示を書いています。
scriptタグでは、日記を追加したり、検索をしたり、検索結果を表示するメソッドを書いています。
toLowerCase()は、大文字を小文字に変換させるものです。
今回は日本語なので、これは書いても書かなくても大丈夫です。
trimは、前後の空白を削除するものです。
検索フォームに文字列を入力するとき、前後に空白を入れても自動的に削除されます。
今回はfilterを使って検索をしているので、日本語を入力して確定した時点で検索結果が表示されます。
入力した文字列が一致している日記を表示します。
検索機能のメソッドは、フォームが空文字ではない時に実行するメソッドという風にしてます。
以上がコードの説明です。
4. まとめ
いかがだったでしょうか。
本記事では、日記記録アプリの画面の開発をしました。
私は初学者です。実際やってみるとすごく楽しいです。
Windowsにもともとインストールされていたメモ帳を使って作成できるので、ぜひ色々なものを作ってみましょう。
今後もVue.jsを使って学習していきたいと思います。