【入門】JavaScriptの基礎講義【演算子/基礎文法/関数を解説】

こんにちは、たつきです。
現役でWEBエンジニアをやっています。

本記事ではJavaScriptの基礎である【演算子/基礎文法/関数】を解説していきます。

本記事の内容

JavaScriptの基礎知識
JavaScriptの演算子の基礎
JavaScriptの色々な書き方
JavaScriptの関数の基礎

これからJavaScript学ぶ方や学んでいる方は参考にどうぞ。

JavaScriptの基礎知識

サクッとJavaScriptについて解説していきます。

JavaScriptとは

ブラウザ上で動かす事ができるプログラム言語。HTML/CSSを動的に書き換えたりする事ができる。

JSと呼ばれているのが「JavaScript」になります。

主にホームページに動きを付けたいときに使います。HTMLにclassを追加したり削除したりなど、書き換えたり、付け加えたりする事ができる言語です。HTML/CSSの学習後に学日ましょう。

WEB制作の現場では、JavaScriptを使いやすくした「jQuery」というライブラリを使う事が多いです。JavaScriptをよりシンプルに書く事ができるので、初心者の方はJavaScriptの基礎をサクッと学んでjQueryを使っていくのが良いのかなと思います。

Javaとは別の言語になります

よくJavaScriptの事をJavaと間違える方がいますが、全くの別物の言語になります。

Java：システム構築やアプリ開発向け
JavaScript：WEBサイトやWEBサービス向け

名前が似ているので同じようなものだと勘違いする方もいますが、別物になります。「メロンとメロンパンくらい違う！」と言われたりrしています。

JavaScriptの読み込み方

scriptタグを使用して読み込みます。
主に下記の方法で読み込みます。

直接ファイルに書き込む
外部のjsファイルを読み込む

この２種類を覚えておけば問題なしです。

直接ファイルに書き込む

JavaScript
<script>

//ココにJSコードを書いていく

</script>

HTMLのファイルに直接JavaScriptを書いていく場合は上記のように書いていきます。

短い記述の場合などは、このようにHTMLファイルに直接書く事もあります。

linkタグで外部のjsファイルを読み込む

外部にjsファイルを作成してそれを読み込む方法です。

index.html
style.css
main.js

上記のようにjsという拡張子をつける事でjsファイルとして認識してもらえます。上記のファイルを下記のように書くとファイルを読み込む事ができます。

JavaScript
<script src="main.js"></script>

linkタグと使い方は似ています。jsファイルの場合はscriptタグを使用して読み込むというのを覚えていきましょう。

JavaScriptの書く場所

HTML内でscriptタグが使える場所は下記の通りです。

headタグ内
bodyタグ内

上記の２箇所でscriptタグをしようする事ができます。

headタグ内に書く場合

JavaScript
<head>
    <script src="main.js"></script>
    <script>
        //コード
    </script>
</head>

headタグ内で読み込む場合は上記のように書きます。分かりやすいようにheadタグの上などに書いておけばOKです。

bodyタグ内に書く場合

JavaScript
<body>


    <script src="main.js"></script>    
    <script>
        //コード
    </script>
</body>

bodyタグ内に書く場合の記述方法です。基本的にはbodyタグの下に記述するようにしましょう。途中や上に書いてしまうとコードが正しくても動かなかったりするのでエラーの原因になります。

基本はbodyタグの下で読み込む

JavaScriptで動き加えたい要素が読み込まれる前にJavaScriptを読み込むと動作しないです。

なので、基本的にはbodyタグの下で読み込む事を意識しましょう。

JavaScript
<body>
    <p class="move">対象のタグ</p>

    <script src="main.js"></script>
</body>

コードは上から順に読み込まれていきますので、HTMLが読み込まれた後にjsを読み込ませるのがベターなやり方です。

文字列はクォーテーションで囲む

プログラミング全般に言える事ですが、文字列はクォーテーションで囲まないとエラーになります。

JavaScriptの場合はシングルクォーテーションでもダブルクォーテーションでもどちらでも大丈夫です。

JavaScript
var name = 'Tatsuki'

上記のような感じで、Tatsukiという文字列を書く場合は「”（シングルクォーテーション）」か「””（ダブルクォーテーション）」で囲います。

ここではnameという変数にTatsukiという文字れるを入れています。詳しい書き方は後で解説していくので分からなくて大丈夫です。

JavaScriptの演算子の基礎

計算したりする記号の事を「演算子」と呼びます。

本記事で解説するのは下記の4つです。

代入演算子
算術演算子
比較演算子
論理演算子

順番に解説していきます。

代入演算子

変数に何かの値を代入する時にしようする演算子です。

JavaScript
var number = 2
var name = 'Tatsuki'

上記では変数numberに2という値を代入していて、変数nameに文字列のTatsukiを代入しています。Tatsukiは文字列なのでクォーテーションで囲っています。

「=」は右のものを左へ入れるという意味です。

こんな感じで覚えておくと忘れにくいです。「=」を見つけたら何かを代入しているなというのを意識しましょう。

変数とは

数値や文字列などの値を入れる事ができる箱のようなものです。

変数名は自由に決める事ができますが、下記はNGです。

最初に数字は禁止：var 1name
全角や日本語は禁止：var NAME名前
予約語は禁止：プログラム内部に定義されている単語

上記の事項は禁止です。エラーになります。

参考：予約語の一覧

算術演算子

名前の通りで計算をする演算子です。

全部で5つあります。

加算演算子（+）
減算演算子（-）
乗算演算子（*）
除算演算子（/）
剰余算演算子（%）

順番にサクッと解説していきます。

加算演算子（+）

JavaScript
var number1 = 2
var number2 = 4
var answer = number1 + number2

足し算をする事ができます。
上記では変数answerには6という値が入ります。

減算演算子（-）

JavaScript
var number1 = 2
var number2 = 4
var answer = number1 - number2

引き算をする事ができます。
上記では変数answerには-2という値が入ります。

乗算演算子（*）

JavaScript
var number1 = 2
var number2 = 4
var answer = number1 * number2

掛け算をする事ができます。
上記では変数answerには8という値が入ります。

除算演算子（/）

JavaScript
var number1 = 2
var number2 = 4
var answer = number1 / number2

割り算をする事ができます。
上記では変数answerには0.5という値が入ります。

剰余算演算子（%）

JavaScript
var number1 = 2
var number2 = 4
var answer = number1 % number2

余りを計算する事ができます。
上記では変数answerには2という値が入ります。

追記：インクリメントとデクリメント

変数に対してプラス1したり、マイナス1したりする事ができます。

number++（インクリメント）：変数numberをプラス1する
number–（デクリメント）：変数numberをマイナス1する

条件式などで使う事があるので覚えておきましょう。

比較演算子

値の大きさを比較する演算子です。

全部で6つあります。

「==」：同じの時
「!=」：違う時
「<」：より小さい時
「>」：より大きい時
「<=」：以下の時
「>=」：以上の時

if文などの条件式で使う事が多いです。
順番に使い方を解説していきます。

「==」：同じの時

JavaScript
if( number == 2 ){ //実行する命令 }

「もし変数numberの中身が2だったら命令を実行する」という意味です。

「!=」：違う時

JavaScript
if( number != 2 ){ //実行する命令 }

「もし変数numberの中身が2じゃなかったら命令を実行する」という意味です。

「<」：より小さい時

JavaScript
if( number < 2 ){ //実行する命令 }

「もし変数numberの中身が2より小さかったら命令を実行する」という意味です。

「>」：より大きい時

JavaScript
if( number > 2 ){ //実行する命令 }

「もし変数numberの中身が2より大きかったら命令を実行する」という意味です。

「<=」：以下の時

JavaScript
if( number <= 2 ){ //実行する命令 }

「もし変数numberの中身が2以下だったら命令を実行する」という意味です。

※以下なので2と同じ場合も実行します。

「>=」：以上の時

JavaScript
if( number >= 2 ){ //実行する命令 }

「もし変数numberの中身が2以上だったら命令を実行する」という意味です。

※以上なので2と同じ場合も実行します。

論理演算子

比較演算子と似ています。
使い方も同じです。

全部で3つです。

「&&」：さらに
「||」：または
「!」：じゃない（否定）

こちらも順番に使い方を解説していきます。

「&&」：さらに

JavaScript
if( number1 == 2 && number2 == 4 ){ //実行する命令 }

「もし変数number1の中身が2で、さらに変数number2の中身が4だったら命令を実行する」という意味です。

※どちらとも一致していたら実行

「||」：または

JavaScript
if( number1 == 2 || number2 == 4 ){ //実行する命令 }

「もし変数number1の中身が2、または変数number2の中身が4だったら命令を実行する」という意味です。

※どちらかが一致していたら実行

「!」：じゃない

JavaScript
if( !(number1 == 2) ){ //実行する命令 }

「もし変数number1の中身が2じゃなかったら命令を実行する」という意味です。

JavaScriptの色々な書き方

主要な文法は4つです。

switch文
if文
while文
for文

順番に解説していきます。

switch文

「もし〇〇の場合、〇〇する。または〇〇の場合は〇〇する。」という使い方をします。

こんな感じで書きます。

JavaScript
switch( number ) {
    case1:
        alert('変数numberの中身は1です');
        break;
    case2:
        alert('変数numberの中身は2です');
        break;
    default:
        alert('変数numberには1と2以外の数値が入ってます');
        break;
}

もし変数numberの中身が1だったら、アラートで「変数numberの中身は1です」と表示する。または変数numberの中身が2だったらアラートで「変数numberの中身は2です」と表示する。それ以外の数値だったらアラートで「変数numberには1と2以外の数値が入ってます」表示する。

こんな感じの意味になります。

if文

「もし〇〇の場合は〇〇する。そうではなく、もし〇〇の場合は〇〇する。それ以外のものは〇〇する。」という使い方をします。

こんな感じで書きます。

JavaScript
if( number == 1 ){
    alert('変数numberの中身は1です');
}elself( number == 2 ){
    alert('変数numberの中身は2です');
}else{
    alert('それ以外の数値です');
}

もし変数numberの中身が1だったら、アラートで「変数numberの中身は1です」と表示する。そうではなくて、もし変数numberの中身が2だったらアラートで「変数numberの中身は2です」と表示する。それ以外だったらアラートで「それ以外の数値です」と表示する。

こんな感じの意味になります。英語が少し分かると理解しやすいと思います。

while文

「〇〇の間、〇〇をする。」という使い方をします。

こんな感じで書きます。

JavaScript
var number = 0;
while( number < 100 ){
    alert( number );
    i++;
}

変数numberを定義して0を代入する。変数numberが100より小さかったら、アラートで「変数numberの中身」を表示する。その後に変数numberにインクリメント（プラス1する）

こんな感じの意味です。

for文

「〇〇の間、〇〇をする。」という使い方をします。
while文と同じ意味になります。

イメージとしてはwhile文の短縮バージョンになります。

JavaScript
for( var number = 1 ; number < 100 ; number++ ){
    alert( number );
}

こんな感じの意味です。
while文とfor文は使い方が同じなので、自分の使いやすい方でOKです。僕はwhile文が好きです。

JavaScriptの関数の基礎

最後に関数の解説をして終わりにします。

関数とは

複数の命令を1つにまとめたものです。1つにまとめる事で同じ処理をする場合はその関数を呼び出す事で使う事ができる。

短いJavaScriptを使う時は良いのですが、複雑になってくるとゴチャゴチャしてきますので、関数というものを作り命令を1つの塊にする事が良くあります。

はじめは難しいと思うので徐々に慣れておけばOKです。

関数の書き方

JavaScript
function 関数名(引数1,引数2…){

//ココに処理を書く

return 値
}

こんな感じで書きます。

関数名は自由につける事ができて、引数名は任意で設定する事ができます。それで最後に処理した後の値をreturnを使って返すという処理です。

引数とreturnがなくても関数は使えますので、必要に応じて使う覚えておきましょう。

さいごに：簡単な処理の場合はjQueryでOKです。

JavaScriptの基礎を解説してきましたが、WEB制作で簡単な動きをつける時などはjQueryの方が簡単でスッキリ書けるので、JavaScriptの基礎だけおさえてまずはjQueryを学ぶのが良いかと思います。

jQueryに関しては下記の記事で解説しますのでそちらをどうぞ。

【入門】jQueryの基礎講義【使い方と書き方を解説】