{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"120932f2-28cf-5e37-aaba-6aee6eea5714","html":"

本来Vue.js(以下Vue)は、JavaScriptによるコンポーネントベースのアプリケーション構築が得意です。
\n特に状態管理によるUIの切り替えが完結にかけるので、非常に強力です。
\nしかし、このように話すと難しいのではという印象がありますが、
\nReactなどと違い、実は非常に簡潔に、わかりやすくコードが書けるように設計されています。

\n

\n \n \n \n \n \n \n \n強力なVueの機能

\n

簡単な例で説明します。
\n以下のようにJavaScriptでA,B,CそれぞれがtrueかfalseかをもつBooleanを定義したとします。

\n
data: {\n  isA: true,\n  isB: false,\n  isC: false,\n}
\n

それをチェックボックスのdataに紐付けます。
\nv-modelというのがVue特有のデータとHTMLを紐付ける仕組みです。

\n
<input type=\"checkbox\" v-model=\"isA\" />\n<input type=\"checkbox\" v-model=\"isB\" />\n<input type=\"checkbox\" v-model=\"isC\" />
\n

そうすると以下のコードを書くだけで、
\nA,B,Cのいずれかがチェックされると表示するようになります。
\nv-ifという属性がデータのboolean値により表示を切り替える仕組みです。

\n
<div v-if=\"isA\">Aが表示されました。</div>\n<div v-if=\"isB\">Bが表示されました。</div>\n<div v-if=\"isC\">Cが表示されました。</div>
\n

このように、動的に変化する値に応じて、UIを変えることが非常に簡単に実現できます。

\n

\n \n \n \n \n \n \n \n最も簡単な導入方法

\n

この記事では、既存サイトでも最も簡単に導入できるCDN(コンテンツデリバリネットワーク)方式を説明します。
\nステップは以下です。

\n
    \n
  1. head内にVue.jsを挿入
    2. \n
  2. Vueを使いそうな箇所にidを設定
    3. \n
  3. 自分で用意したJavaScript内でVueを実行
    4. \n
  4. v-cloakを設定する
    5. \n
\n

\n \n \n \n \n \n \n \nhead内にVue.jsを挿入

\n

本番サイトを想定して、最新の固定バージョン(2019/8/15日最新バージョン2.6.10)のvueをhead内で読み込ませます。
\n最新のバージョンや開発バージョンを使いたい場合は公式サイトを参考にしてください。

\n
2.6.10の部分を最新バージョンにしてください
\n
  <script src=\"https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js\"></script>\n</head>
\n

合わせて、Vueを使うためのJavaScriptファイルをbodyの最後で読み込みます。
\n名前は仮にyour-js-file.jsとしています。

\n
  <script src=\"./your-js-file.js\"></script>\n</body>
\n

\n \n \n \n \n \n \n \nVueを使いそうな箇所にidを設定

\n

指定する要素の中にHTMLが存在していても問題ないです。
\nよくわからなければ、bodyにidを設定しましょう。

\n
<div id=\"app\">\n  <p>ここに既存のHTMLが存在していても問題ありません</p>\n</div>
\n

\n \n \n \n \n \n \n \n自分で用意したJavaScript内でVueを実行

\n

先程用意したyour-js-file.jsでVueを実行しましょう。
\nHTML内からVueの機能を使うには、このnew Vueの中にデータを記述する必要があります。
\n参考として、先程のdataを記述しています。

\n
new Vue({\n  el: \"#app\",\n  data: {\n    isA: true,\n    isB: false,\n    isC: false,\n  }\n})
\n

\n \n \n \n \n \n \n \nv-cloakを設定する

\n

そのままだと、HTML内のVueの機能を使った箇所が一瞬そのままレンダリングされてしまいます。
\n例えば、ブラウザ表で一瞬{{ isA }}とそのまま表示され、その後すぐにtrueに切り替わります。
\nこれを防ぐために、Vueが用意しているv-cloak属性を利用して、JavaScriptが読み込まれるまで要素を非表示にします。
\nここでは、上で付与したid=\"app\"の箇所にv-cloakを設定しました。

\n
<div id=\"app\" v-cloak>\n</div>
\n

CSSの記述も必要です。
\n既存のCSSに追加するか、CSSファイルを作成し、head内で読み込ませましょう。

\n
[v-cloak] {\n  display: none;\n}
\n

以上で完了です。

\n

これからJavaScriptを学びたいといった方も、Vueの強力な機能を使いながら、少しづつ勉強してくと楽しいかと思います。
\nHappy coding JavaScript!

","fields":{"slug":"/2019-08-15_たった4ステップでVueを使う方法/"},"tableOfContents":"","frontmatter":{"date":"2019.08.15","title":"たった4ステップでVueを使う方法","cover":"","category":"Coding","excerpt":"実はVue.jsは、JavaScript初学者でも簡単に導入できるような仕組みがあります。この記事では、Vue.jsの強力な特徴と、導入するには何をしたらいいのかを説明します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"120932f2-28cf-5e37-aaba-6aee6eea5714","next":{"path":"/2019-07-23_かわいいファミコン風CSSライブラリNEScss/","title":"かわいいファミコン風CSSライブラリNES.css","category":"Coding"},"prev":{"path":"/2019-08-21_ブラウザで機械学習が実行できるml5jsを試してみる/","title":"ブラウザで機械学習が実行できるml5jsを試してみる","category":"Coding"},"relatedPosts":[{"id":"b24fa0f2-8884-5053-9f12-a2dbc1ab9fc6","fields":{"slug":"/2019-09-17_p5-jsをreactのコンポーネントとして実行する方法/"},"frontmatter":{"title":"p5.jsをReactのコンポーネントとして実行する方法","date":"2019-09-17T07:53:50.970Z","excerpt":"p5.jsを直接ページ内に読み込ませるのではなく、Reactなどのコンポーネントの中で実行する方法をコードベースでご紹介します。","templateKey":"post","category":"Coding","propertags":["p5js","react"],"commontags":["component","javascript"]}}]}}