JavaScript入門【概要～基本文法】

JavaScript概要

JavaScriptは、

• ブラウザ(Chrome,Firefoxなど)で動作するプログラミング言語
• HTML/CSSのような見た目の装飾では実現できない挙動や処理を実現する
  →表示中のHTML/CSS情報を読み込んだり、書き換えたりすることで表示内容を変える
• HTML/CSSとの大きな違いは動的に変化していくこと。(HTML/CSSは一度読込み後の変化なし)
  →クリックしたら、読み込みが完了したら、..など、様々な状況に応じて出力内容を変化させる

JavaScriptの基本文法

JavaScriptで何らかの処理を実行させたい場合、以下三つの要素を持つ形式で記述する

• オブジェクト：処理を実行する対象を指定する：「誰が」
• メソッド：オブジェクトが実行可能な処理を指定する：「何をする」
• パラメータ：メソッドが使用する情報(引数)を与える：「XXを使って」

画像の例の場合、
「Consoleオブジェクトが、与えられたパラメータ[‘hiramame’]を使ってログ出力処理(log())を行う」
といった形になります。

一言コメント

JavaScriptで記載するオブジェクト名やメソッド名などは大文字小文字を区別するため、間違えないように注意します。

補足：オブジェクトはメソッド以外にプロパティという要素も持ちます。

• メソッド：オブジェクトの実行可能な処理を定義するもの
• プロパティ：オブジェクトの状態を表すもの

HTMLの要素を取得し、その値を書き換えるような処理では、取得した要素オブジェクトのプロパティを書き換えるような形をとります。

JavaScriptを作成・実行する場所

JavaScriptは、以下の場所で作成・実行が可能です。

• HTMLファイルへの直接記述
• JavaScript(.js)ファイルの読み込み(管理の煩雑さを避けるため、基本的にはこちら)

HTMLへの直接記述

HTMLファイルへ直接JavaScriptを埋め込む場合は、<script>タグで以下のように記述します。

<script>
    'use strict';    //ストリクトモードの有効化
    /*ここにJavaScriptを記載*/
</script>

Point
　・<script>タグは</body>終了タグ直前に挿入する。(挿入自体はどこでも可能)
　・ストリクトモードを有効化する場合は、[‘use strict’;]を<script>タグ開始直後に記載する。

JavaScript(.js)ファイルの読み込み

JavaScriptファイルを別に用意して読込む場合は、HTMLファイル、JavaScriptファイルそれぞれを以下のように記載します。

HTMLファイル

<script src="<ファイルパス>"></script>

JavaScriptファイル

'use strict';    // ストリクトモードの有効化
/*ここにJavaScriptを記載*/

一言コメント

JavaScriptファイルを作成するときは、必ず文字コードを「UTF-8」形式にしておきます。
(UTF-8意外だと動作に影響あり)

JavaScriptの変数と定数、配列

JavaScriptで変数や定数を定義する際は、以下のように記述します。

//変数の宣言(let)
let myTest
Variable;
let myTestVariableList = ['A','B','C'];

//定数の宣言(const)
const myTest
Constant = <値の代入>;

JavaScriptの配列とその操作

JavaScriptで配列を定義する際は、以下のように記述します。

//配列の宣言(let)
let myTestList = ['A','B','C'];

//of文を使用した配列の要素の繰り返し
for (let item of myTestList){
     console.log(item);    //配列のすべての要素が順に出力される
}

配列を操作するメソッド一覧

ファンクション(サブ関数)の定義

JavaScriptでファンクション(サブ関数)を定義するときは以下のように記述します。

// ファンクションの定義
function add1(value) {

    return value + 1;
}

//作成したファンクションの呼び出し
add1(100);    //この例の場合101が返ってくる

テンプレート文字列(テンプレートリテラル)

テンプレート文字列(テンプレートリテラル)とは、以下のような機能を持つ文字列です。

• JavaScript中ではバックティック(`)で囲んだ形で記載
• 「＄{～～}」の記載によって文字列の中に変数や関数呼び出しなどを埋め込める
• 文字列の途中で改行が可能

実際に活用例でみてみましょう。

HTMLにli要素を配列から挿入する例

HTML

<section>
    <h1>テスト用リスト</h1>
    <ul id="list">

        <!--ここにJavaScriptによってli要素が挿入される-->
    </ul>
</section>

JavaScript

let myTestList = ['A', 'B', 'C', 'D'];
for(let item of myTestList) {
    const insertdata =
    `<li>
        ${item}
    </li>`;

    document.getElementById('list').insertAdjacentHTML('beforeend', insertdata);
}

＊補足：insertAdjacentHTML()メソッド
　…取得した要素の前後や子要素として別のようっそを挿入するメソッド。書式は以下の通り

getElementなどで取得した要素.insertAdjacentHTML(<挿入する場所(キーワード引数)>, <挿入するデータ>)

挿入する場所のキーワードは以下の通りです

オブジェクトの作成

JavaScriptのオブジェクトとは、複数プロパティを持つデータで、以下のように定義可能な要素です。

//オブジェクトの作成
let myTestObject = {
     propertyA:'StringData',
     propertyB:100,
     propertyC: myfunc(){ //ファンクションの格納も可能
          return 'TESTMSG';
     }
};

//オブジェクト全体の取得
console.log(myTestObject)

//各要素の取得
console.log(myTestObject.propertyA)
console.log(myTestObject['propertyA'])

//オブジェクト要素をすべて取得する場合はinを使用(配列のように順に出力はされないことに注意)
for(let item in myTestObject){
     console.log(item + ':' + myTestObject[item]);  //[propertyA:'StringData']の形式で出力
}

JavaScriptの処理の流れ

JavaScriptは、大きく以下四つのステップで処理が進みます。

1. イベントの発生
2. 使用したい情報の取得(インプット)
3. 情報を使用した処理の実行(演算)
4. 処理の結果をHTML/CSSへ反映(アウトプット)

イベントの発生

• イベント：JavaScriptにおいて、「処理を呼び出すきっかけ」を定義するもの
• イベントの種類は、「ボタンがクリックされたら」、「数値が入力されたら」など様々
• 基本的な書き方は「イベントオブジェクト=ファンクション」

例：フォームのボタンがクリックされたら

HTML

<section>
    <form action="#" id="form">
        <input type="submit" value="ボタン">
    </form>
</section>

JavaScript

document.getElementById('form').onsubmit = function() {
    console.log('クリックされました');
};

使用したい情報の取得～HTML/CSSへの反映

イベントで発火した処理で使用したい情報がある場合は、その個所の要素をdocument.getElementなどで取得し、ファンクションに組み込みます。

例：ボタンをクリックしたとき、テキストボックスに入力した内容を表示する

HTML

<section>
    <form action="#" id="form">
        <input type="text" name="word">
        <input type="submit" value="ボタン">
    </form>
    <p id="output"></p>
</section>

JavaScript

document.getElementById('form').onsubmit = function(event) {
    event.preventDefault();    //HTMLタグ基本挙動の無効化(再読み込み防止)
    const txtdata = document.getElementById('form').word.value;    //使用したい情報の取得
    document.getElementById('output').textContent = `入力内容：${txtdata}`//HTMLへの反映
};

イベントの都合、HTML基本タグの挙動(formタグの再読み込みなど)を無効化したい場合は「event.preventDefault();」を追加します。

実践例

ここではよく使う処理を何種類か抜粋して紹介しておきます。

アラートダイアログボックスの表示

window.alert('テストメッセージ');

確認ダイアログボックスの表示＆分岐処理

if(window.confirm('確認メッセージ：続行しますか？')) {
    /*OKボタン押下時の処理*/
} else {
    /*キャンセルボタン押下時の処理*/
}

一言コメント

window.confirm()は押下ボタンによってTrue/Falseを返します。（console.log((window.confirm())などとしてみるとその挙動が確認できます）

プロンプトの起動&入力文字列の認識

const input = window.prompt('呼び出すコマンドを入力してください。');
if(input === 'com001') {
    window.alert('コマンド001が呼び出されました');
} else if (input === 'com002'){
    window.alert('コマンド002が呼び出されました');
} else {
    window.alert('指定されたコマンドは存在しません');
}

時刻による条件分岐

const hour = new Date().getHours();

if(hour >= 7 && hour < 10) {
    window.alert('おはようございます');
} else if(hour >= 10 && hour < 19) {
    window.alert('こんにちは');
} else if(hour >= 19 && hour < 23) {
    window.alert('こんばんは');
} else {
    window.alert('Zzz');
}    

if(hour === 7 || hour === 12 || hour === 19 ) {
    window.alert('食事時ですね');
}

一言コメント

その他の時刻は大きく以下のように取得できます。

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const date = now.getDate();
const hour = now.getHours();
const min = now.getMinutes();

取得したコンテンツの文字列を書き換える

document.getElementById('<取得する要素のID名>').textContent = <置き換えたい文字列>

アロー関数の基本

① 前提：JavaScriptにおいて関数(関数リテラル)はデータ型として扱うことが可能
→変数への代入や引数/戻り値として使用することが可能

//関数を変数へ格納 (例は二つの数値引数を加算して返却する関数)
let add = function(num1,num2){     //変数へ格納する関数に関数名は無い(=匿名/無名関数)
     return num1+num2;
};

//変数名で呼び出しが可能
add(10,5);

② =>(アロー関数)は上記のような記述をシンプルにするための方法

//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let add = (num1,num2) => {
     return num1+num2;
};

//変数名で呼び出しが可能
add(10,5);

アロー関数の簡素化ルールと読み取り方

アロー関数は定義される関数の条件によってさらに簡素な表現が可能になります。

この「簡素化」が、覚えれば便利な反面初学者には意味が推測しにくく、最も躓きやすい部分です(体験談)。

＊有用なツール類では最も簡素化されたコンパクトな書き方がされることが多いため、なんとなく意味だけでも押さえておきましょう。

関数の処理が一文で完結する　→　関数を括る {} とreturn文を省略

省略なし：

//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let add = (num1,num2) => {
     return num1+num2;   //関数内の処理が一文
};

//変数名で呼び出しが可能
add(10,5);

省略後：

//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let add = (num1,num2) => num1+num2;    //｛｝とreturn文を省略

//変数名で呼び出しが可能
add(10,5);

関数の引数が一つだけ　→　引数を括る () を省略

省略なし：

//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let pulsOne = (num) => {
     num += 1;
     return num;
};

//変数名で呼び出しが可能
plusOne(10);

省略後：

//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let pulsOne = num => {   //引数を括る()を省略
     num += 1;
     return num;
};


//変数名で呼び出しが可能
plusOne(10);

引数がない　→　省略不可。()で記述

既存のユーティリティなどを利用するときに最もよく見るのがこの形です。ソースコードのトレースをするときは格納されている変数名に注目しましょう。

//アロー関数を使って関数を変数へ格納 <変数名> = (<引数>) =>{<関数処理>};
let getmsg = () => {
     const str = 'AAA' + 'BBB'
     return str;
};

//変数名で呼び出しが可能
getmsg();

その他、よく見る記述の仕方

最後に既存ユーティリティ等でよく見かける記述方法についてまとめておきます。

関数の引数としてアロー関数を定義　→　変数への格納無し

ある関数Aの引数として別の関数Bを与えたい場合、関数Bを変数へ格納することは省略されることが多いです。

原型(いったん変数へ格納する書き方)：

let funcB = () => {
     console.log('TESTMSG');
}

//関数リテラルを引数とする関数funcA
funcA(funcB);

簡略化した書き方：

funcA(() =>{
    console.log('TESTMSG');
});

一言コメント

↑はイベント関数の引数として簡単な処理(関数)を指定したい場合などによく見られます。
トレースをするときは引数指定部分と関数本体を分けて考えるとミスが防げますね。

JavaScriptトラブルシューティングメモ

最後に、問題が発生した場合にチェックすべきポイントをまとめておきます。（初学者向け）

JavaScriptファイル文字コードはUTF-8指定必須

JavaScriptファイルは必ずUTF-8にしておく必要があります。

原因不明の挙動が発生した場合はファイルの文字コードもチェックするポイントになります。

ストリクトモード

JavaScriptには互換性確保のため、新旧それぞれの実行モードが用意されています。
この、新しいJavaScript実行モードを「ストリクトモード」。

新仕様(ES6)準拠のスクリプトはこの設定をしておかないと一部機能が動作しない場合があるため、以下の記載をスクリプトの文頭に挿入しておく必要があります。

'use strict';    /*ストリクトモードの有効化*/

比較演算子「==」と「===」の違い

JavaScriptには比較演算子として「==」と「===」があり、それぞれ以下の違いがあります。

• 「==」:データ型変換を行い、結果として同義であればTrue。等価。
• 「===」：データ型を含め、完全に一致している場合にTrue。厳密等価。

どちらを採用するかは状況によりさまざまですが、この違いが曖昧だと意図しない挙動の原因となるため注意が必要です。

一言コメント

「!=」(不等価)と「!==」(厳密不等価)も同様です。