開催の勉強会の説明資料その2です。その1は、Vue.jsでフォームバリデーションをつくろう!ー環境構築編ーです。内容を分割、アップデートしたものです。10.15.1インストール済みのライブラリnode.jsv13.1.0npm6.12.1単一ファイルコンポーネントの記述方法について実装に入る前に単一ファイルコンポーネントついて説明します。単一ファイルコンポーネントは、Vueプロジェクトにおける拡張子が.vueのファイルのことを指します。タグで構成されています。*/</style>各タグの役割については下記の通りです。templateHTMLの記述箇所。HTMLのテンプレートエンジンのPUGを導入することも可能。scriptJavaScriptの記述箇所。TypeScirptを導入することも可能。styleCSSの記述箇所。つけることで、styleをコンポーネント内に閉じ込めることができる。PostCSSやLess、Sass、Scss、Stylusを導入することも可能。単一コンポーネントのタグの順序に関しては、公式ガイドの単一ファイルコンポーネントのトップレベルの属性の順序を参照ください。完了ページを作っていきます。こちらの項目は、Vue.jsよりもvue-routerの話が中心です。ファイルを追加src/views/にDone.vueを作成し、下記を記述します。scoped></style>ボタンリンクの追加Aboutページにボタンリンクを追加し、リンクが遷移できるように設定します。src/views/のAbout.vueに下記を記述します。</div></template>templeteボタンリンクを追加しました。リンクに用いている<router-link>は、ルーターを使用しているアプリケーションにリンクを追加できるタグです。デフォルトで、<a>タグとhrefで描画されます。value="done">done</button></router-link>下記のようにブラウザに描画されます。Routerを参照ください。現時点で先程作成したボタンリンクをクリックしても、真っ白なページが表示されます。これは本来のSPAでは、パスを存在しないためです。そのため、前述で作成したsrc/views/Done.vueをrouter/index.jsに設定します。routerpath:作成したページのpathを設定name:ルートを特定するための名前を設定(なくてもOK)component:表示するファイルを記述ここまで設定が完了すると、/aboutにあるボタンリンクをクリックで画面が遷移し、設定した文字が表示されます。ここからアンケートをつくる準備を進めていきます。ファイルを作成し、下記を記述します。子という関係になります。Vue.jsは単方向のデータフローのため、親と子の間でデータをやり取りする際には宣言が必要です。子から親へデータを渡す際はカスタムイベントを用います。タグとして使用します。アンケートという文字列を親から子に渡しています。scriptcomponentsのオプション内にQuestionnaireをコンポーネントとして定義しています。フォームを作り、入力した値をバインディングする処理を追加します。v-modelの詳細は、公式ガイドのv-modelを参照ください。アプリケーションで使用するデータを記述します。dataの詳細は、公式ガイドのdataを参照ください。現時点ではこのような状態かと思います。前述でsrc/views/About.vueにて作成したボタンリンクですが、使用しないため下記箇所を削除します。value="done">done</button></router-link>フォームのバリデーションを設定フォームから選択が外れた際にバリデーションチェックを行う処理を実装します。今回はTwitterIDのフォームに追加します。TwitterIDの条件は、ユーザー名の登録のヘルプを参照すると...ユーザー名の長さは15文字までです。名前は50文字までですが、ユーザー名は使いやすいように短くなっています。ユーザー名には英数字(文字A~Z、数字0~9)しか含めることはできません。上記のとおりアンダースコア(_)は例外です。希望するユーザー名に、記号やダッシュ、スペースが含まれていないことを確認してください。上記の通りのため、下記の2つをエラーを表示する条件として追加します。イベントによってページがリロードされないイベント修飾子です。v-on:changeは、カスタムイベントの一種で変更を取得することができます。アプリケーションで使用するメソッドを指定します。処理の分割やイベントハンドラなどを記述します。ここまでの記述を該当ファイルに追加すれば、完成です🎉TwitterIDのフォームに半角英数字以外や15文字以上を入力した状態でフォームの選択を外して、下記の挙動が再現されます。このアンケートフォームにはいろいろな機能が足りていません。ここからカスタマイズをして、自分なりの最高のUIのアンケートを実装してみてください!その他のオプション今回は使用していませんが、Vue.jsを理解する上で重要なオプションをご紹介します。computed任意のデータを処理を返す算出プロパティ。内の算出プロパティを参照ください。watch特定のデータや算出プロパティの状態を監視、データの変化で処理を実行するプロパティ。内のウォッチャを参照ください。さいごにここまで頑張ってフォームのバリデーションを実装しましたが、世の中にはかんたんにバリデーションを設定できる素晴らしいライブラリが提供されています。vuelidateVeeValidateこれらを使えば、よりよいUXのフォームバリデーションをスムーズに開発ができます。本当にいい時代に生まれました。他にも、Vue.jsにはたくさんのサポートライブラリがあり、いろんなことが実現できる環境が整っています。今回のハンズオンでは、Vue.jsの中でも一部機能にしか触れておりません。m.manami@matsumana07384フロントエンド/UIUX/サービスデザイン/ソフトウェアテストなどいろんなことに興味がある雑食エンジニアです。※こちらに投稿する記事は個人の意見であり所属団体とは関係ありません。upLoginユーザーは見つかりませんでした。