Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@myktmht(とーもくん さん)

今更ながらJavaScriptを勉強し直す 2. 基本文法

Last updated at Posted at 2020-01-29

はじめに

前回から引き続き、JavaScript(以下JS)のことについて書いていきます。
今回は、基本文法についてまとめていきます。

文法の特徴

前提知識

どこにどのように書いていけばいいのか、2つの方法がある。

1. コンソールに直接記入する/表示する

JSはブラウザ上で動く言語なので検証ツールからコンソールを開くことでコードを書ける。
ブラウザ上で右クリック(Macなら指2本でタップ)→「検証」→consoleから開ける。
コード記述のみではなく、実行結果を表示できる。
Image from Gyazo

2. ScriptタグでJSコードを呼び出す

HTMLのコードの中にスクリプトタグを埋め込むことで呼び出せる。

index.html
<body>
  <script>
    // ここにJSコードを記述する。
  </script>
</body>

上記以外にも、jsファイルを指定することで読み込める。
例） ディレクトリが以下の時
folder
・index.html
・script.js
・style.css

以下のように記述することでjsファイルを読み込める。

index.html
<body>
  <script src="script.js"></script>
</body>

JavaScriptを書いてみる

ファイルを作成し、index.htmlとscript.jsの2つを作成する。
index.htmlにjsファイルを読み込む記述を追記する

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

これでJavaScriptを実装する準備が完了。

アラートを表示させる(window.alert)

window.alert();
ブラウザでアラートを表示させるメソッド。
引数としてアラートに表示させる情報を渡す。（文字列でも変数でも良い）
:warning:テキストはシングルクォート(')かダブルクォート(")で囲む

このメソッドを用いてブラウザ上にアラートを表示させてみる。

script.js
window.alert('こんにちは');

次にindex.htmlをブラウザで開く。すると、以下のようにアラートがブラウザ上で表示される。
Image from Gyazo

コンソールにテキストを表示させる(console.log)

console.log();
ブラウザのコンソールにテキストを表示させるメソッド、引数としてコンソールに表示させる情報を渡す。
window.alertと同様に変数を引数に渡せる。

このメソッドを用いてコンソールにテキストを表示させてみる。

script.js
console.log('こんばんは');

先程と同様にindex.htmlをブラウザで開き、コンソールを開くと以下のように表示されるはず。
Image from Gyazo

変数の宣言

変数を宣言する際はvarの後に、半角スペースを挟んで変数名を記述する。
※ ES6以降はletとconstを用いる。（今回はletを使用します。）
letは、後で書き換えることのできる変数宣言
constは、後で書き換えることのできない変数宣言
うまく使い分けて、使いやすいコードを書けるようにしていきたい（願望）

では、変数を使用して、先程のコンソールテキストを書き換えてみる。

script.js
// letで変数宣言。nameという変数にyamadaを代入。
let name = 'yamada';

// console.logに変数nameと「さん、こんばんは」という文字列を記述
console.log(name + 'さん、こんばんは');

修正できたらブラウザをリロードすると以下のように表示される。
Image from Gyazo

条件分岐(if文)

条件分岐をする際は、if文を用いる。

ルール

  1. 条件式は()で括ること
  2. 条件式の後に続く波括弧{}内の処理が実行される
  3. 複数条件を指定する場合は、elseの後に続けてif文を記述すること
script.js
if (条件式1) {
  // 条件式１がtrueの時の処理
} else if (条件式２) {
  // 条件式１がfalseで条件式２がtrueの時の処理
} else {
  // 条件式１も条件式２もfalseの時の処理
}

では、script.jsに以下の記述してみる。

script.js
// 変数numを宣言
let num = 60;

// if文を用いて、条件分岐を記述
// numが15で割り切れる場合は3と５の倍数ですと表示
if (num % 15 == 0) {
  console.log(num + 'は3と5の倍数です');
// 15で割り切れず、３で割り切れる場合は３の倍数ですと表示
}  else if (num % 3 == 0) {
    console.log(num + 'は３の倍数です');
// 15でも３でも割り切れず、5で割り切れる場合は５の倍数ですと表示
}  else if (num % 5 == 0) {
    console.log(num + 'は５の倍数です');
// 上記3つでも割り切れない場合は、３でも５の倍数でもないと表示
} else {
    console.log(num + 'は３の倍数でも、５の倍数でもありません');
}

記述できたら、ブラウザをリロードして以下のように表示できたら成功。
Image from Gyazo
numに代入する数字を変更してしっかり条件式が作用しているか確かめてみる。

配列

まずは、以下のように記述してみる。

script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];

ブラウザをリロードしてコンソールを表示すると、以下のように配列内に含まれる情報を確認できる。
Image from Gyazo

では、この配列を用いて以下の4つの操作を行う。

  1. 配列の要素を取得
  2. 配列の要素数を取得
  3. 配列の要素を追加
  4. 配列の要素を削除

1. 配列の要素を取得

配列の先頭は0から始まる。
今回はJavaScriptを取り出すので、以下のように修正する。

script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list[2]);

ブラウザをリロード、コンソールを確認し、以下のように表示されればOK。
Image from Gyazo

2. 配列の要素数を取得

lengthメソッドを使用して要素数を取得する。
以下のように修正する。

script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list.length);

ブラウザをリロード、コンソールを確認し、5と表示されればOK。
Image from Gyazo

3. 配列の要素を追加

pushメソッドを使用して、追加したい要素を記述を追加
以下のように記述する。

script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.push('GitHub')
console.log(list);

ブラウザをリロード、コンソールを確認し、配列の最後にGitHubが追加されていればOK
Image from Gyazo

4. 配列の要素を削除

① popメソッドを使用して、最後の要素を取り除く
以下のように修正

script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.pop();
console.log(list);

ブラウザをリロードして、CSSという文字列が消えていれば成功
Image from Gyazo

② shiftメソッドを使用して先頭の要素を取り除く

script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.shift();
console.log(list);

ブラウザをリロードして、Rubyという文字列が消えていれば成功
Image from Gyazo

オブジェクトを取り扱う

オブジェクトはデータのまとまりのこと。
配列は順番でデータを管理するが、オブジェクトは名前と値をセットにしてデータを管理する。

オブジェクト

オブジェクトを作成するには、波括弧{}を用いる

let obj = {};

オブジェクトはデータと名前をセットで管理する。このセットをプロパティという。
プロパティを持った状態でオブジェクトを定義することができる。

let obj = {name: yamada};

変数objはnameプロパティを持っている。プロパティは必ず属性名である「プロパティ名」とデータである「値」をセットで持つ。
したがって、nameはプロパティ名、**'yamada'**は対応する値となる。

script.jsに以下を追記する。

script.js
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
console.log(obj);

リロードして、コンソールに変数objに代入した値がセットされていれば成功。
Image from Gyazo

これからこのオブジェクトに対して以下の2つの操作を行う。

  1. プロパティの値を取得
  2. プロパティの値を変更する

1. プロパティの値を変更

オブジェクトに対してプロパティ名を続けて記載することで値を取り出せる。

script.js
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
// 変数objのnameプロパティを取り出す
console.log(obj.name);

ブラウザを更新して、yamadaという値が取り出せていれば成功

2. プロパティの値を変更する

オブジェクトに対してプロパティ名を続けて記載することで値を取り出せる。

script.js
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
// nameプロパティの値をtanakaに変更する
obj.name = 'tanaka';
// nameプロパティを取り出し、コンソールで変更を確認する
console.log(obj.name);

ブラウザを更新して、nameプロパティが'yamada'からtanakaに変わっていれば成功

繰り返し処理(for文)

繰り返しはfor文を用いる。

for (let i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

i = i + 1は変数iを1増やすという意味。処理が1回呼ばれると１増える。
i += 1と表現することもできる。

script.jsを以下のようにする。

script.js
num = 1;
for (let i = 0; i < 10; i += 1) {
  console.log(num + '回目の出力')
  num +=  1
}

ブラウザのコンソールを確認して、以下のように繰り返しの処理の結果が表示されていれば成功。

Image from Gyazo

関数の定義(function文)

functionを用いた関数定義は以下の通り
関数に引数が含まれなかった場合も()は記載する必要がある。

function 関数名(引数) {
  // 処理の内容
}

script.jsに以下を追記

script.js
// sayHelloという関数を定義、内容はconsoleに文字列helloを表示する
function sayHello() {
  console.log('hello');
}

// sayNameという関数を定義、内容はconsoleに引数nameを表示する
function sayName(name) {
  console.log(name);
}

// 変数myNameにyamadaを代入、関数sayNameに変数myNameを引数として代入
let myName = 'yamada';
sayHello();
sayName(myName);

Image from Gyazo

以下のようにコンソールに表示されていれば成功。

関数の戻り値を明示(return)

以下のような関数を定義すると、12という結果が表示されることが期待できる。

script.js
この記述では値が出力されない
// 関数の戻り値を明示
// 関数calcを定義、引数はnum1, num2。処理としてnum1とnum2を掛け算
function calc(num1, num2) {
  return num1 * num2;
}

// 変数num1に3を代入、num2に4を代入。コンソールに関数calcを表示させる
let num1 = 3;
let num2 = 4;
console.log(calc(num1, num2));

Image from Gyazo

JavaScriptではreturnで戻り値を明示する必要がある。
以下のように修正する。

script.js
// 関数の戻り値を明示
// 関数calcを定義、引数はnum1, num2。処理としてnum1とnum2を掛け算
function calc(num1, num2) {
  return num1 * num2;
}

// 変数num1に3を代入、num2に4を代入。コンソールに関数calcを表示させる
let num1 = 3;
let num2 = 4;
console.log(calc(num1, num2));

Image from Gyazo

無名関数

関数の定義には２種類の方法がある。
1つがさっきまで使っていた方法で、関数宣言と呼ばれる。
もう1つが、無名関数を用いた関数式と呼ばれる。

// 関数宣言
function hello(){
  console.log('hello');
}

// 関数式（無名関数）
let hello = function(){
    console.log('hello');
}

関数式の方は、関数自体に名前がないので無名関数と呼ばれる。
script.jsに以下を追記する。

script.js
let hello = function(){
    console.log('hello');
}

hello();

これでコンソールにhelloと表示されれば成功。

関数宣言と関数式の役割には大きな違いはないが、関数式にすることで、何かに代入したり、他の関数に渡しやすくなる。

しかし、読み込みのタイミングが異なる。

hello();
let hello = function(){
    console.log('hello');
}

上記のように変更して、コンソールを確認すると
hello is not a functionとエラーが表示される。
1行目の時点で、関数helloは定義されていないので、エラーが発生するのはしょうがない。

しかし、以下のように関数宣言に変更すると、helloと表示される。

hello();
function hello () {
  console.log('hello')
}

JavaScriptにおいては関数宣言は先に読み込みされるのでエラーが出ない。
しかし、関数式は先に読み込まれないのでエラーが出る。
コードを書く上での実害はあまりないが、こういう特徴を覚えておくといい。

今回はここまで！

次回に続く

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?