JavaScriptの基礎の文法をまとめる

JavaScript
JavaScript

案件でWebアプリの構成の検討のためにサンプルアプリを作っていたのですが、Javaのソースならさらさらっと書けるけど、JavaScriptとなると「文法がよくわからん」となって初歩的なことを調べることが多かったです。Webアプリエンジニアとしてこのままはマズいなと思ったので、JavaScriptの基礎を再勉強することにします。

# 基本的にJavaScript特有の文法について書いていきます。足し算とか引き算とかはいつも通りなので割愛。

基本的な文法

変数

var hello = "Hello World";

普通の変数の宣言です。

let hello = "Hello World";

これまた普通の変数の宣言です。両者の違いは、「var」は同じ変数名の再定義が可能、「let」は不可能であるということです。
letの方が上位互換みたいな感じのようなので、基本的にはletを使っておけばいいです。

const HELLO = "Hello World";

こちらは再代入が不可能な変数です。ほぼ定数みたいなものとして使います。

変数のデータ型

JavaScriptは動的型付けの言語です。変数の宣言時に型を指定しなくても、代入する値に合わせて自動的に型をつけてくれます。
このため、実装時に型を意識することはほとんどありませんが、どんな型があるか知っておくと、デバッグ時に役立ったりするかもしれません。

Number:数値

let num1 = 1;
let num2 = 2;
let num3 = num1 + num2;

num3は数値の「3」となります。

String:文字列

let str1 = "1";
let str2 = '2';
let str3 = str1 + str2;

str3は文字列の「12」となります。

Boolean:論理値

let isFact = true;
let isLie = false;

小文字の場合のみ論理値として認識してくれます。

nullとundefined

let empty = null;
let nothing; // undefined

nullはnullという型の値として扱われるみたいです。意味合いとしては「データがない」ことを表すようですが。
本当にデータがない時はundefinedという状態になります。

ここまでがプリミティブ型です。

配列

let cloud = ['AWS', 'azure', 'GCP'];
alert(cloud[1]); // azure
alert(cloud.length); // 3

同じ型となるデータをまとめて配列として扱います。ここはまあオーソドックス。

Object:オブジェクト

基本的にプリミティブ型以外の値はオブジェクト型という扱いになります。

let human = {
  name : "shun",
  age : 24,
  greeting : function() {
    alert("こんにちは!" + this.name + "です。");
  }
};

alert(human.age); // 24
human.greeting(); // こんにちは!shunです。

オブジェクト内のプロパティは{object名}.{プロパティ名}で取得できます。
関数を定義することもできるみたいですね。呼び出し方は{object名}.{関数名}({引数})です。オブジェクトの関数を呼び出すイメージってのはJavaをやっている身としてはしっくりきます。
オブジェクトを入れ子にして参照したり、オブジェクトに新たなプロパティを追加することもできるみたいです。

関数

# 実はもう上の例でやってるけど気にしない

変数に関数を代入することができます。これはもう違和感。

let shout = function(word) {
  alert(word + "aaaaaaaaaaaaaaaaaaa!!!!!!!")
}
shout('owata'); // owataaaaaaaaaaaaaaaaaaaa!!!!!!!

# 何をやらかしたんでしょうかね?

論理演算子

イコール

console.log(123 == 123); // true
console.log(123 == '123'); // true

console.log(123 === 123); // true
console.log(123 === '123'); // false 値は同じに見えるが型が違う

console.log(123 != 123); // false
console.log(123 != '123'); // false

console.log(123 !== 123); // false
console.log(123 !== '123'); // true 値は同じに見えるが型が違う

=が3つ続く書き方は最初は違和感が強いですよね。型のことを考えると納得ではあります。

制御構文

if

if (age >= 35) {
  console.log('もうおじさん');
} else {
  console.log('まだ若い');
}

# 偏見入ってますごめんなさい

switch

switch (aws) {
  case 'EC2':
    console.log('サーバーです');
    break;
  case 'S3':
    console.log('ストレージです');
    break;
  case 'RDS':
    console.log('データベースです');
    break;
  default:
    console.log('AWSのサービスです');
}

while

let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

無限ループにするときはwhile(true)とする。

let i = 1;
while (true) {
  console.log(i);
  i++;
  if(i > 5)
    break;
}

for

for (let i = 1; i <= 5; i++) {
  console.log(i);
}
ちなみに

JavaScriptでは配列に対してforEach関数が使えるらしいけど、それを使うのはあまりセンスがないらしい。filter関数やfind関数、map関数などの配列を操作、処理する関数が充実しているので、そちらを利用するのがベターみたいです。

関数

/* 引数の数字の階乗を返却します */
function factorial(num) {
  let factorial = 1;
  for (let i = num; i > 1; i--) {
    factorial *= i;
  }
  return factorial;
}

let num = factorial(5);
console.log(num); // 120

引数や戻り値の定義などは普通です。関数を変数に入れるパターンと普通に定義するパターンの使い分けがよくわからない。。

DOM操作

JavaScriptといえばDOM操作です。DOMとは簡単に言うと、HTMLの個々の要素(divタグとかpタグとかtableとか)のことです。これらをJavaScriptで操作することによって、動的なWebページの挙動を実現します。つまりとっても大事。

サンプル
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <h1 id="title">Hello JavaScript!</h1>
    <div id="content">
      <p id="main-content" class="text">
        コンテンツです。
      </p>
    </div>
  <script type="text/javascript">
  </script>
  </body>
</html>

今回はこちらのHTMLファイルをJavaScriptでDOM操作していきます。

要素の取得

DOM要素をオブジェクトとして取得したり、その中身のテキストを文字列で取得したりします。

// IDで取得
let title = document.getElementById("title");
// 要素のテキストを取得
console.log(title.textContent); // Hello JavaScript!

// classで取得
let text = document.getElementsByClassName("text");
// 要素のタグを取得
console.log(text[0].tagName); // P

// タグで取得
let div = document.getElementsByTagName("div");
// 要素のIDを取得
console.log(div[0].id); // content

IDは重複しないので、IDで取得すれば単一のDOMオブジェクトになりますが、その他の取得方法の場合は、複数の要素を取得する可能性があるので、配列になって取得されます。

基本的にはgetElementByIdを使うことが多いかな?(そもそもライブラリなしのJavaScriptを書くことの方が少ない?)

親子要素へのアクセス
//親要素
content.parentNode;
//子要素
content.firstElementChild; //最初の子要素
content.lastElementChild;  //最後の子要素
content.children; //子要素リスト
//1つ前の要素
content.previousElementSibling;
//1つ後の要素
content.nextElementSibling;

要素の書き換え

// textContentで書き換え
let title = document.getElementById("title");
title.textContent = "Hello textContent!!"

// innerHTMLで書き換え
let content = document.getElementById("content");
content.innerHTML = "<h2>Hello innerHTML</h2>";

要素の作成&追加

// 要素の作成
let p = document.createElement("p");
p.textContent = "add content";

// 要素の追加
let content = document.getElementById("content");
content.insertBefore(p, content.firstChild); // 最初の子要素として追加する場合
content.appendChild(p); // 最後の子要素として追加する場合

最初の子要素に追加する記述だけちょっと複雑なのでさっくり解説します。
insertBofere関数は(挿入する要素, ターゲットとなる子要素)という引数を取ります。引数の「ターゲットとなる子要素」の前に「挿入する要素」を挿入する関数です。ここではターゲットに「content.firstChild」を指定しています。これは、content要素の最初の子要素を表します。つまり、「content.insertBefore(p, content.firstChild);」は「contentの最初の要素の前にpを子要素として挿入する」という関数になります。この辺のDOM操作が追えるようになったら慣れてきた証拠。

属性操作

//属性の存在チェック
mainContent.hasAttribute('align');
//属性の取得 存在しない場合はnullもしくは空文字を返します
mainContent.getAttribute('align');
//属性を設定
mainContent.setAttribute('align', 'center');
//属性を削除
mainContent.removeAttribute('align');

# align属性はもう非推奨なので使わないようにしてください。。。

class操作

//class追加
mainContent.classList.add('article');
//class削除
mainContent.classList.remove('article');
//classをトグル
mainContent.classList.toggle('article');
//スタイルを直接指定
mainContent.style.color = '#ff0000';

クラスの追加、削除によって要素の動きを動的に変化させるような処理はよくあると思うので、覚えておいて損はないと思います。

ちなみに

動作検証にはAtomというエディタを使用しました。
Atomの公式サイト
Githubが作っているエディタで、サクサク動くのに多機能で、なおかつオシャレ。おすすめです。

ただ、デバッグをするのにはブラウザの開発者コンソールを使用するのがいいです。ChromeかFireFoxがいいかな~って思います。


JavaScriptの基本についてまとめてみました。これだけの情報があれば、とりあえず処理の流れを追うことくらいはできそうです。

やっぱjQueryくらいは使い方控えておいた方がいいな~と思いました。Ajax処理とか基本使うからね。
できればReactとかangularとかVueとかNode.jsとか使えたらカッコいいんだけど、縁がないよなぁ。。。

コメント

タイトルとURLをコピーしました