きっかけ 単純にconfug情報だけを変えたらdeployまで自動的に行ってくれると勘違いしていました。 その試行錯誤録です。 アプリ自体はFirebase Authenticationログインだけを実装。 firebase deploy で楽チン！と思っていたのが間違いの始まり。 Firebaseコンソールで時間を確認すると 「えっ、最新リリース履歴の時間が違うぞ！」 結論だけ知りたい方はこちらからどうぞ！ 試行錯誤 ここで調査 「firebase-tools」が必要とgoogle先生が教えてくれたので npm install -g firebase-tools 再度、デプロイ、そして実行 auth/user-not-found 「あれ？」 （まだだ大事な事に気づいていない） firebase init、必要かな？ いつも通りやってみる firebase init ? What do you want to use as your public directory? distを指定 他は、特に変わりなく。 ただ、ここでターミナルのログで firebase use --add をおすすめされたかな？ そのままやってみる ? Which project do you want to add? ? What alias do you want to use for this project? (e.g. staging) そのままリターン＆staging （これアカンやつ） こういう時はfirebaseを構成するjsonファイルが重要だ！ ひらめきが冴える。 firebasesrcを確認 先程の ? What alias do you want to use for this project? (e.g. staging) にて default と入力し、firebasesrcの変更を確認。 npm run build firebase deploy でなんとか解決！ ここで問題 最初にデプロイした時に、元のプロジェクトの内容が・・・ なのでロールバックで戻す。 結論 ターミナルのログをよく見ないといけないと大反省。 今後もよくある作業だと思うので、ここに記録として残しておきます。

概要 propsで親componentから子componentにObjectを渡すときの型を、interfaceで指定する方法。 方法 type: Object as () => SampleType, のようにinterfaceを返すメソッドを指定する。 実装例 <template> <div id="sample-button"> <button class="m-3 btn btn-sm btn-primary" @click="clickChildComponent"> SampleButton </button> </div> </template> <script lang="ts"> import Vue from "vue"; import SampleType from "@/types/SampleType"; export default Vue.extend({ name: "sample", props: { sample: { // SampleTypeというinterfaceをメソッドにして指定する type: Object as () => SampleType, required: true, } }, methods: { clickChildComponent(): void { console.log(this.sample); } }, }); </script> 参考 Using a Typescript interface or type as a prop type in VueJS Vue.jsでObject型のPropsにTypeScriptの型を割り当てる

環境 Vue.js 2.6.11 Rails 6.1.3 修正する部分 質問の解決ステータスを表すステータスブロックと回答数が周りに比べて少し遅れて表示されてしまっています。 このままだと少し気持ち悪いので同タイミングで表示されるように修正します。 また、ページネートの< >もちらついているのでそれも解消しようと思います。 構成 質問カードの構成は、 QuestionBase.vue ---QuestionCommetnsCount.vue ---QuestionStatus.vue とステータスブロックと回答数の部分は周りに対して子要素となっています。 また、ステータス部分の判定は、 ①axiosでそれぞれの質問にベストアンサーがあるかをaxiosで取得 ②あればbestAnswerに代入、なければエラーに分岐 ③v-ifでbestAnswerがあれば解決済み、なければ回答受付中を表示 となっています。 QuestionStatus.vue <template> <div> <div v-if="bestAnswer" > 解決済 </div> <div v-else> 回答受付中 </div> </div> </template> <script> import axios from "axios"; export default { props: ["question"], data: function () { return { bestAnswer: "", }; }, created() { axios .get(`/api/v1/bestanswer/${this.question.id}`) .then((response) => { this.bestAnswer = response.data; console.log(response.data); }) .catch((error) => { console.log(error); }); }, }; </script> なぜ表示タイミングがずれているのか ライフサイクルを確認してみます。 親要素のmountが終わってから、子要素のcreatedが始まっているのが確認できました。 これが原因で表示の時間差が起こっているようです。 解決方法 周りに比べて表示が遅れる emitを使って、子要素のcreatedが終わったタイミングで親要素にそれぞれtrueを渡しています。 両方揃ったタイミングで、同時にレンダリングされるようになります。 またここで、v-ifを使うとそもそも子要素のcreatedが行われず表示がされなくなるので注意です。 QuestionCommetnsCount.vue <script> ... created() { axios.get(`/api/v1/comments_count/${this.question}`).then((response) => { this.count = response.data; this.$emit("count", true); }); </script> QuestionStatus.vue <script> ... created() { axios.get(`/api/v1/bestanswer/${this.question.id}`).then((response) => { this.bestAnswer = response.data; this.$emit("status", true); }); </script> QuestionBase.vue <template> <div v-show="count && status"> ... </template> ステータスが表示されてから切り替わる 質問ステータスが、解決済のものも一瞬「解答受付中」が表示されてから「解決済」に切り替わっていました。 これに関しても、上記の解決方法と同様にaxiosに this.create = true を仕込んでおき <div v-if="create"> としておけば解決です。

環境 Vue.js 2.6.11 Rails 6.1.3 修正する部分 質問の解決ステータスを表すステータスブロックと回答数が周りに比べて少し遅れて表示されてしまっています。 このままだと少し気持ち悪いので同タイミングで表示されるように修正します。 また、ページネートの< >もちらついているのでそれも解消しようと思います。 構成 質問カードの構成は、 QuestionBase.vue ---QuestionCommetnsCount.vue ---QuestionStatus.vue とステータスブロックと回答数の部分は周りに対して子要素となっています。 また、ステータス部分の判定は、 ①axiosでそれぞれの質問にベストアンサーがあるかをaxiosで取得 ②あればbestAnswerに代入、なければエラーに分岐 ③v-ifでbestAnswerがあれば解決済み、なければ回答受付中を表示 となっています。 QuestionStatus.vue <template> <div> <div v-if="bestAnswer" > 解決済 </div> <div v-else> 回答受付中 </div> </div> </template> <script> import axios from "axios"; export default { props: ["question"], data: function () { return { bestAnswer: "", }; }, created() { axios .get(`/api/v1/bestanswer/${this.question.id}`) .then((response) => { this.bestAnswer = response.data; console.log(response.data); }) .catch((error) => { console.log(error); }); }, }; </script> なぜ表示タイミングがずれているのか？ ライフサイクルを確認してみます。 親要素のmountが終わってから、子要素のcreatedが始まっているのが確認できました。 これが原因で表示の時間差が起こっているようです。 解決方法 周りに比べて表示が遅れる emitを使って、子要素のcreatedが終わったタイミングで親要素にそれぞれtrueを渡しています。 両方揃ったタイミングで、同時にレンダリングされるようになります。 またここで、v-ifを使うとそもそも子要素のcreatedが行われず表示がされなくなるので注意です。 (内部の子要素も動作しないため) QuestionCommetnsCount.vue <script> ... created() { axios.get(`/api/v1/comments_count/${this.question}`).then((response) => { this.count = response.data; this.$emit("count", true); }); </script> QuestionStatus.vue <script> ... created() { axios.get(`/api/v1/bestanswer/${this.question.id}`).then((response) => { this.bestAnswer = response.data; this.$emit("status", true); }); </script> QuestionBase.vue <template> <div v-show="count && status"> ... </template> ステータスが表示されてから切り替わる 質問ステータスが、解決済のものも一瞬「解答受付中」が表示されてから「解決済」に切り替わっていました。 これに関しても、上記の解決方法と同様にaxiosに this.create = true を仕込んでおき <div v-if="create"> としておけば解決です。

１.はじめに 大学入学後に「進路再考」という理由で休学・退学する学生を数多く見てきました。 入学前に抱いていたイメージとのギャップに苦しむ学生は一定数いるようです。 また、退学とまではいかなくても、４年間「何か違うな。。。」と感じながら大学生活を送るのはあまりにも勿体ないです。 受験生に後悔のない進路選択をして欲しい。 知名度や偏差値以外の判断材料を提供したい。 そんな願いを込めて、今回アプリケーションを開発しました。 使用技術は、LaravelとVue.jsです。 2.何を作ったのか 簡潔に述べると、各大学の定める「ディプロマポリシー」・「カリキュラムポリシー」・「アドミッションポリシー」を検索できるアプリを作りました。 「は？何それ？」と思われた方が大半だと思います。 私も大学関係者になってから知りました。 実はこのポリシーこそが進路選択の際に非常に役に立ちます。 受験生の皆さんにも是非知っていただき、進路選択の判断材料にしていただきたいです。 アプリのトップ画面はこんな感じです。 3.各ポリシーについての説明 ポリシーについて興味を持ってくださった方のために、簡単に説明させていただきます。 文部科学省の「三つのポリシーの策定と運用に係るガイドライン」によると、それぞれ以下のように定義づけられています。 引用元：https://www.mext.go.jp/b_menu/shingi/chukyo/chukyo4/015/attach/1365326.htm ディプロマポリシー 各大学がその教育理念を踏まえ，どのような力を身に付ければ学位を授与するのかを定める基本的な方針であり，学生の学修成果の目標ともなるもの。 卒業するために必要な能力を示しています。 裏を返せば、卒業に必要な単位を揃えることで身に付く能力を示していると言えます。 カリキュラムポリシー ディプロマ・ポリシーの達成のために，どのような教育課程を編成し，どのような教育内容・方法を実施するのかを定める基本的な方針。 各年次でに何を学ぶか、という内容を示しているパターンが多いです。 アドミッションポリシー 各大学が，当該大学・学部等の教育理念，ディプロマ・ポリシー，カリキュラム・ポリシーに基づく教育内容等を踏まえ，入学者を受け入れるための基本的な方針であり，受け入れる学生に求める学習成果（学力の3要素※）を示すもの。 ※（1）知識・技能，（2）思考力・判断力，表現力等の能力，（3）主体性を持って多様な人々と協働して学ぶ態度 簡単に言うと、大学側がどういう人を求めているか、ということを示しています。 4.３つのポリシーを把握するメリット ポリシーを把握しておくことで得られるメリットは以下のとおりです。 ①卒業までに習得できる能力を逆算できる。 ②カリキュラムがどのように進行するか知ることで、進学後の勉強がイメージできる。 ③大学側が求める人物像を知ることで、自身に合っているかの判断ができる。 受験生側が上述の３点を把握しておくことで、大学とのミスマッチを防ぐ効果が期待できます。 5.アプリケーションの機能について 前置きが長くなりました。 当アプリの機能についてご紹介させていただきます。 ポリシーを検索することに特化したアプリとなっておりますので、機能は少なめです。 主な機能をリストアップするとこんな感じです。 機能一覧 ログイン機能（Laravel Auth） 大学の検索機能 ポリシーの表示機能 お気に入り追加機能（Ajax） お気に入り削除機能（Ajax） ご指摘・ご意見等投稿機能（formrun使用） 以下、特にご紹介したい点のみ補足します。 大学検索機能 以下の5つの項目から大学・学部・学科を検索することができます。 ①大学名 ②地方 ③都道府県 ④学びたい分野 ⑤国公立or私立 条件を掛け合わせて検索することも可能です。 ↓↓実際の画面 お気に入り機能 ポリシーの表示画面でハートマークを押すと、お気に入りに追加できます。 お気に入りに追加したデータは、お気に入り画面からいつでも確認することができます。 また、追加したデータは、いつでも削除できます。 ポリシーを比較したい時にも有効です。 ご指摘・ご意見等投稿機能 ゲスト以外でログインした場合に使用することができます。 自作することも考えましたが、簡単かつ安全に利用できる外部のサービスを使用しております。 各学部のポリシーは、学部再編やカリキュラム改訂などで変更になる場合がありますので、 もし気づいた方がいれば、フォームから教えてくださいという願望を込めて設置しております。 もちろん、「この箇所をこうして欲しい！！」といったご意見も大歓迎です。 ↓↓実際の画面 これを無料で使えるのは正直驚きですね。。ありがとうございます。 6.工夫点 ①一部機能を制限したゲスト機能を実装 当アプリケーションは、受験生が使用することを前提に開発いたしました。 高校生に限った話ではないですが、訳のわからんサイトに登録するのは抵抗がありますよね。 私が高校生の頃は架空請求などが流行っていたりして、登録系のサイトは怖くて使用できませんでした。 しかし、サービスは使ってもらえないと価値がないです。 そこで、気軽に使っていただけるよう、ゲストログイン機能を実装しました。 ②スマホで見ることを想定してレスポンシブ化 高校生がスマホで使用することを想定して、レスポンシブデザインにはかなり気を配りました。 勉強の合間とかで使ってくれたらなぁと思います。 ③利用規約の設置 個人的に、利用規約がないサービスは恐ろしくて手を出せません。 また、トラブル発生時に備えて、責任の所在を明確にしておくことは必要不可欠です。 素人が作ったサービスだからこそ、もしもに備えて設置しました。 ④SPA開発 ユーザーの快適さを追求して、SPA開発に挑戦しました。 スイスイ動くので気持ちが良いですね。 ほぼ全ての処理をJavaScript（Vue.js）で書き、SPA対応にしました。 (認証系はLaravelに素晴らしいモノが備わっているため、そちらに任せました。) 7.今後の課題 ①私立大学に対応させる。 現在、国公立大学にしか対応しておりません。 というのも、使えそうなapiがなく、大学のデータを集める作業は全て手作業でやっております。 （おそらくこの作業が一番時間がかかったと思います。） 今後は私立大学も実装していきたい所存です。 ②テストのカバレッジをあげる。 テストコードについて、現在勉強中です。 テストを想定して作っていなかったので、苦戦しています。 テストを想定して開発する重要性を身をもって体感しました。 良い勉強になりました。 8.おわりに 最後までご覧いただきありがとうございました。 当サービスは既にデプロイ済みですので、どなたでもご利用いただけます。 URLを置いておきますので、使っていただけると幸いです。 ご意見などをいただけるととても嬉しいです。 「大学ポリシー検索ツール」　https://univpolicy.net

１.はじめに 大学入学後に「進路再考」という理由で休学・退学する学生を数多く見てきました。 入学前に抱いていたイメージとのギャップに苦しむ学生は一定数いるようです。 また、退学とまではいかなくても、４年間「何か違うな。。。」と感じながら大学生活を送るのはあまりにも勿体ないです。 受験生に後悔のない進路選択をして欲しい。 知名度や偏差値以外の判断材料を提供したい。 そんな願いを込めて、今回アプリケーションを開発しました。 使用技術は、LaravelとVue.jsです。 2.何を作ったのか 簡潔に述べると、各大学の定める「ディプロマポリシー」・「カリキュラムポリシー」・「アドミッションポリシー」を検索できるアプリを作りました。 「は？何それ？」と思われた方が大半だと思います。 私も大学関係者になってから知りました。 実はこのポリシーこそが進路選択の際に非常に役に立ちます。 受験生の皆さんにも是非知っていただき、進路選択の判断材料にしていただきたいです。 アプリのトップ画面はこんな感じです。 3.各ポリシーについての説明 ポリシーについて興味を持ってくださった方のために、簡単に説明させていただきます。 文部科学省の「三つのポリシーの策定と運用に係るガイドライン」よると、それぞれ以下のように定義づけられています。 引用元：https://www.mext.go.jp/b_menu/shingi/chukyo/chukyo4/015/attach/1365326.htm ディプロマポリシー 各大学がその教育理念を踏まえ，どのような力を身に付ければ学位を授与するのかを定める基本的な方針であり，学生の学修成果の目標ともなるもの。 卒業するために必要な能力を示しています。 裏を返せば、卒業に必要な単位を揃えることで身に付く能力を示していると言えます。 カリキュラムポリシー ディプロマ・ポリシーの達成のために，どのような教育課程を編成し，どのような教育内容・方法を実施するのかを定める基本的な方針。 各年次でに何を学ぶか、という内容を示しているパターンが多いです。 アドミッションポリシー 各大学が，当該大学・学部等の教育理念，ディプロマ・ポリシー，カリキュラム・ポリシーに基づく教育内容等を踏まえ，入学者を受け入れるための基本的な方針であり，受け入れる学生に求める学習成果（学力の3要素※）を示すもの。 ※（1）知識・技能，（2）思考力・判断力，表現力等の能力，（3）主体性を持って多様な人々と協働して学ぶ態度 簡単に言うと、大学側がどういう人を求めているか、ということを示しています。 4.３つのポリシーを把握するメリット ポリシーを把握しておくことで得られるメリットは以下のとおりです。 ①卒業までに習得できる能力を逆算できる。 ②カリキュラムがどのように進行するか知ることで、進学後の勉強がイメージできる。 ③大学側が求める人物像を知ることで、自身に合っているかの判断ができる。 受験生側が上述の３点を把握しておくことで、大学とのミスマッチを防ぐ効果が期待できます。 5.アプリケーションの機能について 前置きが長くなりました。 当アプリの機能についてご紹介させていただきます。 ポリシーを検索することに特化したアプリとなっておりますので、機能は少なめです。 主な機能をリストアップするとこんな感じです。 機能一覧 ログイン機能（Laravel Auth） 大学の検索機能 ポリシーの表示機能 お気に入り追加機能（Ajax） お気に入り削除機能（Ajax） ご指摘・ご意見等投稿機能（formrun使用） 以下、特にご紹介したい点のみ補足します。 大学検索機能 以下の5つの項目から大学・学部・学科を検索することができます。 ①大学名 ②地方 ③都道府県 ④学びたい分野 ⑤国公立or私立 条件を掛け合わせて検索することも可能です。 ↓↓実際の画面 お気に入り機能 ポリシーの表示画面でハートマークを押すと、お気に入りに追加できます。 お気に入りに追加したデータは、お気に入り画面からいつでも確認することができます。 また、追加したデータは、いつでも削除できます。 ポリシーを比較したい時にも有効です。 ご指摘・ご意見等投稿機能 ゲスト以外でログインした場合に使用することができます。 自作することも考えましたが、簡単かつ安全に利用できる外部のサービスを使用しております。 各学部のポリシーは、学部再編やカリキュラム改訂などで変更になる場合がありますので、 もし気づいた方がいれば、フォームから教えてくださいという願望を込めて設置しております。 もちろん、「この箇所をこうして欲しい！！」といったご意見も大歓迎です。 ↓↓実際の画面 これを無料で使えるのは正直驚きですね。。ありがとうございます。 6.工夫点 ①一部機能を制限したゲスト機能を実装 当アプリケーションは、受験生が使用することを前提に開発いたしました。 高校生に限った話ではないですが、訳のわからんサイトに登録するのは抵抗がありますよね。 私が高校生の頃は架空請求などが流行っていたりして、登録系のサイトは怖くて使用できませんでした。 しかし、サービスは使ってもらえないと価値がないです。 そこで、気軽に使っていただけるよう、ゲストログイン機能を実装しました。 ②スマホで見ることを想定してレスポンシブ化 高校生がスマホで使用することを想定して、レスポンシブデザインにはかなり気を配りました。 勉強の合間とかで使ってくれたらなぁと思います。 ③利用規約の設置 個人的に、利用規約がないサービスは恐ろしくて手を出せません。 また、トラブル発生時に備えて、責任の所在を明確にしておくことは必要不可欠です。 素人が作ったサービスだからこそ、もしもに備えて設置しました。 ④SPA開発 ユーザーの快適さを追求して、SPA開発に挑戦しました。 スイスイ動くので気持ちが良いですね。 ほぼ全ての処理をJavaScript（Vue.js）で書き、SPA対応にしました。 (認証系はLaravelに素晴らしいモノが備わっているため、そちらに任せました。) 7.今後の課題 ①私立大学に対応させる。 現在、国公立大学にしか対応しておりません。 というのも、使えそうなapiがなく、大学のデータを集める作業は全て手作業でやっております。 （おそらくこの作業が一番時間がかかったと思います。） 今後は私立大学も実装していきたい所存です。 ②テストのカバレッジをあげる。 テストコードについて、現在勉強中です。 テストを想定して作っていなかったので、苦戦しています。 テストを想定して開発する重要性を身をもって体感しました。 良い勉強になりました。 8.おわりに 最後までご覧いただきありがとうございました。 当サービスは既にデプロイ済みですので、どなたでもご利用いただけます。 URLを置いておきますので、使っていただけると幸いです。 ご意見などをいただけるととても嬉しいです。 「大学ポリシー検索ツール」　https://univpolicy.net

今回の記事は下記の方におすすめです！ Laravelの基礎はOK Vue.jsの基礎はOK でもLaravelでVue.jsサンプルを使う方法が不明 自分でゴリゴリコードを書くのもありですが、最初のうちは「Vue.js」のサンプルをLaravelのサイトに埋め込むところから始めるのはありかもしれません。 今回は、「Vue.js」のサンプルが多数紹介されている海外のサイトを紹介しつつ、サンプルを実際の自分のプロジェクトに埋め込む方法について共有いたします！ 今回の記事が参考になれば幸いです なお、間違いやご指摘ありましたら、コメント下さると幸いです。 実行環境 PHP 7.4 Laravel 6.2 Vue.js 2.5 ゴール Laravelのアプリ内でvue.jsのサンプルを実装する ちゅうい！！ なお、Vue.jsがコンパイルできる環境が構築されている前提で話を進めていきます。 まだの方は、下記の記事の1)~4)を完了させ、「npm run dev」でコンパイルできる状態にしてください。 コンパイルまでの参考記事：【初心者向】Laravel 6系でVue.jsを使用する方法 laravel/uiパッケージをインストール 「composer require laravel/ui:^1.0 --dev」 vue.jsのファイル生成 「php artisan ui vue」 依存パッケージのインストール 「npm install」 js/sassファイルのコンパイル実行 「npm run dev」 ココまで↑は最低限実行しておいてください。詳細は上記記事にて。 Vue.jsサンプルサイト ちなみに下記のサイトではVue.jsを使ったサンプルがまとめられています 「スクロール」や「ポップアップ」など便利な部品が多数まとめられているので、是非一度目を通してみてください。 サンプルまとめサイト：Vue.js Examples ↑こんな感じで、サンプルによっては、Gif動画形式で、挙動を確認できるので、イメージしやすいかと思います。 今回埋め込むサンプル「scroll」 今回は、「スクロール」をLaravelサイトに埋め込んでいこうと思います。画面をスクロールすると、画面上部緑の進捗バーが進捗します。 今回Laravelで使用するサンプル：scroll progress bar ↓緑のバーが進捗 手順 Vue.jsサンプルをインストール Laravelと紐付ける インストールしたVue.jsサンプルをコンパイル １）Vue.jsサンプルをインストール npm i vue-scroll-progress --save まず、パッケージをインストールします。上記コマンドで「node_modules」ディレクトリ以下に「vue-scroll-progress」がインストールされるかと思います。 この時点でエラーが出た方は、ご自分の開発環境のバージョンとサンプルのバージョンが競合している可能性があるので、競合しなさそうな（エラーにならない）ものをサンプルサイトから探してみてください。 2）Laravelと紐付ける ただインストールしただけでは使用できません。 Laravelのアプリ側からは、見えていないからですね。 そこでLaravelのアプリ側が認識してくれる場所に 「この機能を使いますよー」宣言をします。 具体的に言うと、「resources/js/app.js」ファイルへの追記ですね。 import VueScrollProgress from 'vue-scroll-progress'; Vue.use(VueScrollProgress); 「resources/js/app.js」ファイルに上記の記述を追加してください。 resources/js/app.js // （省略） require('./bootstrap'); window.Vue = require('vue'); // 以下２行追加 import VueScrollProgress from 'vue-scroll-progress'; Vue.use(VueScrollProgress); // （省略） Vue.component('example-component', require('./components/ExampleComponent.vue').default); 「import」の意味がわからない方はこちらの記事を参考にしてみてください。 参考：jsのimportとrequireの違い 参考：JavaScriptのimportとは？ 機能ごとに分割したjsファイルを、読み込んで利用する＝インポートするイメージです。 3）インストールしたVue.jsサンプルをコンパイル npm run dev 上記コマンドでコンパイルを実行すると... 進捗バーが表示されました！ （ちょっとわかりにくいけど、一番上の緑のボーダーですね） 応用事例 これを応用すれば、ユーザーが入力するフォーム画面で 進捗を表示することで、途中での離脱を防ぐ効果なんかも得られそうですね 今回は、「app.js」ファイルに記述しましたが、読み込みたい部分で 部品として使うこともできるようですよ。 <template> <VueScrollProgress></VueScrollProgress> </template> 今回の記事は以上になります お役に立てたなら幸いです！！ 参考 たった３ステップ！Laravelでnpmパッケージを使う方法

はじめに こんにちは。 データバインディングについてアウトプットしていきます！ データバインディングとは データバインディング（データバインド、データ結合）は、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことである。 参照：ウィキペディア 簡単に言うと、データと画面表示を同期する仕組みで、片方を変更するともう片方も変更される。 テキストのデータバインディング ※Vue.jsを使用する際は、公式ドキュメントのCDNなどであらかじめ読み込んでおく。 HTML <div id="app"> {{ message }} </div> Vue.js var app = new Vue({ el: '#app', data: { message: 'Hello!' } }) Vue.js側で、画面に表示させるデータを定義。 マスタッシュ構文{ }で、データを格納した変数名messageをHTMLのdivタグ内に記述する。 出力結果はHello!となる。 属性のデータバインディング HTML <div id="app"> <input type="text" v-bind:value="message"> </div> Vue.js var app = new Vue({ el: '#app', data: { message: 'Hello!' } }) 属性に対してデータバインディングを行いたい場合は、v-bindディレクティブを使用する。 入力欄にHello!が出力される。 双方向データバインディング HTML <div id="app"> <p> <input type="text" v-model="message"> </p> <p> <input type="text" v-model="message"> </p> </div> Vue.js var app = new Vue({ el: '#app', data: { message: 'Hello!' } }) 双方向データバインディングを行いたい場合は、v-modelディレウティブを使用して、データの値とテンプレートの値を双方向に変更する。片方のテキストボックスの値を変更すると、動的にもう片方の値も変更される。 最後に ここまでデータバインディングについてまとめました。 今回初めてディレクティブについて触れたので、他のものについてもまとめていきたいと思います！