Vue.jsに出てくるコロン(v-bind)とアットマーク(v-on)について

Vue.jsのコードに時折コロン(:)やアットマーク(@)が出てきて戸惑う人がいるかもしれませんが、これは省略記法です。
それぞれ、v-bind、v-onを指しています。

Vueオブジェクトの変数や関数をHTML側から参照するために、v-bindやv-onを使用します。

以下、サンプルコードです。

【サンプルコード(v-bind)】

【実行結果(v-bind)】

以下のように、Vueオブジェクトの変数の値とHTMLを結びつけることができます。

【サンプルコード(v-on)】

【実行結果(v-on)】

以下のように、Vueオブジェクトの関数を呼び出すことができます。
これは、ボタン1とボタン2の両方で同じ動きになります。


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

省略記法は公式チュートリアルにて説明されていますが、忘れた時に実務で出くわすと戸惑うと思います。
“:”は”v-bind”、”@”は”v-on”、というのは覚えておくと良いでしょう。

JavaScriptのasync・awaitのサンプルコード

JavaScriptでは、通常は非同期処理となり、重い関数が終わるまで待つということをせず、次の関数に先に制御が移ってしまいます。
そのため、API呼び出しやIO(ファイルの読み書きやDBの読み書き)を伴う関数を呼び出した後に、その結果を元に次の処理を行う、というフローを行うためには一工夫必要です。

これを簡単に書くために、JavaScriptにはasync/awaitという文法が用意されています。
この記事では、非同期処理のサンプルコードと、async/awaitを用いて同期処理にするサンプルコードを用意しているので、そのサンプルコードを読めば使い方は理解できると思います。

async/awaitを使う上での注意点として、promiseやresolveとセットで使う必要があるという点があります。
これをセットで使用しないと、同期処理にならない、待った後の処理が実行できない、等のバグになります。
async/awaitはpromiseオブジェクトを簡単に扱うための文法でもあるので、promiseについては別途Webで調べるとより理解が深まると思います。

【サンプルコード(非同期処理)】

【処理結果(非同期処理)】

【サンプルコード(同期処理)】

【処理結果(同期処理)】


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

JavaScriptのフレームワークを使いこなすには、まずJavaScript自体のことについて知る必要があります。
JavaScriptでは意識してコードを書かないと非同期処理になってしまうので、ここは意外と落とし穴になるのではないかと思っています。

Chromeの拡張機能を使用した文字列置換

以前の記事で、URLからJavaScriptを読みこむことでブラウザに表示される文字の変換を試みました。
しかし、URLから読み込ませる方法だと、大量の文字列置換はできません。

そこで、今回はChromeの拡張機能を使用した文字列置換を試みました。
以下、サンプルコードです。

manifest.jsonは、「https://developer.mozilla.org/ja/docs/Web/JavaScript」にアクセスした際に「content.js」が実行される記述としています。
最小限の記述であるため、実際に配布する際には説明を入れたりアイコンをつけたりすると良いでしょう。

【構成】

【サンプルコード】

・manifest.json

・content.js

【動作確認】

1.Chromeを開き、下記から「拡張機能の管理」を選択

2.「デベロッパーモード」をONにし、「パッケージ化されていない拡張機能を読み込む」を選択

3.サンプルコードが存在するフォルダを選択

4.manifest.jsonに記述したサイトにアクセスすると、自動で文字列置換が行われる

5.取り込んだ拡張機能の削除は、「Chromeから削除」を選択することで行う


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

今回は文字列置換を例として挙げましたが、他にも、リンクの埋め込み、広告の削除、といったことが可能です。
Chromeの拡張機能は既に色々な機能が公開されていますので、どのようなことができるのかを既存の拡張機能を見て調べても良いかもしれません。

JavaScript:thisの挙動と用途

JavaScriptの初心者を悩ます文法の一つとして、thisが挙げられます。
thisが何を指しているのか、どのような場合に使われるのか、なかなかイメージが難しいと思います。

この記事では、その疑問について答えていきたいと思います。

今回の記事では、サンプルコードの実行はNode.jsで行います。
また、非Strictモード(’use strict’を宣言したりexport句でStrictモードに変更したりしない場合)を前提とします。
(Strictモードの場合は、thisによりグローバルオブジェクトを参照しようとした場合にundefinedになります)


1.thisキーワードの説明

「this」の説明の前に、JavaScriptとオブジェクトの関係について簡単に説明します。
JavaScriptは、必ずオブジェクトの中で実行する必要があります。
実行環境(ブラウザやNode.js)は「グローバルオブジェクト」と呼ばれるオブジェクトを用意しており、自分でオブジェクトを定義しない場合はグローバルオブジェクトから各々の処理が実行されています。
(ブラウザの場合のグローバルオブジェクトは「window」、Node.jsの場合のグローバルオブジェクトは「global」となります)

「this」キーワードは、記述箇所を動かしているオブジェクトを参照します。
自分で定義したオブジェクトから記述箇所を呼び出している場合はそのオブジェクト、そうではない場合はグローバルオブジェクトを返します。

【サンプルコード】

【実行結果】

・1回目の関数呼び出し

・2回目の関数呼び出し

2.callやapplyを用いて関数呼び出しした場合のthisの参照先

関数をメソッドチェーンで「call」や「apply」と繋ぐことで、呼び出される関数の中でthisが参照するオブジェクトを指定することができます。
オブジェクトの指定は「call」や「apply」の第一引数で行います。

また、「call」や「apply」は第二引数以降も指定が可能です。
第二引数以降では、関数呼び出しの際の引数を指定することができ、呼び出される関数の中では「arguments」キーワードでそれを受け取ることができます。
「call」は第二引数、第三引数、第四引数…といった具合に変数を一つずつ定義し、「apply」は第二引数に配列形式でまとめて変数を定義します。

【サンプルコード1】

【実行結果1】

・1回目の関数呼び出し

・2回目の関数呼び出し

【サンプルコード2】

【実行結果2】

・1回目の関数呼び出し

・2回目の関数呼び出し

3.bindを用いたthisの参照先変更

関数をメソッドチェーンで「bind」と繋ぐことで、thisの参照先を強制的に結びつけた新たな関数を定義できます。
結びつけるオブジェクトは第一引数で定義します。

【サンプルコード】

【実行結果】

4.アロー関数で関数定義した場合のthisの参照先

アロー関数で関数を定義した場合は、thisの参照先は固定になります。 関数を定義した時点のオブジェクトを指すようになります。

【サンプルコード】

【実行結果】

・1回目の関数呼び出し

・2回目の関数呼び出し


thisは、どのオブジェクトから呼び出されたかによって挙動を変えたい時に使用することが多いです。
ポリモーフィズムを実現するために使用する、と言った方がわかりやすいかもしれません。
また、今回の例では取り上げていませんが、関数を定義したオブジェクトを渡せばコールバック処理も可能です。

以下のサンプルコードは、呼び出したオブジェクトの名前を参照する例であり、どのオブジェクトから呼び出したかによって挙動を変えることができています。

【サンプルコード】

【実行結果】

・1回目の関数呼び出し

・2回目の関数呼び出し


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

JavaScriptのthisは混乱しやすい文法ですが、JavaScriptはグローバルオブジェクトの元で実行されること、通常は呼び出し元のオブジェクトを指すこと、「call」「apply」「bind」キーワードやアロー演算子によりthisが指す先が変わること、を覚えておけば、thisを理解できるのではないかと思います。

JavaScript独自の文法については、これからの紹介していきたいと思います!

JavaScript:Strictモードとは

JavaScriptには「Strictモード」と呼ばれるモードが用意されています。
Strictモードにすることで、バグに気付かずに実行が継続されるのを防ぎやすくなり、高速化することもあります。

詳しくはMozillaのページに書かれていますが、この記事では簡単に紹介したいと思います。


Strictモードに設定するためには、以下の2つの方法があります。
(export句を使用した方法もありますが、この記事では割愛します)

1.スクリプト全体で定義

スクリプトの最初に「’use strict’;」を記述することで、そのスクリプト全体がStrictモードになります。

・サンプルコード

2.関数全体で定義

関数の最初に「’use strict’;」を記述することで、その関数全体がStrictモードになります。

・サンプルコード


Strictモードに設定することで、例えば以下のような挙動変更が行われます。

1.バグになりやすい誤りがある場合に異常終了させる

例えば、定義済みの変数を参照しようとして変数名の記述を誤った場合、Strictモードの場合は異常終了させることができます。

・サンプルコード(非Strictモード)

・実行結果(非Strictモード)

・サンプルコード(Strictモード)

・実行結果(Strictモード)

2.セキュリティーの強化

JavaScriptでは、必ずオブジェクトを用意する必要があり、自分でオブジェクトを定義しない場合は「グローバルオブジェクト」と呼ばれるブラウザや実行環境が用意したオブジェクトが使用されます。
また、キーワード「this」を使用することで、記述箇所を動かしているオブジェクトの情報を取得することができます。
「this」によりグローバルオブジェクトを参照された場合、セキュリティー上の問題が発生する可能性があるため、Strictモードではグローバルオブジェクトが参照されるようなケースで「this」キーワードは「undefined」を返すようになります。

・サンプルコード(非Strictモード)

・実行結果(非Strictモード)

・サンプルコード(Strictモード)

・実行結果(Strictモード)

3.将来(最新)のJavaScriptの仕様に対応する

例えば、キーワード「private」は、2021/03/31現在でいくつかのブラウザやNode.jsでは使用可能です。
非Strictモードではこのキーワードを変数名として使用できますが、Strictモードではエラーにできます。

・サンプルコード(非Strictモード)

・実行結果(非Strictモード)

・サンプルコード(Strictモード)

・実行結果(Strictモード)


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

元々はthisの挙動について書こうと思っていたのですが、thisの挙動はStrictモードによっても変化するので、先にStrictモードについて書きました。
JavaScriptの弱点としてエラーで落ちて欲しい場面で落ちない(その結果誤りに気付くのが遅くなる)というものがあると思いますが、Strictモードはその弱点を埋めるのに良い機能だと思いました。