今日もメモをのこそう

あとでみるメモ代わり

Vue3 ディレクティブについて学ぼう（v-on）

Vue プログラム勉強中 初心者

今回は「v-on」について学ぼうと思います。

例のごとく公式ドキュメントが一番詳しく書いてあります。
そちらの内容を少しかみ砕くという形です。

基本の流れ

「v-on」はボタンクリック等のイベントに対応して実行されます。
ボタンクリックの例で考えてみます。

<div id="basic-event">
  <button v-on:click="クリック時の実施内容">ボタン名</button>
</div>

上記の書き方と同様。
<div id="basic-event">
  <button @click="クリック時の実施内容">ボタン名</button>
</div>

「クリック時の実施内容」は別途自分で定義した関数を定義するのが通常。
以下のようなことをするとエラーになる（alertのダイアログはでない）
※Vueでmountした範囲の情報しか取れない？

<div id="basic-event">
  <button @click="v-on:click="regist">ボタン名</button>
</div>

クリック以外にもDOMのイベントレベルで拾えるようですね。
Vueのドキュメントには「event」しか書いてなかったので。
DOMのevent一覧はwikiからでも参照

クリック時の関数の作り方

クリックしたときに、定義した関数を実行できると記載したが、どうやって関数を定義するのか？ということを確認すると 以下のように、オプションとして定義することが可能。
サンプルとして以下のような登録ボタンを考えると

(HTML側)
<div id="regist">
  <button class="button is-primary" v-on:click="regist">Regist</button>
</div>
(javascript側)
const regist = {
    methods : {
        regist() {
            console.log('click regist')
        }
    }
}
Vue.createApp(regist).mount('#regist');

詳細は、公式ページのDataについて記載されてるページを参照してください。

ちょっとはまったこと

以前の記事でプルダウンを作成したので、クリックするとプルダウンの中身が変わるようなものを作ってみようと思う。
（ダメパターン）

(HTML)
<div class="select">
  <select id="categorys">
    <option v-for="category in categorys" v-bind:value="category.value">
      {{ category.name }}
    </option>
  </select>
</div>
<div id="regist">
  <button class="button is-primary" v-on:click="regist">Regist</button>
</div>
(Javascript)
const categorys = {
    data() {
        return {
            categorys: [
                { name: 'category1', value: 1 },
                { name: 'category2', value: 2 },
                { name: 'category3', value: 3 }
            ]
        }
    }
}
Vue.createApp(categorys).mount('#categorys');

const regist = {
    methods: {
        regist() {
            this.categorys = [
                { name: 'modify1', value: 1 },
                { name: 'modify2', value: 2 },
                { name: 'modify3', value: 3 }
            ]
        }
    }
}
Vue.createApp(regist).mount('#regist');

Vueは挙動的に、Vue.createAppごとにデータを別途持っている？ぽくてデータの書き換えができなかった。
実施する場合は以下のようにするとできた。
（成功パターン）

(HTML)
<div id= "regist">
  <div class="select">
    <select id="categorys">
      <option v-for="category in categorys" v-bind:value="category.value">
        {{ category.name }}
      </option>
    </select>
  </div>
  <button class="button is-primary" v-on:click="regist">Regist</button>
</div>
(Javascript)
const regist = {
    data() {
        return {
            categorys: [
                { name: 'category1', value: 1 },
                { name: 'category2', value: 2 },
                { name: 'category3', value: 3 }
            ]
        }
    },
    methods: {
        regist() {
            // console.log(this);
            this.categorys = [
                { name: 'modify1', value: 1 },
                { name: 'modify2', value: 2 },
                { name: 'modify3', value: 3 }
            ]
        }
    }
}
Vue.createApp(regist).mount('#regist');

一つにまとめないといけないっぽい？ここら辺はもう少し調べたら追記するかも。

Vue3 ディレクティブについて学ぼう（v-bind）

Vue プログラム勉強中 初心者

Vue3を使う上で、たくさんある「ディレクティブ」*1は避けて通れない。
ということで今回は「v-bind」について学びます。

詳細は公式ドキュメントが一番詳しく書いてあります。
そちらの内容を少しかみ砕きます。

基本の流れ

「v-bind」はHTML要素に埋め込むときに使います。

<div v-bind:id="dynamicId"></div>

これはVue3の基本である{{xxxxx}}はHTMLタグ内には書くことができないから。
v-bindをしらずにVue3触ると、以下のように書きたくなっちゃいますが動きません。

<div id = {{dynamicId}}></div>
使い方
  • 属性値を動的にする場合
<div v-bind:属性値="{割り当てる値}"></div>

例えば、idに割り当てたい場合は以下とする。

<div v-bind:id="dynamicId"></div>

この状態で、javascript側でdynamicIdに値を渡すと、書き換わる。
たとえば、dynamicId = 'sampleId'とかにすると以下になる

<div id="sampleId"></div>
  • 属性値も動的にする場合

属性値もを、javascript側で動的にすることもできる。

<div v-bind:[ここに割り当て名を入れる]="好きな値"></div>

例としては以下のような感じ。

<div v-bind:[attribute] = 'value'></div>

javascriptで以下のようにすると、以下のようになる。 attribute=class
value = dynamicType

<div class="dynamicType"></div>

すこしハマったこと 属性値も指定できる方式について「属性値を指定できる」と勘違い。
以下の例だと、値は指定している「value」のまま動かないと思ってしまった。

そのため、以下のようなサンプルを動かそうとしたとき

  <div id="v-bind-sample">
    <div v-bind:[attribute]="value"></div>
  </div>

javascript側でずっと以下の属性値しか指定しないということをしてしまった。

const dynamicType = {
    data() {
        return {
            attribute : 'class'
        }
    }
}
Vue.createApp(dynamicType).mount('#v-bind-sample');

これだと、エラーになってしまってうまく動かない。
もちろん正しくは、以下のようにvalueも指定する形。

const dynamicType = {
    data() {
        return {
            attribute : 'class',
            value : 'dynamicType'
        }
    }
}
Vue.createApp(dynamicType).mount('#v-bind-sample');

*1:ザックリ解説：プログラムが解釈するための独自記述のようなもの。今回はVue3用の独自記述のこと

Vue3 プルダウンを作ってみる

Vue プログラム勉強中 初心者

Vue3をもちいて今日はプルダウンを作ってみる。
基本は、javascript側で定義した内容をプルダウンの結果として使う。

今回のオチ
（HTML側）
                <select id="categorys">
                  <option
                  v-for="category in categorys" 
                  v-bind:value="category.value">
                  {{ category.name }}
                </option>
                </select>
（javascript側）
const categorys = {
    data() {
        return {
            categorys: [
                { name: 'category1', value: 1},
                { name: 'category2', value: 2},
                { name: 'category3', value: 3}
            ]
        }
    }
}
Vue.createApp(categorys).mount('#categorys');
作成までの流れ
  1. 成功したフォームをイメージする。

今回の成功系イメージ（超簡単なプルダウン）

<select>
    <option value="1">category1</option>
    <option value="2">category2</option>
    <option value="3">category3</option>
</select>

  1. 必要な要素を確認
    ・ 繰り返しが必要な要素
    optionタグ。<option></option>
    ・ 動的な指定が必要な部分1
    optionのvalue。<option value="ココ"></option>
    ・ 動的な指定が必要な部分2
    optionの表示部分。<option>ココ</option>

  2. 実際に書いてみる と、上記のオチと同じ状態になる。

うまくいかなかったこと

javascript側のマウントするときに、optionにつけちゃえばいいんじゃないか？と以下のように手を抜いた。

                <select>
                  <option
                  id="categorys"
                  v-for="category in categorys" 
                  v-bind:value="category.value">
                  {{ category.name }}
                </option>
                </select>

そうすうと、うまく動かない。
javascript側で指定する場合、一つ上の階層の要素（今回であればoptionに適用したいので、optionの上のselect）にあてないといけなかった。

Vueの勉強をしよう　～2:使ってみよう (Vue基本編) ～

Vue プログラム勉強中 初心者

Vueをインストールしたのであれば実際に使ってみよう。
（基本的にはCDNでインストールしていることを想定しています。）
今回はVueを使う場合の考え方と、基本パターンを記載することにします。

今回の大事なこと

Vue.jsは、「どの要素」に「何」を割り当てるのかを指定できることが大事。
基本パターンとしては、以下の形式で記載する。

Vue.createApp('1:何を割り当てるか').mount('2:割り当てる場所')
1: 割り当てる情報はVue独自のルールがある  
2: 割り当てる場所は、CSSセレクタと同様。

この内容を意識してサンプルを理解してみる。

Hello Worldを出してみる

HTMLとJSファイルをそれぞれ分割して書くとこんな感じです。

HTML

  <div id="helloWorld">
    {{ message }}
  </div>

javascript

const HelloWorld = {
    data() {
        return {
            message: 'Hello World'
        }
    }
}
Vue.createApp(HelloWorld).mount('#HelloWorld');

const HelloWorldがVue用の割り当て情報となっています。
{{message}} が割り当て対象となります。Vueでの割り当て対象は{{}}で囲われた文字列が対象となります。*1
'#HelloWorld'は、CSSのセレクタ上 id="HelloWorld"で指定された箇所を示します。

なので、上記は以下の流れをやってることになると思います。

  • id="HelloWorld"で囲われたエリアの
  • messageを
  • 「Hello World」にかきかえる

今回は、こんな流れで基本的な値の割り当てを確認しました。
次回以降はもう少し細かいパターンで確認していきたいと思います。

*1:{{}}のことをMustache(口ひげのこと)と呼ぶこともあります

Dockerについてすごく浅い理解

Docker 初心者

今日はDockerのお勉強をしようと思います。
あまり詳しくせずに、ざっくり浅い理解のまま環境構築をしていきます。
※Docker Desktopのインストールは割愛します。

今回のオチ

Dockerは結局のところ仮想環境が構築できるツール。
構築した環境の管理が簡単かつ軽い。
docker runでコンテナを作るところまで実行。

Dockerってなんだ？

Dockerについてなんてネットにものすごく記事があるので、すごく浅い理解としては以下となる。

仮想化環境を構築するためのツール。
似たツール（VirtualBoxなど）はあるが、仕組みが異なり効率的に管理ができる。

じゃあ、仮想環境をDockerで作ろう、となるんですが
ざっくり構築に必要なDocker用語を書きます。
ですが、正確な説明ではありません。　あくまでもそのようなイメージとなります。

用語 おおよそのイメージ
コンテナ Dockerで作った仮想環境
Dockerイメージ コンテナを作るための材料＋レシピ
Dockerfile Dockerイメージを作るためのレシピ
DockerHub Dockerイメージをクラウド上で共有するサービス。
基本はここからイメージを取得する

結局のところ、動くのは「コンテナ」。なのでコンテナを作ることがゴール。
→では、どうやってコンテナを作るのかというと、「Dockerイメージ」からつくる。
　→「Dockerイメージ」はDockerHubから取得する、もしくはDockerfileから作成する。
　　※Dockerfileはここでは関係ないかも。

Dockerを使って環境構築してみる

Dockerで環境構築する場合は、大きく分けて以下のコマンドが必要となる。
※逆に言うと構築に必要な最低限のコマンドはたった二つでOK。

  1. Dockerイメージを取得するためのコマンド
    DockerイメージをDockerHubから取得する or Dockerfileから作る,のいずれかのコマンドを実行する。
  2. Dockerイメージからコンテナを作るコマンド
1. Dockerイメージを取得するためのコマンド
  • DockerHubからDockerイメージを取得する場合
    この時に必要なのは、「pull」というコマンドです。
    docker pull 「イメージ名」というコマンドになります。
    イメージ名は、Docker Hubから欲しいイメージを見つけおきます。
    今回は「node」の最新版*1としてみます。
docker pull node

これを実施するとImageの取得が完了。Docker Desktopで確認が可能。

  • DockerイメージをDockerfileから作る場合（Dockerfileの中身は別の記事で書くので読み飛ばしでもOK） Dockerfileからの構築は「docker build」です。
    Dockerfileがある場所で、以下コマンドを打つ。
    -t は、作ったイメージに名前を付けています。node_testのところは好きな名前を付けてください。
    ※つけなくても実行可能ですが、名前を付けてあげないとDocker Desktopから確認ができないので。
docker build -t node_test .
2. Dockerイメージからコンテナを作るコマンド

正確に言うと、「Dockerイメージからコンテナを作って実行する」までを一気にしてくれるコマンドがあります。
それが、「docker run」です。

docker run -d --name {コンテナの名前}-it {利用するイメージ}

各種オプションについては基本的に割愛します。調べてみていただければと思うのですがいったんはこういうもんという認識でもよいと思いいます。
-d : バックグラウンドで実行
-i : -interactiveの略。コンテナプロセスの標準入力を開いたままにする -t : --ttyの略。ttyを割り当ててる
-it : -iと-tの組み合わせ。コンテナに対してコマンドの入出力を可能にします。

docker run のオプションは正直よくわからないですが、個人開発をする、ということであれば
そこまで種類はなさそうなので、いったんは丸暗記するのもありです。

*1:イメージ名にオプションをつけることでバージョンを指定もできます

Vueの勉強をしよう　～1:インストール編～

初心者 プログラム勉強中 Vue

はじめに

Vueのインストールは、公式ページが一番詳しく書いてあります。
今回はその中で個人的に引っかかったところをメモします。

実行環境については、別記事にてまとめているのでそちらを参照ください。
基本的にはNodeのver16となります。

今回のオチ
Vue.jsを学ぶ場合、インストール方法CDNとして取り込む方法がベターだと思います。

<script src="https://unpkg.com/vue@next"></script>

新しいことを学ぶとき一番大事なのはモチベーションが大事だと思ってます。
モチベーション維持には動く環境が必須だと思うんですよね。
今回の選択肢で、一番手軽なのがCDNだと思うのでこちらがベターという結論にしました。
動かしてみてVue.jsって面白いってなってから、CLIをいじろうかなという感じですね。

Vueのインストール方法

公式サイトから引用すると、インストール方法は以下の4つ。
何が違うのかわからないので、それぞれのメリットをさらっと記載します。

  1. ページ上で CDN パッケージ として取り込む
  2. JavaScript ファイルをダウンロードして、 自分でホストする
  3. npm を使ってインストールする
  4. 公式の CLI を使ってプロジェクトの基礎を作る
「ページ上で CDN パッケージ として取り込む」場合

Vue.jsを入れたいHTMLにいかを書くだけ

<script src="https://unpkg.com/vue@next"></script>

メリット

  • シンプルに簡単かつ、すぐ導入できる。
  • 動作を確認する場合は、こちらを使うほうが良い。

デメリット

  • Vue.jsのウリである「SFCs（単一ファイルコンポーネント）」が使えない。 （最初は意識しなくてもいいかも）
  • CDN先のURLが使えない場合（上記だとunpkg.com）、使えなくなってしまう
「JavaScript ファイルをダウンロードして、 自分でホストする」場合

これは、ファイルをDLして自分のサーバ（PC）に配置して読み込む方法。
ほとんどCDNと同じ。

<script src="./vue.global.js"></script>

メリット

  • シンプルに簡単かつ、すぐ導入できる。
  • 動作を確認する場合は、こちらを使うほうが良い。
  • ファイルがダウンロード済みなので、CDN先のURLが関係ない。

デメリット

  • Vue.jsのウリである「SFCs（単一ファイルコンポーネント）」が使えない。 （最初は意識しなくてもいいかも）
「npm を使ってインストールする」場合

マニュアルによるとこちらがおすすめらしいが、最初のVue.jsのきっかけとしては微妙と思われる。

npm install vue@next
npm install -D @vue/compiler-sfc

メリット

  • Node環境があれば簡単に導入できる。
  • すべての機能が利用できる
  • カスタマイズもできる

デメリット

  • webpack 等のVue.js以外の知識が必要

webpack等の内容を理解する時間を考えると、Vue.jsを初めて勉強をするとしたら
導入方法として適当とは言えないと思う。

「公式の CLI を使ってプロジェクトの基礎を作る」場合

Vue.jsを使ったサンプル画面までを表示するところまでを自動でやってくれるツールです。
将来的にはこちらを使いたいですが、、あまりにもいろいろな要素が詰まっているので勉強の導入には向いていないと思ってます。

npm install -g @vue/cli

メリット

  • Node環境があれば簡単に導入できる。
  • Webサーバの準備からwebpackまで全部やってくれる
  • カスタマイズもできる

デメリット

  • CLIで実施してる内容がわからない。

Vueの勉強をしよう - 0:開発環境選択編 -

Vue プログラム勉強中 初心者

突然ですが、Vueの勉強をしようと思い立ちました。
ということで、そのための準備、環境構築をやっていきたいと思います。

今回のオチ
結論から言うと、Dockerを使った環境構築を実施しました。
実際に使ったDockerfileも下記に記載しときます。

    FROM node:16
    EXPOSE 8888
    RUN apt update &&  \
    apt -y  upgrade && \
    apt install net-tools && \
    apt install -y vim && \
    apt install -y locales && \
    sed -i 's/# ja_JP.UTF-8 UTF-8/ja_JP.UTF-8 UTF-8/g' /etc/locale.gen && \
    locale-gen && \
    update-locale LANG=ja_JP.UTF-8 && \
    mkdir -p /root/program

ここから下は、なぜ上記の結論に至ったのか個人的なメモを以下の流れで記載します。

開発環境とは？

開発環境とは、今回はプログラムの実行環境のことを指します。
選択肢はいろいろありますが、基本的には以下と思っています。

  1. サーバを借りて作る（例：さくらインターネット等）
  2. クラウドサービスをつかって作る（例：AWS、Azure等）
  3. ローカル環境に作る
  4. ローカル環境に仮想環境*1を使って作る

正直どれでもいいと思います。
明確に違うのは、1,2は何かしらの費用が発生するということ。
次は開発環境で何をしたいのか、ということを考えてみます。

開発環境に何を求めてるんだろう・・

開発環境で自分が確認したいことって何だろう、と思うと結局は
「プログラムを作って動かしてみたい」
ということだけできれば問題ない、という結論に達しました。

それを踏まえると、費用が発生しない以下の二つに絞りました。

  • ローカル環境に作る
  • ローカル環境に仮想環境を使って作る

ここからは好みなんですが、数年前に巷で「Docker」なるものが流行っているということを聞きました。
これを使うと、簡単に環境が構築できるということ。
「簡単」という言葉は魅力です。この時点で仮想環境はDockerにすること決めます。

比較すると以下の点が違うかなという印象。

環境 学習コスト 管理しやすさ
ローカル環境 〇 ×
ローカル環境＋Docker × 〇

Dockerを知らないので学習にかかる時間は、ローカル環境に軍配が上がります。
ですが、管理のしやすさを考えると、Dockerを使うと複数の環境を簡単に作ったり消したりできるらしいです。

勉強は続いていく（予定）で、Vueだけで終わらせる、ということではありません。
今後は、別の言語の学習のため別の開発環境を構築することも出てくると思います。

じゃあこれにしよう！

ということで、今回は「ローカル環境＋Docker」を開発環境にすることに決めました。
ちょこっとDockerについてしらべて、Vue用の環境は上記Dockerfileで構築することに決めました。 ※Dockerを調べるうえでのメモもこちらに残す予定。

最後に

「ローカル環境＋Docker」が最高だぜ！ということでは全くありません。
人や目的によって、最適な開発環境があります。 私はこのような葛藤の末、Dockerを使うことにしたというだけです。

プログラムを動かすのは、誰にでもできますし楽しいと思ってます。
だけど、動かすための準備って大変だなと改めて思いました。

*1:PC上に仮想的にもう一つ別のPCを作る。これをするとWindowsの中にLinuxを入れたりできる