JavaScript学習記録 基礎編 第1回

初めに

最近業務でプログラミングをがっつり書くことが減ってきているのと、今後フロントエンドの開発にも携わってみたいという気持ちからJavaScriptの勉強を始めました。
まずは基本的な構文から、徐々に応用編に入っていって、最終的にはReactによるアプリ作成まで学んでみたいと思っています。
※私はJavaやPythonといった言語を業務で使用した経験があるので、プログラミング言語共通の概念などは省いています。

どんな言語?

ブラウザで動かせる言語
近年のWebサイトのほとんどに使われている

なぜ必要?

HTMLとCSSだけではできない動きのある、より使いやすいWebサイトやWebサービスを作るために必要

従来のWeb	現代のWeb
HTMLとCSS	HTMLとCSS+JavaScript
レスポンスとしてHTMLファイルを返す	レスポンスとしてJSONを返す
ページ遷移の度にレンダリングされる	ページ遷移時に最小限のレンダリング

JavaScriptの仕事

大きく2つ

1. JSONデータのやり取り
2. DOM操作

DOMとは?

Document Object Model (DOM)
「ドキュメントを物として扱うモデル」
プログラムからHTMLやXMLを自由に操作するための仕組み
※ここは別記事でさらに深堀してみたいと思います。

変数

変数名のルール

1. 半角のアルファベット、_（アンダースコア）、$（ダラー）、数字を組み合わせた名前にする
2. 変数名は数字から開始できない
3. 予約語と被る名前は利用できない

変数宣言のキーワード

キーワード	const	let	var
再代入	×	〇	〇
再定義	×	×	〇

何を使う?

基本的にはconstを使う。
どうしてもconstが使えない場合はletを使う。
varは使わない。

※constが一番堅牢でバグを生みにくい。varは後方互換性のために残ってるだけ。

関数

※ここは別記事でさらに深堀してみたいと思います。

基本的な書き方

function 関数名(引数1,引数2,…) {
　　処理
　return 返り値;
}

関数式

const sample = function 関数名(引数1,引数2,…) {
　　処理
　return 返り値;
}

匿名関数

関数式の時に関数名は付けなくてもよい

const sample = function(引数1,引数2,…) {
　　処理
　return 返り値;
}

アロー関数

「function」不要で => を書く書き方

const sample = (引数1,引数2,…) => {
　　処理
　return 返り値;
}

高階関数

一言で言うと「関数を引数、戻り値として扱う関数」
他関数の引数として使用し、特定のタイミングで実行させることができる。「あの処理が終わった後に、この関数を実行したい」など。

function 高階関数(関数) {
    関数();
}

代表的な高階関数
forEach

const names = ["荒井","秋山","伊藤"];

names.forEach(function(name) {
  console.log(name);
});

荒井
秋山
伊藤

第２回目に続く