こんにちは。ケリーの姉です。 Vue.jsの入門書を読み始めたので、その学習のアウトプットを行っていきます。 ※学んだことをつらつらと書いているだけなので、読みにくいところもあると思います。あらかじめ、ご了承ください。

なんでVue.js？

結論から言うと「現場で使っているから」です。さらに細かく言うと「現場で使っていて、独学で既存のコードを読み解いて修正等を加えるところまでの技術はあるが、【１から立ち上げる】ことができないから」です。１から立ち上げることができなければ、「こういうことしたいなぁ」という顧客の希望に対して「Vueならここまでできますよ！」という提案もできませんし、【設計】となると絶望的です。なので、はじめてみました。それだけです。

Vue.jsの特徴について

HTML、CSS、JavaScriptの基本。これらが読めないと、Vueの学習は厳しいです。逆に、知っていればすぐに入っていけます。

基礎を学べば、あとは必要に応じてNode.jsなどのツール、VueRouterなどのライブラリとの連携を学ぶことで高度なWebアプリケーションを作成することが可能です。

Vueアプリケーション開発の方法

Vue.jsでWebアプリを作る方法としては、

①scriptタグでローカルまたはCDNのフレームワークにリンクする方法 ②Node.jsをベースにツールを組み合わせて開発する方法

があります。複雑なWebアプリを使うなら、Node.jsをベースにする方法ですが、 Vue.jsの入門書を読んでるレベルの姉は、Nodeの知識がほぼゼロです。なので、ローカル環境でも手軽に実行できるscriptタグでリンクする方法で学習していきます。 Nodeの学習はその後の話です。

学習に必要なもの

①ＰＣ（これがなくっちゃ何もできない） ②エディタ（何でもいいけれど、使いやすさではVusual Studio Codeがオススメ） ③ネット環境（これがなくっちゃ何もできない）

Hello! Vue,js World!!を作ってみよう

さぁ、学習に必要なものを揃えたら、技術入門の王道である「Hello! World!」を表示させるものを作りましょう。今回はVue.jsにちなんで「Hello! Vue,js World!!」を表示させます。

まずはHTML側。ファイル名は「sample1.html」

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <title>Hello! Vue.js World</title>
</head>

<body>
    <div id="app">
        <h1>{{ msg1 }}</h1>
        <p>ようこそ{{ msg2 }}の世界へ。</p>
    </div>
    <!--Vue.jsを読み込む-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!--sample1.jsを読み込む-->
    <script src="./js/sample1.js"></script>
</body>

</html>

中括弧で囲まれている部分が、次に記述するJSで動的に置き換わります。なお、scriptファイルがbodyタグの最後で読み込まれているのは、 scriptを読み込んだ時点でid="app"の要素がないと、動作がうまく動かないためです。 読み込み順、大事

そしてJavaScript側。ファイル名は「sample1.js」

var app = new Vue({
    el: '#app',
    data: {
        msg1: 'Hello!Vuejs!!World',
        msg2: 'Vue.js'
    }
});

一見すると？って感じですが、 el→dataの適用範囲 data→置き換える変数名とその内容として考えておいてください。

ちょっとした疑問

sample1.jsで「app」という変数にnew演算子で生成したVueインスタンスを代入していますが、変数名はelで指定したID名にしなくてはいけないのか？と疑問に思いましたが、入門書に答えがきっちり書いてありました。

まず、変数名は自由に設定してＯＫです。サンプルとして、「app」や「vm」(view modelの略)が多く使われているとのこと。

さらに言うと、プログラム内でVueインスタンスを確認する必要がなければ、変数に代入しなくてもＯＫだそうです。

 new Vue({
    el: '#app',
    data: {
        msg1: 'Hello!Vuejs!!World',
        msg2: 'Vue.js'
    }
});

※これだけでもＯＫ

ファイルの配置

Vue.jsの読み込みはネットにつながっていれば問題ありませんが、 sample1.jsの読み込みは、html側に記述した場所に配置しないと読み込まれません。私はjsというフォルダを作ってsample1.jsを配置しましたが、ここはお好みでどうぞ。

実行してみよう

実行方法は「sample1.html」を起動するだけ。ちなみに、姉のブラウザはGoogle Chromeです。

ほい、html側にあるmsg1とmsg2が、sample1.jsで定義したものに置き換わっていますね！成功です！

無事にHello！Worldをクリアできたので、次はこれをベースにクリックイベントや入力処理を学んでいきます。

では、今回はこの辺で。

ケリーの姉の技術ブログ

ケリーの姉が仕事で学んだ技術に関するアウトプットを行うブログです。たまにゲームの作成秘話なんかも

Vue.jsの入門書を読み始めた話　その１