はじめに
目的
本記事はJavaScript&TypeScriptの基礎知識を体系的に学び直して、生成AIに頼りすぎず自力でコーディングできるようになることを目的としています。
学んだ内容のアウトプットとして、シリーズ形式で書いていきます。
ゴール
- TypeScriptでフルスタックアプリを個人開発する
- チーム開発でタスクを渡された際に、メンバーのコードを読んで理解したり自分で実装したりできる状態にする（調べる回数をできるだけ少なくする）
きっかけ
生成AI依存から脱却したいと危機感を抱いたのがきっかけです。
知人とTypeScript(Next.JS)でアプリ開発をしていた際に、渡されたタスクを自力でこなせず生成AIに丸投げしてしまいました…（もちろん、スキルは身についていません）
このままでは生成AIなしでコーディングできなくなると思い、JavaScriptの基礎から学び直すことにしました。
記事の方針
- 自分の理解が浅い、または知らないことに絞る
- 説明とコメントを自分の言葉で書く
- コードは自分でアレンジする
- 機能がつけられた背景や使う目的、使う場面も必ず書く
- 経験を積んで知識が増えたら都度更新する
変数const,let
変数を使う目的
- 値を変更するときに、変更箇所を最低限にできる（保守しやすい）
- 命名することで、値が何を表しているかわかりやすい（読みやすい）
constとletどちらを使えばよい？
➡原則constを優先して使う。letは値があとで明確に変わるときのみ。
理由は以下2点。
- 再代入できないようにすることで、コード内の予期せぬ変更を防ぐ
- コードの動作や意図が明確になって読みやすい
constを使う例
// アプリケーションのAPIキーを設定する
const APIKEY = "sample_api_key";
// DOM要素を参照する
const userProfile = document.getElementById("li");
// 計算結果を格納する
const totalCost = vegitablePrice + fruitsPrice;
letを使う例
// ループカウンタ
let timesOfSkippingRope = 0;
for (let i = 0; i < 100, i++) {
timesOfSkippingRope += i;
}
※constは定数として説明されることもあるが、厳密には再代入できない変数である。
つまり、constの中身は変化することもある。
JavaScriptは明確な定数を持っていないので、定数を定義するときはプログラマの意図を含める必要がある。
データ型と型変換
文字列（string）型のバッククォート記法
文字列に変数の値を埋め込みたいとき、明示的に使う。
文字列連結の演算子+を書かなくてよいので、記述量を減らせる。
const userName = "Nobuo";
let output = `Hello ${userName}!` //Nobuo
明示的に型を変換する方法（String⇔Number）
String➡Number
const input = "9.8";
let output;
output = Number(input); //9.8
output = parseInt(input); /* 10 Integer(整数)に変換したときは切り上げ */
output = parseFloat(input); /* 9.8 Float…浮動点小数 */
output = +input; //9.8
Number➡String
const number = 10;
const strNumber = String(number); // "10"
const strNumber = number.toString(); // "10"