概要 「Vue.js入門 基礎から実践アプリケーション開発まで」の本を読んだのですが、特に前半パートでのVue.jsの基本的な文法を中心に備忘として整理します。後半パートでは、Vue.jsで使用できるプラグインのVue RouterやVuexなどについても記載されていたましたが、本記事では割愛します。 導入 Webの歴史 1990-2000 Webの誕生、Javascript/CSSのWebブラウザ搭載 2000-2010 サーバサイドベースのアプリケーションフレームワークの誕生Ajax/JQuery/HTML/Node.jsの登場 2010-2018 AltJsの登場、Webフロントエンドライブラリ/フレームワークの登場Babel/ESLint/Webpackなどの様々なツールの登場 AltJsとは ES2015と前後して登場したJavaScriptを変換できるAltJSと呼ばれるプログラミング言語より簡潔な構文を目指したCoffeeSript、型を注釈として付与するTypeScriptが有名 Web Componentsの要素 Custom Elements HTML Template Shadow DOM HTML imports Vue.jsの特徴 コンポーネント指向 リアクティブなデータバインディング(双方向バインディング) プログレッシブフレームワーク 宣言的レンダリング クライアントサイドルーティング = Vue RouterでSPAに対応 大規模向け状態管理 = コンポーネント間で状態の共有方法 リアクティブなデータバインディング(双方向バインディング)は以下のイメージ プログレッシブフレームワークとは=フレームワークはどんな時でも、どんな規模でも、段階的に柔軟に使えるべきである=必要になった時に問題解決するライブラリを適宜導入して問題を解決する 宣言的レンダリングとは=データ変更のたびにリアクティブなDOMレンダリングとユーザによる入力データの同期が可能 Vue.jsはビュー層に焦点があてられたライブラリで、厳密にはフレームワークではない以下のような様々なプラグインで構成されているVue Router：ルーティングプラグインVuex：大規模なWebアプリケーションを構築するための状態管理プラグインVue Loader：webpack向けのローダーライブラリVue CLI：コマンドラインツールVue DevTools：開発ツール 基本構文 UIは、データとそのデータを画面に表示するビュー、データを変更するユーザのアクションの3つから成り立っている コンストラクタ VueインスタンスをDOM要素にマウント(適用)することで、Vue.jsの機能がその要素内で使えるようになる マウント elプロパティで指定したDOM要素をマウント メソッドによるマウントelプロパティを定義せずに、$mountメソッドを用いる UIのデータ定義 dataプロパティには、UIの状態となるデータのオブジェクトを指定するdataプロパティに与えた値はVue.jsのリアクティブシステムに乗るVueインスタンス生成時にdataを与えておき、それをテンプレートで表示するのがVue.jsの表示の基本的な仕組み テンプレート構文 Mustache記法 {{ }}でデータや式を記述 ディレクティブによるHTML要素の拡張 名前がv-で始まる属性(v-bind 等 フィルタ {{ 値 | フィルタ }}フィルタは関数で定義する 算出プロパティ 公開プロパティを算出する関数を定義する ディレクティブ 条件レンダリング(v-if/v-show) 違いは、v-ifは式の結果に応じてDOM要素を追加・削除するのに対して、v-showはスタイルのdisplayプロパティの値を変更することで実現 クラスとスタイルのバインディング v-bind:class=”オブジェクト・配列”v-bind:style=”オブジェクト・配列” リストレンダリング(v-for) 配列あるいはオブジェクトのデータをリストレンダリングv-for=”要素 in 配列” イベントハンドリング v-onはイベントが起きた時に属性値を実行する v-on:イベント名=”式として実行したい属性値” フォーム入力バインディング(v-model) ビュー(DOM)で変更があった時に、その値をVueインスタンスのデータとして更新 ライフサイクルフック created: インスタンスが生成されて、データが初期化された後に呼ばれるmounted: インスタンスにDOM要素が紐づいた後に呼ばれるbeforeDestroy: インスタンスが破棄される前に呼ばれる メソッド(methods) データの変更やサーバーにHTTPリクエストを送る際に利用する コンポーネントの基礎 コンポーネントを作成する Vue.component(tagName, options) コンポーネントを継承する Vue.extend() コンポーネント間の通信 親コンポーネントから子コンポーネントにのみデータを渡すことが可能となっている propsオプションを利用する親からはテンプレートの属性(v-bind)経由で渡すことができる子コンポーネントから親コンポーネントにはカスタムイベントを使用する イベントのリスン：$on(eventName)イベントのトリガー：$emit(eventName)
概要 ES6以前は、JavaScriptの変数はvarで宣言することのみが可能でした。ES6以降はletとconstを加えて、3種類で変数を宣言することが可能となりました。本記事では、これらを使って宣言した変数が関数スコープとブロックスコープでどのような違いがあるかを記載します。 関数スコープ 関数内でvarを使用して宣言した変数は、関数外で使用するとエラーとなります。 ブロックスコープ ifやfor等のブロック内でvarを使用して宣言した変数は、ブロック外で使用してもエラーとならず、そのまま使用することができてしまいます。 letやconstを使用した場合 ES6以降で登場したletやconstを使用することで上記のような関数スコープとブロックスコープの差をなくすことができます。※ 本記事ではletとconstの違いは触れません。簡単にいうと上書きできるかできないかです。 関数スコープ ブロックスコープ 参考 The Difference Between Function and Block Scope in JavaScripthttps://medium.com/@josephcardillo/the-difference-between-function-and-block-scope-in-javascript-4296b2322abe
概要 本記事では、JavaScriptにおける比較演算子の==と===の違い、および変数の型をチェックする方法を記載します。 ==と===の違い ==と===の違いとしては、簡単に言うと===の方が値だけでなく型まで含めて等しいかをチェックするのに対して、==では暗黙的な型変換により型を合わせた上で等しいかをチェックするという部分になります。下記に具体例を記載します。 また、別の記事で記載しておりますがJavaScriptの暗黙的な型変換は少し特殊な変換がなされるため、==を使用した場合には想定外にtrueに判定される時があります。 暗黙的な型変換についての詳細はこちらを参照。 したがって、JavaScriptのロジックにおける比較演算子は===を使用して厳格にすることが推奨されます。ただし、上記のような仕様を理解して上で==を使用するのは全く問題ないと思います。 型のチェック方法 JavaScriptの型をチェックする1つの方法は、typeofを使用することで、変数の型を返すのでそれを元にチェックすることができます。もう1つは、instanceofを使用することで、変数が指定する型と等しいかをチェックすることができます。それ以外にも型によって使えるものがあったり、typeofとinstanceofが使えるかも異なるので下記を参考にしてください。 String Number Array Function Object Nullとundefined Boolean Error Date Symbol まとめ 今回は、==と===の違いや変数の型チェックという基礎的ですが理解していないと予期せぬエラーの原因となる部分を整理しました。特に型チェックの方法は癖がありそうなので、注意したいところです。 参考 JavaScript — Double Equals vs. Triple Equalshttps://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a How to better check data types in javascripthttps://webbjocke.com/javascript-check-data-types/
概要 JavaScriptの型変換には、暗黙的と明示的があります。具体的には、Number(value)のような関数が明示的な変換にあたります。暗黙的な変換は、異なる型をオペランドでつなぐ処理でどちらかの型に合わせるように変換するようなものとなります。例えば、Stringは数値を期待されるような場合にはNumber型に変換されます。なので、JavaScriptでは型の不正による予期せぬエラーはほとんどの場合で回避されます。 ===と==の違い ===を使って比較すると、暗黙的な変換はせずに型も含めた比較になります。逆に==の比較では、必要に応じて暗黙的な変換をした上で比較を行います。実際に比較をしてどのようになるかは、下記のテーブル表が参考になります。https://dorey.github.io/JavaScript-Equality-Table/ StringとNumber オペランドによりStringからNumberに暗黙的に変換される処理は、Number関数で変換するのと同じプロセスになります。Number関数は、数字を含むStringであれば正しく変換されますが、数字ではない文字列である場合は、NaN(not a number)を返します。Stringに明示的に変換する場合にはString関数を使用します。 オペランドが-, *, /, %の場合には、Stringは暗黙的にNumberに変換されますが、+の場合にはNumberがStringに変換されるような挙動となります。 Boolean型と空文字列をNumberに変換すると下記のようになります。 Boolean Booean型の変換では、下記の値がJavaScriptではfalseとなります。ちなみに、ifやelse ifの比較や||,&&の演算子があると必要に応じて暗黙的の変換が行われます。 逆に下記がtrueに変換されるものとなります。 Object(Array含む) Object型は、暗黙的な変換では[object Object]という文字列に変換されます。Object型はtoString()を継承しており、暗黙的な変換ではこれが呼び出されます。なので、ObjectのtoString関数を上書きすることで、適切な文字列を返すようにすることができます。また、数値への変換の場合には、valueOf()を継承することで変換時に呼び出されるようにもできます。 Array型は、暗黙的な変換では、,(カンマ)区切りに連結した文字列に変換されます。 まとめ JavaScirptの暗黙的、明示的な型変換について整理してみましたが、非常に便利な機能である反面で想定外の動きをする原因にもなったりするので、しっかり理解して実装する必要があると改めて実感しました。 参考 What you need to know about Javascript’s Implicit Coercionhttps://dev.to/promhize/what-you-need-to-know-about-javascripts-implicit-coercion-e23 JavaScript type coercion explainedhttps://medium.freecodecamp.org/js-type-coercion-explained-27ba3d9a2839
概要 本記事ではJavaScriptにおける値型(Value Types)と参照型(Reference Types)の違いを簡単に整理します。 値型(Value Types) Number,Boolean,String,null,undefined,Symbolはプリミティブ型であり関数へは全て値型で渡されます。ここでのポイントは、Stringが値型で渡させるということとなります。他の言語では、Stringは一般的に参照型である場合が多いですが、JavaScriptでは値型なので注意が必要となります。値型で関数(fucntion)に渡させると、関数の中での変更は影響しないような挙動となります。下記が簡単な例です。 参照型(Reference Types) Object,Array,Functionの型は、参照型で渡さます。ちなみに、ArrayやFunctionも大きく捉えるとObjectに含まれると考えられます。参照型で関数(fucntion)に渡させると、関数の中での変更は呼び出し元の変数にも影響するような挙動となります。下記が簡単な例です。 まとめ JavaScriptでは明示的に型を宣言しないので、他の言語ほど型を意識しないことが多いですがいわゆる値型と参照型での動作の違いが出てくるので、考慮した上で実装する必要はあります。 参考 Understand Value and Reference Types in JavaScripthttps://www.zsoltnagy.eu/understand-value-and-reference-types-in-javascript/ Value types, reference types and scope in JavaScripthttps://medium.com/@benastontweet/lesson-1b-javascript-fundamentals-380f601ba851
概要 本記事は、JavaScriptにおけるプリミティブ型にはどのようなものがあるかを整理したものとなります。 プリミティブ型とは プリミティブ型とは、プログラミング言語の仕様に用意されている最も基本的なデータ型となります。 JavaScriptにおけるプリミティブ型 JavaScriptにおけるプリミティブ型には、下記の種類があります。 Boolean type Null type Undefined type Number type String type Symbol type Boolean type Booleanは論理エンティティを表し、trueとfalseの2つの値を持つ。 Null type Null型は、厳密に1つの値(null)を持つ。 Undefined type 値が割り当てられていない変数は、undefined値を持つ。 Number type ECMAScript規格によると、数値型は1つだけである。整数には特別な型はなく、浮動小数点数を表すことができることに加えて、数値型は3つの記号的な値を持つ。 + Infinity -Infinity NaN（not-a-number） String type JavaScriptのString型はテキストデータを表すために使用される。C言語とは異なり、JavaScriptの文字列は不変(イミュータブル)である。つまり、いったん文字列が作成されると、それを変更することはできません。ただし、元の文字列に対する操作に基づいて別の文字列を作成することは可能である。 Symbol type Symbol型はECMAScript 2015のJavaScriptの新機能である。シンボルは一意で不変のプリミティブ値であり、Objectプロパティのキーとして使用できる。 参考 JavaScript data types and data structures — MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values Primitive Types — Flow https://flow.org/en/docs/types/primitives/
概要 本記事では、JavaScriptのコンセプトであるコールスタックについて整理します。 コールスタックとは コールスタックは、JavaScirptを実行するインタプリタ（WebブラウザのJavaScriptインタプリタなど）が複数の関数を呼び出すスクリプト内の場所を追跡するためのメカニズムです。 JavaScriptの実行は、基本的にはシングルスレッドによるヒープと単一のスタック呼び出しから構成されます。 基本原則は以下となります 1. シングルスレッド。つまり、一度に一つのことしかできないということ。 2. コード実行は同期的。 3. 関数呼び出しは一時メモリを占有するスタックフレームを作成。 4. LIFO – 後入れ先出しデータ構造として機能。 処理の流れ スクリプトが関数を呼び出すと、インタプリタはそれを呼び出しスタックに追加してから、その関数の実行を開始します。 ↓ その関数によって呼び出されたすべての関数は、さらに呼び出しスタックに追加され、それらの呼び出しに到達した場所で実行されます。 ↓ 現在の関数が終了すると、インタプリタはそれをスタックから取り除き、最後のコードリストで中断したところから実行を再開します。 スタックオーバーフロー スタックが割り当てられていたよりも多くのスペースを占有すると、「スタックオーバーフロー」エラーが発生します。 下記のように、自身の関数を再帰的に呼び出すことが原因となります。 参考 Call Stack https://developer.mozilla.org/en-US/docs/Glossary/Call_stack Understanding the JavaScript call stack https://medium.freecodecamp.org/understanding-the-javascript-call-stack-861e41ae61d4
