未分類 – ページ 5 – サイゼントの技術ブログ

2021年10月26日

Vue.js：componentでpropsを使って属性を受け取る

Vue.jsでは、componentを使用して独自タグを定義することができます。
これは部品化に役立ちます。

独自タグではslotタグにより値を受け取ることができますが、propsプロパティを用いて属性値を受け取ることもできます。
属性値はテンプレート構文で使用できるため、dataプロパティ等と組み合わせて柔軟なDOM操作が可能になるメリットがあります。
また、今回は紹介しませんが、propsプロパティでは必須チェックやデフォルト値設定やバリデーションも実装できるので、それらの機能を実装してより便利に使うこともできます。

以下、サンプルコードです。
propsプロパティを用いることで、テンプレート構文での使用が可能になっていること（{{ }}で囲った箇所への埋め込みが可能になっていること）に注目してください。

【サンプルコード】

・sample1.html（propsプロパティを使わない例）

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - sample1＜/title＞
＜/head＞
＜body＞

＜h1＞タイトル表示テスト＜/h1＞
＜div id="app"＞
  ＜my-component＞hoge＜/my-component＞
  ＜my-component＞fuga＜/my-component＞
  ＜my-component＞piyo＜/my-component＞
＜/div＞
＜h5＞※これらのタイトルはVue.jsで出力しています＜/h5＞

＜script src="https://unpkg.com/vue"＞＜/script＞
＜script＞
Vue.component('my-component', {
  // バッククォートで囲ってHTMLを直接記述。slotの箇所に値埋め込み。
  template: `＜h3＞タイトル：＜slot＞＜/slot＞＜/h3＞`
});

// Vueオブジェクトの生成
var app = new Vue({
  el: "#app"
});
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞Vue.js - sample1＜/title＞

＜/head＞

＜body＞

＜h1＞タイトル表示テスト＜/h1＞

＜div id="app"＞

＜my-component＞hoge＜/my-component＞

＜my-component＞fuga＜/my-component＞

＜my-component＞piyo＜/my-component＞

＜/div＞

＜h5＞※これらのタイトルはVue.jsで出力しています＜/h5＞

＜script src="https://unpkg.com/vue"＞＜/script＞

＜script＞

Vue.component('my-component', {

// バッククォートで囲ってHTMLを直接記述。slotの箇所に値埋め込み。

});

// Vueオブジェクトの生成

var app = new Vue({

el: "#app"

});

＜/script＞

＜/body＞

＜/html＞

・sample2.html（propsプロパティを使う例）

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - sample2＜/title＞
＜/head＞
＜body＞

＜h1＞タイトル表示テスト＜/h1＞
＜div id="app"＞
  ＜my-component title="hoge"＞＜/my-component＞
  ＜my-component title="fuga"＞＜/my-component＞
  ＜my-component title="piyo"＞＜/my-component＞
＜/div＞
＜h5＞※これらのタイトルはVue.jsで出力しています＜/h5＞

＜script src="https://unpkg.com/vue"＞＜/script＞
＜script＞
Vue.component('my-component', {
  // シングルクォートで囲ってテンプレート構文を記述。属性値を受け取る。
  data: function () {
    return {
      titleHeader: "タイトル："
    }
  },
  props: ［'title'］,
  template: '＜h3＞{{ titleHeader }}{{ title }}＜/h3＞'
});

// Vueオブジェクトの生成
var app = new Vue({
  el: "#app"
});
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞Vue.js - sample2＜/title＞

＜/head＞

＜body＞

＜h1＞タイトル表示テスト＜/h1＞

＜div id="app"＞

＜my-component title="hoge"＞＜/my-component＞

＜my-component title="fuga"＞＜/my-component＞

＜my-component title="piyo"＞＜/my-component＞

＜/div＞

＜h5＞※これらのタイトルはVue.jsで出力しています＜/h5＞

＜script src="https://unpkg.com/vue"＞＜/script＞

＜script＞

Vue.component('my-component', {

// シングルクォートで囲ってテンプレート構文を記述。属性値を受け取る。

data: function () {

return {

titleHeader: "タイトル："

}

props: ［'title'］,

});

// Vueオブジェクトの生成

var app = new Vue({

el: "#app"

});

＜/script＞

＜/body＞

＜/html＞

【実行結果】

sample1.html、sample2.html共に、以下のように表示されます。

いかがでしたでしょうか。

componentについては前回の記事で触れましたが、実務でcomponentを使うのであればpropsもほぼセットで覚える必要があります。
前回の記事ではcomponentを使わない場合と使う場合、今回の記事ではpropsを使わない場合と使う場合をなるべく簡単な例で比較していますので、理解の助けになれば幸いです。

2021年10月19日

Vue.js：componentで独自タグを定義する

Vue.jsの重要な機能の一つとして、componentという機能が存在します。
これは部品化に役立ちます。

この機能を利用することで、独自にタグを定義できるようになり、冗長な記述を減らすことができます。
例えば、今回はサンプルコードとしてsample1.htmlとsample2.htmlを用意していますが、sample1.htmlでは同じようなdivタグの記述が続くのに対し、sample2.htmlはdivタグの記述を独自のmy-componentタグにまとめることで同じような記述が続くのを防ぐことができています。

【サンプルコード】

・sample1.html

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - sample1＜/title＞
  ＜style＞
  .my-button {
    background-color: #ccc;
    text-align: center;
    border: 3px solid #000;
  }
  ＜/style＞

＜/head＞
＜body＞

＜div id="app"＞
  ＜div class="my-button" v-on:click="func1"＞
    ＜strong＞機能：＜/strong＞挨拶
  ＜/div＞
  ＜div class="my-button" v-on:click="func1"＞
    ＜strong＞機能：＜/strong＞ハローワールド
  ＜/div＞
＜/div＞

＜script src="https://unpkg.com/vue"＞＜/script＞
＜script＞
// Vueオブジェクトの生成
var app = new Vue({
  el: "#app",
  methods: {
    func1: function() {
      alert('Hello World!')
    }
  }
});
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞Vue.js - sample1＜/title＞

＜style＞

.my-button {

background-color: #ccc;

text-align: center;

border: 3px solid #000;

}

＜/style＞

＜/head＞

＜body＞

＜div id="app"＞

＜div class="my-button" v-on:click="func1"＞

＜strong＞機能：＜/strong＞挨拶

＜/div＞

＜div class="my-button" v-on:click="func1"＞

＜strong＞機能：＜/strong＞ハローワールド

＜/div＞

＜script src="https://unpkg.com/vue"＞＜/script＞

＜script＞

// Vueオブジェクトの生成

var app = new Vue({

el: "#app",

methods: {

func1: function() {

alert('Hello World!')

}

});

＜/script＞

＜/body＞

＜/html＞

・sample2.html

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - sample2＜/title＞
  ＜style＞
  .my-button {
    background-color: #ccc;
    text-align: center;
    border: 3px solid #000;
  }
  ＜/style＞

＜/head＞
＜body＞

＜div id="app"＞
  ＜my-component＞挨拶＜/my-component＞
  ＜my-component＞ハローワールド＜/my-component＞
＜/div＞

＜script src="https://unpkg.com/vue"＞＜/script＞
＜script＞
// コンポーネント定義（"my-component"という独自タグを作成）
// templateのslotタグにはmy-componentタグで与えられた値が挿入される
Vue.component('my-component', {
  template: `
  ＜div class="my-button" v-on:click="func1"＞
    ＜strong＞機能：＜/strong＞
    ＜slot＞＜/slot＞
  ＜/div＞
  `,
  methods: {
    func1: function() {
      alert('Hello World!')
    }
  }
});

// Vueオブジェクトの生成
var app = new Vue({
  el: "#app"
});
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞Vue.js - sample2＜/title＞

＜style＞

.my-button {

background-color: #ccc;

text-align: center;

border: 3px solid #000;

}

＜/style＞

＜/head＞

＜body＞

＜div id="app"＞

＜my-component＞挨拶＜/my-component＞

＜my-component＞ハローワールド＜/my-component＞

＜/div＞

＜script src="https://unpkg.com/vue"＞＜/script＞

＜script＞

// コンポーネント定義（"my-component"という独自タグを作成）

// templateのslotタグにはmy-componentタグで与えられた値が挿入される

Vue.component('my-component', {

＜div class="my-button" v-on:click="func1"＞

＜strong＞機能：＜/strong＞

＜slot＞＜/slot＞

＜/div＞

methods: {

func1: function() {

alert('Hello World!')

}

});

// Vueオブジェクトの生成

var app = new Vue({

el: "#app"

});

＜/script＞

＜/body＞

＜/html＞

【実行結果】

実行結果はsample1.htmlとsample2.htmlで同じです。
以下のように２つの部品が出てきます。

部品をクリックするとポップアップが表示されます。

この記事では紹介しませんが、componentの記述を外部ファイルに切り出すことも可能です。
外部ファイルに切り出すことで、同じ部品（component）を複数ファイルで利用することができるようになります。

なお、現在はhtmlファイルをChromeで開いて実行していますが、外部ファイルのimportを行う場合はこの方法での実行は困難です。
（セキュリティ対策のため）
外部ファイルのimportの実行を試すには、Vue CLIでサーバを立てる等の対応が必要になります。

いかがでしたでしょうか。

componentの機能は冗長性を排除するために必要であり、実務での使用頻度も高いです。
Vue.jsを実務で使用するのであれば、早めに覚えておきたい機能の一つです。

2021年1月8日

Vue.jsインストール手順とHelloWorld(Windows、2020年12月)

Vue.jsとは、JavaScriptのGUIのフレームワークです。
MVVM(Model-View-ViewModel)を採用しており、画面(View)と内部状態(Model)を分離して画面の制約にとらわれないようにすることで、画面で入力された内容をリアルタイムに内部状態に反映させたり、内部状態の変化をリアルタイムに画面に出力したりすることができます。
この特徴により、画面をリッチにすることができます

今回は、WindowsOSのPCにインストールし、実行確認をする手順を掲載します。
実行確認の「Hello World」に関しては色々書き方がありますが、今回はMVVMの良さを実感できる書き方で「Hello World」を試します。

■前提

・OS

Windows8.1

・実施日

2020年12月30日

・Vue.jsのバージョン

2.6.12

■インストール手順

１．Vue.jsの公式サイトにアクセスする。

https://jp.vuejs.org/index.html

２．「はじめる」を左クリックする。

３．「インストール」を左クリックする。

４．「開発バージョン」を右クリックし「名前を付けてリンク先を保存」をクリック。

※FireFoxの場合。リンク先はjsファイルなので、ブラウザの機能でファイルとして保存する。

５．任意のフォルダにvue.jsを保存。

※今回は”C:\tmp”に保存。

■実行確認（Hello World）手順

１．”vue.js”を保存したフォルダに、”hello.html”という名前のファイルを作成する。

２．「hello.html」に下記を入力して保存。

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - Hello world!＜/title＞
＜/head＞
＜body＞

＜div id="app"＞
  ＜input type="checkbox" id="checkbox1" v-model="checked1"＞
  ＜label for="checkbox1"＞
    {{ message }}
  ＜/label＞
＜/div＞

＜script src="./vue.js"＞＜/script＞
＜script＞
  var app = new Vue({
    // elで指定した値はdivタグのidと対応
    el: '#app',
    // 変数の初期値定義
    data: {
      message: '',
      checked1: false
    },
    // 変数の値を監視するイベントを定義
    watch: {
      checked1: function(newVal, oldVal) {
        this.message = (newVal) ? 'Hello World!' : '';
      }
    }
  })
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞Vue.js - Hello world!＜/title＞

＜/head＞

＜body＞

＜div id="app"＞

＜input type="checkbox" id="checkbox1" v-model="checked1"＞

＜label for="checkbox1"＞

＜/label＞

＜/div＞

＜script src="./vue.js"＞＜/script＞

＜script＞

var app = new Vue({

// elで指定した値はdivタグのidと対応

el: '#app',

// 変数の初期値定義

data: {

message: '',

checked1: false

// 変数の値を監視するイベントを定義

watch: {

checked1: function(newVal, oldVal) {

this.message = (newVal) ? 'Hello World!' : '';

}

})

＜/script＞

＜/body＞

＜/html＞

３．「hello.html」をブラウザから開く。

※今回はChromeで開きます。

初期状態では以下のように何も表示されませんが

チェックボックスをチェックすると「Hello World!」と表示されます。
ボタンをクリックしてイベントを飛ばしたり、リロードしたりすることなく、画面で変更された内部状態をリアルタイムに画面上に反映することができています。

いかがでしたでしょうか。

今回はHelloWorldのみでしたが、これだけでもVue.jsの便利さを実感できたのではないかと思います。
Vue.jsは日本語の公式ドキュメントも充実しているため、その意味でもお勧めのフレームワークです。

2020年7月18日

趣味としてのプログラミングの楽しさ

こんにちは！
技術ブログで記事を書かせていただいている伊東です。

今回は一休みということで、趣味としてのプログラミングの楽しさについて語っていきたいと思います。

プログラミングが趣味と言うと、一握りのギーク（卓越した技術を持つコンピュータ好き）だけが楽しめる趣味なのではと思われるかもしれません（私もそう思ってました）が、そうではありません。初心者からでも楽しむことができる趣味です。
初心者でもブログ等で記事を発信することができますし、身の回りのことでちょっとしたプログラムを作ると便利になったりもします。

私の例ですが、以下のように休日もプログラミングを楽しんでいます。

１．ブログを通した情報発信

私は、このブログと、もう少し軽めの記事を扱う個人ブログの２つのブログを持っています。

個人ブログの方では、開発していてつまづいたエラーとその対処法を書くだけの簡単な記事も備忘録代わりに載せていますが、そのような記事にも他の記事と変わらないくらいのアクセス数が来ています。
エラーとその対処法を載せるだけなら初心者でもできます（むしろ初心者の方がそういった記事は書きやすいかもしれません）。
自分がつまづいた箇所は他の人もつまづく箇所なので需要はあります。
自分が書いた記事が他の人のためになると思うと、ブログを書くのが楽しくなります。

また、ある程度スキルを積むと、そのスキルをどう後進に伝えるのかが課題になりますし、自然に後進に伝えたくなる人も少なくないと思います。
スキルを伝える手段としては研修や現場での指導がありますが、研修では期間が決められていますし、現場では同じ現場に居る人にしかスキルを伝えられません。
しかし、ブログであれば、研修期間外でも、同じ現場に居なくても、それこそ社外の人にもスキルを伝えることができます。
これも他の人のためになることですし、ブログを書くモチベーションになると思います。
仮に誰も読まなかったとしても、誰かに読んでもらうことを前提に記事を書こうと思うと適当なことは書けないので、自ずと理解を深めるために勉強することになります。
これが、自分のスキルを更に伸ばす上で大事なことになります。

２．身の回りのプログラミング

身の回りのことで、ちょっとしたプログラムを作ると便利になることが少なくありません。
例えば、買い物（欲しい物や持っている物のリスト）やイベントの運営（抽選や集計）等でプログラムを作ると便利です。

私の場合は、趣味でオンラインのゲームのイベントの運営をすることがあり、そこで一緒に組む人の抽選や結果の集計をプログラム化しています。
プログラム化しているおかげで、早くてスムーズな運営ができておりますし、参加者の方々からも感謝されています。
抽選や集計をするだけなら初心者でも手が出せるのでお勧めです。

また、少しハードルは上がりますが、他の人も使うような機能であれば、ツールとして提供することもできます。
ツールとして提供すれば、自分と関わりのないゲームをしている方々に使ってもらえることもあり、広く貢献することができます。

ここまで趣味としてのプログラミングの楽しさについて語ってきましたが、一番大事なのは自分のPCに開発環境を入れることだと思います。
自宅のPCに開発環境が入ると色々試したくなると思います。
少なくとも私は、自宅に開発環境を入れてから、趣味でもプログラミングをしたいと自然に思うようになりました。

開発環境と言われると、開発業務用のすごいPCにすごい人が入れてくれるもの、という印象を持つかもしれませんが、そうではありません。
普通に量販店で売られているPCにも開発環境を入れることはできますし、開発環境を入れるための手順もWeb上に上がっています。
（初めて開発環境を入れるのであれば、Pleiades All in One の JDK(Java) の環境を入れるのがお勧めです）
プログラミングの経験や興味があるけど開発環境をまだ入れていないという方、是非とも入れてみて下さい！