Vue.js で願いのメモアプリを作成する

はじめに

このプロジェクトでは、Vue.js と Element-UI ライブラリを使って「願いのスティッキーメモ」アプリケーションを作成する方法を学びます。このプロジェクトの目的は、人々が安全かつ機密性の高い方法で自分たちの目標、理想、願いを表現できる匿名性と便利なプラットフォームを提供することです。

👀 プレビュー

フィールドの検証条件が満たされていない場合、次のエラーが報告されます。

フォーム検証エラーメッセージ

条件を満たして願いを投稿した後、結果は次のようになります。

完了時の結果

🎯 タスク

このプロジェクトでは、以下を学びます。

プロジェクト構造を設定し、必要なファイルとフォルダを準備する方法。
完了したフォームを願いの壁にレンダリングする方法。
入力フィールドが必要な基準を満たすことを確認するためのフォーム検証を実装する方法。
フォームの送信とリセット機能を処理する方法。
画像のアップロードとプレビュー機能を実装する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Vue.js プロジェクトを構築して整理する。
Element-UI ライブラリを使ってフォームを作成し、ユーザーインタラクションを処理する。
Element-UI の検証ルールを使ってフォーム検証を実装する。
Vue.js アプリケーションでファイルのアップロードと画像のプレビューを処理する。
状態を管理し、ユーザーのアクションに基づいて UI を更新する。

プロジェクト構造を設定する

このステップでは、プロジェクト構造を設定し、必要なファイルとフォルダを準備します。

コードエディタでプロジェクトフォルダを開きます。ディレクトリ構造は次のとおりです。

├── css
│   ├── fonts
│   │   ├── element-icons.ttf
│   │   └── element-icons.woff
│   ├── index.css
│   └── wish.css
├── images
│   ├── bg.jfif
│   └── ding.png
├── index.html
└── js
    ├── index.js
    └── vue.min.js

ここで：

cssは、element-uiのプロジェクトスタイルが保存されているフォルダです。
imagesは画像フォルダです。
index.htmlはメインページです。
jsは、プロジェクトの依存 JavaScript ライブラリ用のフォルダです。

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

ページは初期化時に入力ボックスの検証を行わず、入力を投稿した後に願いの投稿が表示されません。

願いの壁に完成したフォームを表示する

このステップでは、index.htmlファイルを変更して、願いの壁に完成したフォームをレンダリングします。

プロジェクトフォルダ内のindex.htmlファイルを開きます。
index.htmlファイル内の TODO コメントを探し、コードの問題点を観察したところ、v-for="(item,index) in []"のコードが問題があり、次のコードに変更しました。

<!-- TODO -->
<div
  class="card"
  :class="item.css"
  v-for="(item,index) in wishList"
  :key="index"
>
  <!--... -->
</div>

class="card"属性を持つ<div>要素内のコードは、願いの壁に完成したフォームの名前、内容、画像（利用可能な場合）を表示します。

フォーム検証を実装する

このステップでは、入力フィールドが必要な基準を満たすことを確認するためのフォーム検証を完了します。

プロジェクトフォルダ内のindex.htmlファイルを開きます。
Vue インスタンスのdataセクション内のrulesオブジェクトを見つけて、次のコードを追加します。

rules: {
  // TODO
  name: [
    {
      required: true,
      message: "Please input your name",
      trigger: "blur"
    },
    {
      min: 2,
      max: 4,
      message: "Length should be between 2 and 4 characters",
      trigger: "blur"
    }
  ],
  content: [
    {
      required: true,
      message: "Please input content",
      trigger: "blur"
    },
    {
      min: 1,
      max: 30,
      message: "Length should be between 1 and 30 characters",
      trigger: "blur"
    }
  ]
},

rulesオブジェクトのnameとcontentプロパティで、検証ルールを定義します。
- name：名前フィールドは必須で、2 文字以上 4 文字以下でなければなりません。
- content：内容フィールドは必須で、1 文字以上 30 文字以下でなければなりません。
これらの検証ルールが設定されると、入力フィールドが指定された基準を満たさない場合、フォームにエラーメッセージが表示されます。

フォーム検証エラー表示