10年ほど前から需要が高まっている言語といえば「Javascript」です。
HTML・CSSなどのマークアップ言語と比較すると難易度は少し高いですが、習得すればできる範囲がグッと広がります。
今回は、人気の強い「Javascript」の使い方を紹介します。
Javascriptは習得必須の言語
Javascriptとはどのような言語なのでしょうか？
人によって説明が違いますが、プログラミング言語の種類で答えるとスクリプト言語になります。
スクリプト言語とは、簡単に利用できるように開発された言語です。
プログラミングを学んだことがない方も短期間で習得することが可能です。
しかし、最近ではJavascriptは様々な場面で使用されるようになりました。
WEBサイトの動的な部分はもちろん、サーバーサイドの処理もおこなうことも可能です。
Javascriptは、WEB制作には必須の言語となっています。
年々、需要が高まっているJavascriptについて説明します。
Javascriptの基本記述
ここまでの説明でJavascriptの人気が高まっていることがわかってもらえたと思います。
では、ここからは具体的な記述について説明していきましょう。
Javascriptの具体的な記述を説明する前に必要なモノが2つあります。
・テキストエディタ
・ブラウザ
Javascriptを記述して確認するためには、この2つが必要です。
テキストエディタは、無料のモノ・有料のモノどちらでも構いません。
しかし、注意してほしいのが「メモアプリ」を使用することです。
メモアプリはプログラミングコードを記述するために開発されていません。
なので、コードを記述していると少々使いづらいと感じることがあると思います。
まずは、コードを記述する上でおすすめのテキストエディタを紹介します。
おすすめのテキストエディタ
Sublime Text
無料で簡単に使用できるテキストエディタとして有名なのが、「Sublime Text」です。
操作が非常に簡単で、初めてテキストエディタを使う人にもおすすめ。
Sublime Textダウンロード公式URL：https://www.sublimetext.com/
brackets
簡単に拡張機能を追加できるのが、「brackets」の特徴です。
ブラウザーにリアルタイムでコードを反映することもできます。
「brackets」も無料で利用することが可能です。
bracketsダウンロード公式URL：http://brackets.io/
Dreamweaver
Adobeが提供しているテキストエディタが、「Dreamweaver」です。
「Dreamweaver」は有料のテキストエディタですが、PhotoshopやIllustratorなどの連携がスムーズにできるのが特徴です。
また、コーディングを補助する機能がたくさんあるので、コーディングが苦手な方にもおすすめ。
Dreamweaverダウンロード公式URL：https://www.adobe.com/jp/products/dreamweaver.html
以上がおすすめのテキストエディタです。
ブラウザは、「Chrome」「Firefox」「Safari」の3つがおすすめです。
今回は、Chromeを使って説明します。
この2つの準備が整ったら、テキストエディタを使ってJavascriptのコードを記述しましょう。
まず下準備として以下のコードを記述して「index.html」というファイル名で保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
上記のコードはHTMLで構成されたコードです。
このコードの中にJavascriptを記述します。
Javascriptを記述するために、
<script></script>
という記述をbodyタグの前に追記します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script></script> </body> </html>
Javascriptのコードはscriptタグの中に記述します。
では、「Hello World」という文字を実際に表示させてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log('Hello World');
</script>
</body>
</html>
この状態で保存して「index.html」ファイルをブラウザで表示してみと、何も表示されていないことがわかります。
「console.log(‘Hello World’);」というコードの部分はブラウザのコンソール画面を開いて確認しなければなりません。
Windowsを利用している方は「F12」、Macを利用している方は「Command+Option+i」で開発者ツールが表示されます。
開発者ツールを開いtらタブに表示されている「Console」部分をクリック。
すると、この部分に「Hello World」と表示されています。
「console.log(”);」の「”」部分に記述された文字がConsoleで確認できます。
Javascriptを使用するときは、この「console.log();」を使用してデバックすることが多いです。
また、文字列を表すときは「”」(シングルクォート)もしくは「””」(ダブルクォート)で囲みます。
コードの終わりには「;」セミコロンを使って、プログラムを終了させます。
初心者の方によくあるのが、セミコロンが抜けていたり余計な空白を入れてしまうミスです。
プログラムは1つでも記述を間違えると、動かなくなります。
なので、最初の内は特に記述ミスをしないように気をつけましょう。
今回はHTMLファイルにJavascriptを直接記述しましたが、外部ファイルを使って読み込ませることも可能です。
例えば、「index.html」ファイルと同階層に拡張子が「.js」の「main.js」ファイルを作ったとします。
すると、このようなコードを記述すると外部のJavascriptファイルを読み込むことが可能です。
<script type="text/javascript" src="main.js"></script>
これで「main.js」ファイルを読み込むことができます。
このコードは主にbodyタグの閉じタグの前で記述されることが多いです。
なぜなら、WEBサイトの表示スピードを上げるためです。
スタイルシートなどの装飾に関係する部分は、HTMlファイルの内容の前に読み込ませる必要があります。
WEBサイトの内容が表示されても装飾されていないWEBサイトが表示されたら、見ているユーザーはびっくりしますよね。
なので、スタイルシートはヘッド内に記述して最初に読み込ませるようにしましょう。
しかし、Javascriptはスタイルシートとは違い動きの部分を実装しています。
なので、HTMLファイルの内容よりも後に読み込ませるのが一般的です。
これはあくまで一般的というだけで、絶対にそうしなければならないという訳ではありません。
コードを記述する人によってはhead内で読み込ませることもあります。
Javascriptのコードは、基本的に外部ファイルに記述して読み込ませるのが一般的です。
その方がコードが見やすくなり、保守性が高くなります。
コメント
HTMLやCSSと同じようにJavascriptもコメントを記述することが可能です。
コメントを記述することで、自分がどのような意図で記述したのかを思い出すことができます。
また、他の人が自分の書いたコメントを見て意図を伝えることができます。
コメントは保守性や可続性を高める手段の1つです。
必要な所に適宜コメントを記述して、読みやすくするのがおすすめです。
コメントにした部分はWEBサイトで表示されることはなく、プログラムに影響を与えることもありません。
このように記述することでコメントを書くことができます。
// /**/
この間に記述された文字がコメントになります。
/コメントです。/ /*コメントです。*/
変数
変数を簡単に説明するならば、「データの入れ物」になります。
一時的にデータを保存するモノだと覚えておいてください。
Javascriptの場合、「var」と記述した後に変数名を記述することで変数の宣言がおこなえます。
具体的には、このようなコードです。
var sample; var hoge;
このように「var sample;」と記述すると「sample」という変数がつくられます。(;「セミコロン」も必ずつけましょう。)
また、「,」 (カンマ)で区切って変数を宣言することも可能です。
var sample, hoge;
変数宣言時に初期値を設定することもできます。
var sample = 'これはJavascriptの変数です。'; var hoge = 20;
プログラミングでの「=」(イコール)は、数学で使用する「=」(イコール)と意味が違います。
プログラミングの「=」(イコール)は、右辺のモノを左辺に代入するという意味です。
変数の初期値は文字列もしくは数字のどちらでもOKです。
変数宣言時に初期値を設定していなかった場合、デフォルトで「undefined」(未定義)という値が代入されます。
変数宣言に使用されるのは「var」だけではありません。
「let」を使用して変数を宣言することも可能です。
let sample = 'これはJavascriptの変数です。'; let hoge = 20;
このように変数を宣言することもできます。
「var」と「let」の違いは、同名変数の重複許可です。
「var」は同名変数の重複を許可しますが、「let」の場合、同名変数の重複は許可しません。
具体的にコードを使って説明します。
var sample = 'これはJavascriptの変数です。'; var sample = 'これはJavascriptの変数になり、重複を許可します。'; console.log(sample);//「これはJavascriptの変数になり、重複を許可します。」と表示されます。
このようにコードを記述した場合「sample」という変数には、最後に記述した「これはJavascriptの変数になり、重複を許可します。」という値が代入されます。
一方、「let」では変数の重複はエラーになります。
let sample = 'これはJavascriptの変数です。'; let sample = 'これはJavascriptの変数になり、重複を許可します。'; console.log(sample);//エラーになる
このように記述した場合、エラーが発生します。
このようなエラーメッセージが表示されます。
「Identifier ‘msg’ has already been declared」
このエラーメッセージは、すでにその変数は設定済みという意味です。
重複されたくない変数名のときに「let」を使いましょう。
また、変数に入れる値を変更されたくない場合は「定数」というモノ使用します。
定数は、変数と値をワンセットにすることです。
定数を使用するときは、変数宣言時に「const」を使用します。
「const」を使用することで、再代入不可能な変数をつくれます。
具体的にこのようなコードです。
const sample = '再代入できません。'; const sample = '別の値を代入できません。'; console.log(sample);//エラーになる
このコードも先ほどと同じように、「Identifier ‘msg’ has already been declared」というエラーが表示されます。
「const」と「let」の違いは、再代入ができるか否かです。
再代入が必要になる場合は「let」を使いましょう。
配列
配列は1つの変数に複数の値を入れることができます。
通常の変数を1つの値が格納できるダンボール箱とするならば、配列は仕切りのあるダンボール箱のようなモノです。
配列はこのように記述します。
var day = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']; console.log(day); //(7) ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]と表示されます。
「[]」（隅付き括弧)この括弧の中に値を入力して「,」(セミコロン)で区切ることで変数に値が代入されます。
配列は、配列名[インデックス番号]で表示されます。
このように記述することで「Monday」だけが表示可能です。
var day = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']; console.log(day[0]);//「Monday」と表示されます。
プログラミングは「0」(ゼロ)から始まるので、配列の最初に格納されている「Monday」が表示されます。
また、配列には値にキーを付与できる「連想配列」というモノがあります。
連想配列は、キーから値にアクセスすることができ、Javascriptでは「オブジェクト」と表現することが可能です。
連想配列は、このようなコードになります。
var person = {name:'田中', sex:'男', age:'20', address:'Tokyo', bloodType:'A'};
console.log(person);//「{name: "田中", sex: "男", age: "20", address: "Tokyo", bloodType: "A"}」と表示されます。
配列と連想配列ではしようする括弧が違うことに注意してください。
配列は「[]」（隅付き括弧)を使用しますが、連想配列の場合は「{}」(中括弧)を使用します。
「{}」(中括弧)の中にキーと値を記述します。
キーと値との間は「：」(コロン)を使って区切りましょう。
連想配列は、キー(プロパティ名)で値を呼び出すことが可能です。
コードはこのようになります。
var person = {name:'田中', sex:'男', age:'20', address:'Tokyo', bloodType:'A'};
console.log(person.name);//「田中」と表示されます。
console.log(person['name']);//「田中」と表示されます。
連想配列では分割代入という少し変わった代入方法も利用することが可能です。
分割代入はこのように記述します。
var person = {name:'田中', sex:'男', age:'20', address:'Tokyo', bloodType:'A'};
var{name, sex, age, address, bloodType} = person
console.log(name);//「田中」と表示されます。
また、分割代入する際は新たなキーや値を代入することができます。
このようなコードを記述することで、新たなキーや値を代入することが可能です。
var person = {name:'田中', sex:'男', age:'20', address:'Tokyo', bloodType:'A'};
var{name, sex, age, address, bloodType, hobby = 'baseball'} = person
console.log(hobby); //「baseball」と表示されます。
条件分岐
プログラミングで欠かせないのが条件分岐です。
まず、条件分岐の簡単な例を紹介します。
var score = 90; console.log(( score >= 70) ? '合格' : '不合格');//「合格」と表示されます。
上記のコードは、「score」に代入された値が「70」以上であれば「合格」と表示され、「69」以下の場合は「不合格」と表示されます。
「?」のあとの記述で「true」のときと「false」のときの処理を変えています。
今回の場合は、「true」のときに「合格」、「false」のときに「不合格」と表示させます。
また、以下のような演算子を使用することでより複雑な条件式をつくることが可能です。
| 演算子 | 説明文 | 使用例 |
| && | 左辺と右辺の式が共にtrueの場合はtrue | 10 === 10 && 1000 === 1000//true |
| || | 左辺と右辺の式どちらかがtrueの場合はtrue | 10 === 10 && 1000 === 5000//true |
| ! | 式がfalseの場合はtrue | !(10 > 5000)//true |
コードで記述するとこのようになります。
a = 100; b = 500; console.log(a === 100 && b === 500);//「true」と表示される console.log(a === 500 && b === 500);//「false」と表示される console.log(a === 100 || b === 100);//「true」と表示される console.log(a === 600 || b === 300);//「false」と表示される
また、データ型で演算をおこなう「typeof」もあります。
「typeof」はこのようにして使用します。
var a = '文字列です';
var b = 100;
var c = true;
var d = ['HTML', 'CSS', 'Javascript', 'PHP'];
var e = {name:'田中', sex:'男', age:'20', address:'Tokyo', bloodType:'A'};
console.log(a);//string
console.log(b);//number
console.log(c);//boolean
console.log(d);//object
console.log(e);//object
このように「typeof」ではデータの型を判別することが可能です。
また、「if」を使って条件分岐することもできます。
ifを使用した文はこのようになります。
var hoge = 100;
if (hoge >= 100){
console.log('hogeの値は100以上です。');
}else{
console.log('hogeの値は99以下です。');
}
関数
与えられた入力をもとに処理をおこない、結果を返す仕組みが関数です。
関数はこのように記述します。
function 関数名(引数){
処理の内容
return 戻り値;
}
関数を理解する上で欠かせないのが、「引数」と「戻り値」です。
引数は関数の処理の内容を変更できるパラメーターになります。
返り値は、処理の結果を呼び出しもとに返します。
実際に関数のコードを見てみましょう。
function sankaku(base, height){
return base * height/2;
}
console.log('三角の面積は'+sankaku(10, 10)+'です。');
また、関数を使用する上で気をつけるべきなのは「スコープ」です。
スコープを簡単に説明すると、変数が参照できる範囲になります。
・全体から参照できるスコープが「グローバルスコープ」
・定義されたところから参照できるスコープが「ローカルスコープ」
下記のコードを例に「グローバルスコープ」と「ローカルスコープ」の違いについて説明します。
var a = 'グローバルスコープ';
function hoge(){
var a = 'ローカルスコープ';
return a;
}
console.log(a);//「グローバルスコープ」と表示される
console.log(hoge());//「ローカルスコープ」と表示される
「a」という変数に「グローバルスコープ」と「ローカルスコープ」という値が代入されていますが、スコープが違うため処理の結果も違います。
このような違いがあることも覚えておきましょう。
まとめ
いかがでしたか？
今回紹介した内容をマスターするだけで、Javascriptの基礎の大部分を習得できます。
ぜひ、この機会にマスターしてみてください。