LogoMark.png

JavaScript/Syntax

JavaScriptの文法

https://www.w3schools.com/js/default.asp

このページでは、JavaScriptプログラミングのための基本的な概念と、記述形式について概説しています。JavaScriptは全体にルールがゆるいのと、現場(ブラウザの実装)が日進月歩の状況なので、情報源によって記述スタイルや用語の使い方が様々です。ここに記載している内容も公式の用語解説というより、説明のしやすさを優先していますので、より確実・詳細に学びたい場合は、標準的なマニュアルサイトをご覧下さい。


CONTENTS


データ型

基本的な分類

JavaScriptでは、以下のようなデータ型があります。

プリミティブ型とオブジェクト型

データ型は大きく2つに分類することができます。

リテラル

JavaScript では値の表現にリテラル(数値や文字列を直接に記述した定数)を使います。これらは固定値であり変数ではありません。スクリプト中に直接記述します。真偽値を表すtrueやfalseもリテラルです。

エスケープシーケンスについて

文字列は、[ ' ] か、[ " ] で括れば良いことになっていますが、例えば、以下のように文字列の中に[ ' ] が含まれた場合は、うまく処理できません。

'I'm sorry' 

で、この場合は、"I'm sorry." と[ " ] で括れば解決しますが、さらに[ " ] も含む文字列になると処理できなくなります。

そこで一般にプログラミング言語では、[ ' ] や [ " ] などの特殊な文字を単なる文字として処理させるための エスケープ・シーケンス と呼ばれる手法が用意されています。具体的には 「 \(バックスラッシュ)+ 特殊文字 」という形式の 記述になります。上記の例を解決する書き方が以下です。

 'I\'m sorry' 

こう書くと、[ I ] の次にくる [ \' ] は、単なるアポストロフィとして処理されるので「I'm sorry」全体でひとつの文字列扱いにすることができます。

ちなみにMacの場合、[ \ ] は、英数入力の Option + [¥] で表示できます。

参考:https://en.wikipedia.org/wiki/Escape_character




変数

変数とは「データを入れるための容器」と考えてください。var x=10; と書くと、xという名前の箱が用意されて、そこに10という値が入ります。var とは variable(変数)の略です。C言語などの型に厳密な言語に慣れた方には違和感があると思いますが、JavaScriptの変数には「型」の区別はありません。

var / let / const

JavaScript では従来、変数は常に var キーワードで宣言されてきましたが、ES6において、変数を宣言する手段として、let キーワードと const キーワードの2つが新たに導入されました。

let の方がより var よりもバグが発生する可能性が少ないことから、近年は var に変わって let を使うケースが多く見られるようになりました。

グローバル変数とローカル変数

一般に変数というものは、関数の内部でのみ有効です。つまり、ある関数の中で使われている変数「x」の状態は、他の関数の中で使われている変数「x」とは無関係。たとえ同じ名前の「x」でも無関係です。でないと、関数を作るときに、まわりにある関数を全部チェックして、変数名に重複がないようにしなければならなくなってしまうからです。

しかし、いくつかの関数で共通の変数の値を参照したい場合もあります。例えば、ゲームのプログラムで、「キャラクターを動かす関数」と、「キャラクター同士のアタリ判定を行う関数」は、「キャラクターの現在座標」という共通の変数を参照する必要があります。そこで、プログラミング言語全般に言えることですが、あちこちから共通に操作できる変数というものも存在できるように設計されています。

一般に、関数の内部でのみ有効な変数をローカル変数(内部変数)、関数の外にあってあちこちから操作できる変数をグローバル変数(外部変数)と呼んで、これらを区別します。JavaScriptでは、宣言の仕方によって以下のように区別されます。

ちなみにクライアントサイドJavaScriptでは、Windowオブジェクトは、画面上に表示されているすべてのオブジェクトの親となるオブジェクトであり、JavaScriptのオブジェクト階層の最上位に位置します。すなわち、Windowオブジェクトがグローバル オブジェクトで、すべてのグローバル変数は、Windowオブジェクトのプロパティとなっているのです*1
例えば、グローバル変数として var sampleMessage="abc"; と記述すると、

alert( sampleMessage ); // abc
alert( window.sampleMessage );   // abc

ともに同じ "abc"が出力されます。

外部環境の汚染について

グローバル変数は外部環境を汚染するので極力使わない・・

グローバル変数というものは、各種ライブラリーや他のスクリプトと併用する場合、潜在的なバグの原因になるため、極力使わないのが原則です。他人が作ったソースコード中に同じ変数名や関数名があれば、当然衝突が起こって予期せぬエラーが生じます。よって、できる限りグローバル変数には依存せずにシステム全体を作るのが理想です。

関数というものも、本来独立性の高い部品として作られるもので、「引数を受け取って>処理して>返す」だけの存在として組み立てるのが理想です。引数として渡せるものであれは、引数として関数内に取り込むのが原則です。

参考:即時関数
ただ、実際のシステム開発において外部変数を使わないというのも難しい話です。ここで、即時関数が役に立ちます。外部変数の定義も含むソースコード全体をこの即時関数でラッピングすると、すべてがローカルに封じ込められるので、グローバル変数の衝突(外部環境の汚染)を防ぐのに便利です。

( function( ) {
  //・・・スクリプト全体をここに・・・
}) ( ); ← スクリプトを実行




オブジェクト

オブジェクトは値と関数を収める名前付きコンテナです。オブジェクトは値をプロパティとして、関数をメソッドとして一括管理します。

配列

同じ種類のデータを複数セットで扱う場合には、配列を用います。配列オブジェクト、あるいは配列リテラルとして宣言する方法がありますが、JavaScript の技術仕様上、配列はオブジェクトの特殊型として位置付けられます。

関数

記事を独立させました。> JavaScript/Function



組み込みオブジェクトについて

標準組込みオブジェクト|MDN WebDocs

JavaScriptには、以下のようなオブジェクトが用意されていて、様々なプロティ、メソッドを利用することができます。

コメント

コード中にコメントを書く際は、以下のように1行コメントと複数行コメントの2つの書き方があります。

// 一行のコメント
 
/* 
         複数行からなるコメント
 */

複数行コメントに使う、/* */ は、ネスト(入れ子状の記述)することができません。また、[ */ ] は正規表現において発生することもあるので「コメントは基本的に // を使って処理する」と考えるのがよいでしょう。




代入文

一般に = を用いて記述した式は「右辺の計算結果を左辺に代入せよ」という意味になります。

補足:数値と文字列の扱いについて

数値と文字列の区別がゆるいJavascriptでは、「+」演算子を用いた合算、あるいは文字列連結について留意が必要です。以下、事例を紹介します。

制御文

if


for


while

非同期処理について

記事を独立させました。>JavaScript/Asynchronous



JavaScript 各種ライブラリ

ライブラリーとは、汎用性の高い複数のプログラムを、再利用可能な形でまとめたものです。それ単体では動作しませんが、他のプログラムから呼び出されることで機能します。JavaScriptのライブラリーは、jQueryをはじめ、近年ますます充実していますが、いずれもそのまま読めるテキストファイルで、大半は無料で入手可能です。

補足

変数・関数の命名規則

ここでは、変数名や関数名のつけかたについて一般的なルールを紹介します。絶対こうせよというものではありませんが、将来のことを考えてなるべく慣例に従うことをお勧めします。

PAGES

GUIDE

TOOL

DATA


*1 <script>と</script>の間ではwindow.は省略できます。例えば、window.alert()はalert()と記述できます
Last-modified: 2021-06-14 (月) 18:35:54