ホーム / JavaScript /

フロントエンド技術を学ぼう 2-11.JavaScriptについて学ぶ

2020年7月25日土曜日

Front-end Developer Handbook JavaScript

t f B! P L

Front-end Developer Handbookを教科書にフロントエンド周りの技術を習得する連載。

JavaScriptについて学ぶの説明です。


JavaScriptについて学ぶ

JavaScriptは高水準、動的、動的型付け、インタプリタ型のプログラム言語です。
またECMAScript言語仕様にて標準化されています。
HTMLやCSSと共に、Webコンテンツ制作に必要な3つの技術の内の1つで、大体のWebサイトが採用しており、全てのモダンブラウザではプラグイン無しでサポートしています。

JavaScriptは、ファーストクラスの関数を使用したプロトタイプベースであり、オブジェクト指向、命令型、関数型プログラミングスタイルをサポートしたマルチパラダイム言語です。テキスト、配列、日付、および正規表現を扱うためのAPIを備えていますが、ネットワーキング、ストレージ、グラフィックス機能などのI/Oは含まれておらず、埋め込まれたホスト環境に依存しています。

参照元；英語版Wikipedia


主な要素説明
高水準人間にとってわかりやすい記述の仕方が出来る言語のこと。
動的動的でない言語がコンパイル時に行う事を、実行時に行うこと。
動的型付け静的型付けに対して、変数などに代入する値の型が実行時に決まる性質のこと。
インタプリタ型実行時にコンパイル->実行の流れを一度に行う性質のこと。
ECMAScript言語仕様JavaScriptの標準仕様。
ファーストクラス言語における基本的な操作を行える対象。変数へ関数を代入する、無名関数の生成など
プロトタイプベース新しいオブジェクトを生成するときに、既存のオブジェクトを複製する性質のこと。
マルチパラダイム言語プログラミングパラダイムというプログラムの書き方が、複数種類対応している性質のこと。

スタートガイド

JavaScriptの基礎を学ぶ際には以下の項目を学ぶことになります。
DOM(ドキュメントオブジェクトモデル)の操作以外は、他のプログラミング言語を学ぶ際にも通用する考え方になります。


項目概要
Operator(演算子)四則演算を行うための演算子の紹介(+, -, *, /, %)と使い方。また、Math.foor()やMath.random()などのMathオブジェクトの使い方。
Variables(変数)変数とはなにか、変数の宣言(let)と使い方。
Control Flow(制御フロー)条件によってプログラムの動きを制御する方法。if文(if, else, else if)や、switch文(switch, case, break)の使い方。
Functions(関数)関数の作成(function, return)と使い方。
Scope(スコープ)グローバルスコープ、functionalスコープなど、変数の参照範囲。
Arrays(配列)配列の作成、要素増減(.push, .pop)。
Loops(繰り返し)同じ処理を複数回行う場合に、同じ命令式を繰り返し書く必要をなくす(for, while)。
DOM(ドキュメントオブジェクトモデル操作)JavaScriptでDOMを操作する。まずはHTMLファイルにJavaScriptファイルを読み込む方法、そしてDOM操作を簡略化できるjQueryの使い方。(this, slideToggle, textなど)


オブジェクトの生成

JavaScriptにおいては、全てがオブジェクトの様な動きをします。(変数もFunctionもArrayも)つまり、オブジェクトとは何かを知ることはJavaScriptの基本を知る上で重要です。
一番簡単なオブジェクトの生成方法は以下です。

let person = {
name: ['Bob', 'Smith'],
age: 32,
gender: 'male',
interests:['music', 'skiing'],
bio: function(){
alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
},
greeting: function(){
alert('Hi! I\'m ' + this.name[0] + '.');
}
};

このpersonオブジェクトの各プロパティを参照してみましょう。

console.log(person.name[0]);       //Bob
console.log(person.age);           //32
console.log(person.interests[1]);  //skiing
person.bio();                      //Bob Smith is 32 years old. He likes music and skiing.
person.greeting();                 //Hi! I'm Bob.

オブジェクトのプロパティ/メソッドにアクセスする.(ドット)

person.age
person.interests[1]
person.bio();

.(ドット)以外に[ と](バケット)を使用することもできます。

person['age']
person['interests'][1]
person['bio']();

バケットのを使用することはあまり一般的ではありませんが、以下のようにプロパティにアクセスする文字列を作成する際に便利です。

let foobarObject = {foobar: 'Foobar is code for no code'};

let string1 = 'foo';
let string1 = 'bar';

console.log(foobarObject[string1 + string2]);

ネストされたオブジェクト

name: ['Bob','Smith'].

例えば、上記のnameの値を以下の様にすることもできます。

name : {
first: 'Bob',
last: 'Smith'
},

これはサブネームスペースといいます。
アクセスするときはこうなります。

person.name.first
person.name.last

また、オブジェクト同様にarray()やfunction(){}も入れ子にすることができます。

let myArray = [[[]]]; //array in array in array

let myFunction(){
let myFunction(){
let myFunction(){
};
};
};

オブジェクトの更新

person.age = 45;
person.name.last = 'Cratchit';

新しいプロパティを追加することもできます。

person.eyes = 'hazel';
person.farewell = function(){ alert("Bye everybody!"); }

プロパティの削除はこのようにします。

delete.person.eyes;

thisの使い方

greeting: function() {
alert('Hi! I\'m ' + this.name.first + '.');
}

この箇所でthisを使いました。これは、現在のオブジェクトを参照する意味で使われています。
つまり

this.name.first

は以下と同義です。

person.name.first

これはオブジェクトのコンテキストが変更になった際にも(person以外のオブジェクト名になるなど)有効な記法です。


スタートガイド


一般的な学習リソース


マスタリングJavaScript


書籍

Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers
(ECMAScript 6を理解する：JavaScriptデベロッパーのための完全ガイド)


JavaScript with Promises
(プロミスとJavaScript)


Test-Driven JavaScript Development
(テスト駆動型JavaScript開発)


関数型JavaScript

funfunfunction: Functional programming in JavaScript
(ファンファンファンクション：JavaScriptでの関数型プログラミング)



書籍

Functional Programming in JavaScript: How to improve your JavaScript programs using functional techniques
(JavaScriptでの関数型プログラミング：関数型技術を使ったJavaScriptプログラムの改善方法)


リファレンス/ドキュメント


用語集/百科事典/専門用語


標準仕様


スタイルガイド


JSエクスプローラ/ビジュアライザ


QooQ