【これだけは覚えたい】初心者もマスターできるjavascriptの基礎

毎年需要が伸びているプログラミング言語といえば、javascriptです。

「HTMLとCSSはできるけど、javascriptはちょっと…」という方もいると思います。

HTML・CSSと比べるとjavascriptは少し難易度は上がりますが、基礎的な部分を理解すればすぐに習得できます。

今回は初心者の方も理解できるように基礎部分からわかりやすく説明するので、ぜひ参考にしてください。

そもそもjavascriptって何？

javascriptという言葉を初めて聞いた人は、「javascriptって何」と思うでしょう。

WEBサイトにおいてjavascriptは、アニメーションや検索結果のリアルタイム表示などを実装するときに使われます。

例えば、スライダーやタブメニューなどはjavascriptで実装することも可能です。

現在では、ほとんどのWEBサイトでjavascriptが使用されるほど需要の高い言語です。

フェイスブックやツイッターもjavascriptを使用しています。

javascriptを理解するにはHTMLとCSSの知識が必要

javascriptを理解するためには、まずHTMLとCSSの知識が必要です。

まずは、HTMLの知識から説明します。

HTMLの要素やタグを理解しましょう。

要素やタグを説明するために、このようなサンプルコードを用意しました。

HTML

<div id="sample">idのサンプルです。</div>

HTMLには開始タグと終了タグがあります。

サンプルコードの場合、「div id=”sample”」が開始タグになり、「/div」が終了タグになります。

また、HTMLにはタグというものがあります。

サンプルコードの場合、「div」の部分がタグです。

開始タグの中には、属性と属性値が含まれています。

サンプルコードでは、「id」が属性になり、「sample」が属性値です。

javascriptでは、タグや属性値を使用することが多いので、これらの名称は必ず覚えましょう。

次は、CSSの基礎知識を覚えましょう。

HTMLと比べるとCSSはシンプルで、覚えることは少ないです。

まずは、CSSのサンプルコードを見て見ましょう。

CSS

.sample{
    color: red;
}

CSSで覚える名称は以下の3つです。

・セレクタ
・プロパティ
・値

セレクタとは、サンプルコードの「.sample」の部分になります。

スタイルを適用させたい部分をセレクタで指定します。

なので、ここにはタグ名・属性値などを記述することが多いです。

プロパティとは、サンプルコードの「color」の部分です。

ここでは、「文字色を変えたい」「幅を広げたい」など適用させるスタイルの種類を指定します。

サンプルコードのプロパティは、文字色を変化させています。

値とは、プロパティの設定値です。

サンプルコードでは、「red」の部分が値です。

ここでは、「文字色に設定する色」を指定しています。

「red」を指定しているので、文字色は赤色になります。

「color」の場合、「red・blue・black・white」などを指定することが可能です。
(カラーコードを指定することもできます。)

HTMLとCSSの基礎知識が理解できたら、javascriptの学習に入りましょう。

javascriptを使用するための下準備

現在、javascriptを使用する場合は外部ファイルを読み込んで、そのファイルにjavascriptを記述するのが一般的です。

HTMLファイルに直接javascriptコードを記述することも可能です。

しかし、HTMlファイルにHTMLコードとjavascriptコードが混在してしまうと見にくくなり、保守性が低下します。

コードを見やすくするためにも、HTMLコードとjavascriptコードを分けて書くのがおすすめです。

外部のjavascriptファイルを読み込むためには、HTMLファイルに以下のコードを記述します。

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

また、javascriptの外部ファイルを読み込むコードはHTMLファイルのbodyタグの直前に記述するのがおすすめです。

これで下準備は完了です。

実際にjavascriptのコードを書いてみよう

ここまで準備ができたら、実際にjavascriptのコードを書いてみましょう。

javascript

window.alert("これはjavascriptで表示しています");

このように記述して、サイトに訪問するとこのように表示されます。

上のコードでは、javascriptで以下のように命令しています。

「ウィンドウを表示させて、その中に(これはjavascriptで表示しています)と表示する。」

このようにjavascriptでは、ウィンドウの表示・非表示など動的な機能を実装できます。

要素を取得する

次はjavascriptで要素を取得しましょう。

要素とは、HTMLのタグや属性値などが要素です。

要素を取得することで、その部分に変化をつけることができます。

要素が取得できなければ、javascriptで変化を加えることができません。

要素の取得方法は必ず覚えましょう。

まずは、このようなサンプルコードを見てください。

HTML

<div id="sample">これはサンプルコードです。</div>
[html]

javascript
[html]
document.getElementById("sample").textContent = "これはjavascriptで表示を変えています。";

ブラウザではこのように表示されています。

HTMLファイルでは、「これはサンプルコードです。」と記述されていました。

しかし、ブラウザで確認すると「これはjavascriptで表示を変えています。」と表示されています。

これは、javascriptでテキストの内容を変えているからです。

まず、HTMLファイルではdivタグに「sample」というidを付与しています。

その中には、「これはサンプルコードです。」というテキストが記述されています。

「これはサンプルコードです。」というテキスト変更するためには、javascriptで要素を取得することが必要です。

要素を取得するために、以下のコードを記述しています。

javascript

document.getElementById("sample")

このように記述することで、指定した要素を取得できます。

括弧で括っている部分が取得する要素です。

なので、今回は「sample」という要素を取得しています。

javascriptで要素の取得は、よく使用するので必ず覚えてください。

テキストの内容を変更するためにメソッドを使用します。

メソッドを簡単に説明すると、「〇〇しなさい」と命令をだす機能です。

上のサンプルコードでは、「textContent」というメソッドを使用しました。

textContentメソッドの後に変更後のテキストを記述することで指定したように変更が適用されます。

textContent = "これはjavascriptで表示を変えています。";

またこのように記述することで、テキストを表示することも可能です。

document.body.innerText = "これはjavascriptで表示を変えています。";

これで、要素の取得ができるようになりました。

変数を使う

javascriptだけでなくプログラミングをする上で欠かせないのが「変数」です。

変数を簡単に説明すると、データをまとめて保存することになります。

変数を使用することでデータの扱いが簡単になり、使いやすくなるのがメリットです。

変数は大きく分けて4つのステップになります。

1.変数を定義する
2.変数にデータを代入する
3.変数からデータを読み取る
4.変数に格納されたデータを変更する

これらの手順を順番に説明します。

1.変数を定義する
変数を使用するときは、まず変数を定義することが必要です。

変数を定義するときは、このように記述します。

javascript

var sample

変数を定義するときは「var」という単語を使用します。

var 変数名

上のサンプルコードでは、「sample」が変数名です。

変数名は自分の好きな名前を設定することが可能です。

しかし、一部使用できない名前やルールがあります。

命名ルールには、このようなモノがあります。

使用できない変数名	理由
24hour	最初の文字が数字
year-month	-(ハイフン)は使用できない
black&white	&(アンバサンド)は使用できない

また、変数名に使用できない予約語は以下の一覧です。

・break
・case
・catch
・class
・continue
・debugger
・default
・default
・delete
・do
・else
・enun
・export
・extends
・finally
・for
・function
・if
・implements
・import
・in
・instanceof
・interface
・let
・new
・package
・privete
・protected
・public
・return
・static
・supper
・switch
・this
・throw
・try
・typeof
・var
・void
・while
・with
・yield

これらの単語と記号は変数に使用できません。

しかし、以下の単語と記号は変数に使用することが可能です。

使用できる変数名	理由
sample	予約語や使用できない記号が含まれていない
_sample	_(アンダースコア)は使用できる
$sample	$(ダラーマーク)は使用できる
sample9	数字は最初でなければ使用できる

変数名を設定するときは、誰が見てもわかりやすい名前をつけるのがおすすめです。

代入しているデータわかりやすい、変数名をつけましょう。

例えば、このようなモノになります。

・数字を代入している→num、number
・合計数値を代入している→total、sum
・処理の結果を代入している→result
・文字列を代入している→text
・電話番号を代入している→tel、tel_number
・メールアドレスを代入している→e_mail
・住所を代入している→address

2.変数にデータを代入する
変数を定義した次は、変数にデータを代入しましょう。

このように記述することで変数にデータを代入できます。

javascript

var text = "これはサンプルデータです。";

大切なのは「=」イコールの意味です。

ここでは、左辺と右辺が等しいという意味の「=」イコールではありません。

左辺に右辺を代入するという意味です。

つまり、上のサンプルコードでは「text」の変数名に「サンプルデータ」というテキストデータを代入しています。

3.変数からデータを読み取る
以下のコードを記述することで、変数を読み取ることが可能です。

javascript

var text = "これはサンプルデータです。";

console.log(text);

この変数を確認するために、Chromeブラウザを開きます。

Chromeブラウザが開いたら、以下の操作をして開発者ツールを開きましょう。

Mac:Command+Alt+i
Windows:F12

開発者ツールが開いたら、タブに表示されている「Console」をクリックします。

すると、「text」の変数に代入した「これはサンプルデータです」が表示されています。

4.変数に格納されたデータを変更する
代入した変数のデータは書き換えることが可能です。

変数に格納したデータを変更するためには、もう一度変数にデータを入れるだけです。

以下のコードは、一度代入したデータを変更しています。

javascript

var text = "これはサンプルデータです。";

console.log(text);

var text = "変数のデータを書き換えました。";

console.log(text);

consoleで確認すると、このように表示されます。

「これはサンプルデータです。」と「変数のデータを書き換えました。」が表示されています。

textの変数には「これはサンプルデータです。」が代入されていました。

しかし、その後に、「var text = “変数のデータを書き換えました。”;」と記述することで変数に代入されていたデータが変更しました。

このように変数のデータを書き換える場合は、もう一度データを代入しましょう。

演算

プログラミングをする上で必要になるのが演算です。

演算を簡単に説明すると、足し算・引き算などの計算です。

演算は直感的に使用できます。

javascript

console.log(3 + 2);//「5」と表示される
console.log(3 - 2);//「1」と表示される
console.log(3 * 2);//「6」と表示される
console.log(3 / 2);//「1.5」と表示される
console.log(3 % 2);//「1」と表示される(余り)

consoleで確認すると、このように表示されます。

また、先ほど説明した変数を使って演算することも可能です。

「num」という変数に「3」を代入します。

計算式や値は、全く同じなので表示される結果も全く同じになります。

var num = 3;

console.log(num + 2);//「5」と表示される
console.log(num - 2);//「1」と表示される
console.log(num * 2);//「6」と表示される
console.log(num / 2);//「1.5」と表示される
console.log(num % 2);//「1」と表示される(余り)

consoleで確認すると、先ほどと同じ結果が表示されます。

関数と引数

関数を簡単に説明すると、複数の計算や処理を1つにまとめたモノです。

引数を簡単に説明すると、変動する値を設定する機能になります。

関数と引数は、このように記述します。

function 関数名(引数){
    この部分に処理を記述する
}

このようなサンプルコードを使って、関数と引数を説明します。

javascript

//入力した数値に消費税をかけるプログラム

function tax(price){
    return price * 1.08;
}
var total = tax(1000);//括弧の中に任意の数値を入力する
console.log(total);//入力した数値に「1.08」をかけた数字が表示される

上のサンプルコードは入力した数値に「1.08」をかけて税込数字で表示するコードです。

上から順番に説明します。

関数名には「tax」を設定しており、引数には「price」を設定しています。

括弧の中では、引数に「1.08」をかけた結果を表示させる処理を記述。

「total」という変数に関数と引数を代入しています。

引数に任意の数字を入れることで消費税である「1.08」を自動的にかけることが可能です。

consoleで確認すると、このように表示されます。

引数に設定している数値を変えることで、表示される結果が変化します。

サンプルコードでは、引数に「1,000」という数字が設定されています。

引数の数字を変えることで、表示される結果も変化するのが特徴です。

例えば、以下のようにコードを記述します。

function tax(price){
    return price * 1.08;
}
var total = tax(1000);
console.log(total);//「1080」と表示される

function tax(price){
    return price * 1.08;
}
var total = tax(2000);
console.log(total);//「2160」と表示される

function tax(price){
    return price * 1.08;
}
var total = tax(3000);
console.log(total);//「3240」と表示される

function tax(price){
    return price * 1.08;
}
var total = tax(4200);
console.log(total);//「4536」と表示される

consoleで確認すると、このように表示されます。

条件分岐

プログラミングする上で、ほぼ100%使用するのが条件分岐です。

条件分岐とは、設定した条件に合う・合わないで結果を変えれる機能になります。

条件分岐は、このように記述します。

javascript

if(条件式){
   条件に合った場合の処理を記述します。
}

条件分岐を使って、このようなコードを記述することが可能です。

javascript

var sample = window.prompt('アラートウィンドウを表示させますか？');

if(sample === 'はい'){
   window.alert('アラートウィンドウを開きました');
}

このようなコードを記述して、ブラウザを確認するとこのように表示されます。

「window.prompt」を使用することで、文字が入力できるウィンドウが開かれます。

ここに「はい」と入力して「OK」ボタンをクリックすると、アラートウィンドウが表示されます。

　これは、「はい」と入力されたときに、アラートウィンドウが開くように以下の部分で記述されているからです。

javascript

if(sample === 'はい'){
   window.alert('アラートウィンドウを開きました');
}

上のコードでは「はい」と入力された場合、アラートウィンドウが開くように記述されています。

「===」は左辺と右辺が等しいことを表しています。

さらに、条件分岐を細かく分けたいときは「else if」を使いましょう。

「else if」を使えば、より細かく条件分岐ができます。

例えば、このようなコードを見てください。

javascript

var sample = window.prompt('アラートウィンドウを表示させますか？');

if(sample === 'はい'){
   window.alert('アラートウィンドウを開きました');

}else if(sample === 'いいえ'){
    document.body.textContent = "「いいえ」と入力されました";

}

このように記述して、ブラウザを確認すると先ほどと同じようにウィンドウが表示されます。

ここに、「いいえ」と入力して「OK」ボタンをクリックします。

するとこのように、表示されます。

このように表示される理由は、「else if」で設定しているからです。

javascript

var sample = window.prompt('アラートウィンドウを表示させますか？');

if(sample === 'はい'){
   window.alert('アラートウィンドウを開きました');

}else if(sample === 'いいえ'){
    document.body.textContent = "「いいえ」と入力されました";

}

このように、「いいえ」と入力された場合。「else if」で設定された処理が実行します。

配列

配列とは、複数のデータを1つの変数にまとめて格納することです。

1つの変数に複数のデータをまとめることで、より扱いやすくなります。

配列を使うときは、このように記述します。

javascript

var 変数名　= [データ1,データ2,データ3,データ4];

実際にコードを見てみましょう。

javascript

var color = ['black', 'white', 'red', 'blue', 'green', 'pink'];

console.log(color);

consoleで確認すると、このように表示されます。

代入した複数のデータが表示されているのがわかります。

特定のデータだけ読み込む場合は、このように記述します。

javascript

var color = ['black', 'white', 'red', 'blue', 'green', 'pink'];

console.log(color[0]);

consoleで確認すると、このように表示されます。

代入したデータの1番最初の「black」が表示されています。

プログラミングは「0」から始まるので、「0」と入力すると最初のデータである「black」が表示されます。

また、配列にデータを追加するときは、このように記述しましょう。

javascript

変数名.push(代入するデータ)

サンプルコードは、このようになります。

javascript

var color = ['black', 'white', 'red', 'blue', 'green', 'pink'];

color.push('gray')

console.log(color);

consoleで確認すると、このように表示されます。

配列のデータに「gray」が追加されました。

まとめ

いかがでしたか？

javascriptは、フロントからバックエンドまで色々なことができます。

javascriptを習得するためには、基礎を理解することが必要です。

javascriptをマスターするためには、本記事で紹介した内容を覚えてください。