JavaScriptの基本構文いっきまーす

2026年7月31日 23:08

はじめまして、YOUです

システムエンジニアとして働きながら、コードをしっかり読めるようになりたくて日々もがいています。

前職は土木施工管理を4年、そこから未経験でシステムエンジニアに転職しました。現場に入ってまだ半年、チケット管理やリリース作業、オフショアチームとのやり取りが中心の毎日です。JavaScriptやReactを使うプロジェクトにいるのに、実はコードを自分で触ることはゼロ。だからこそ「しっかり読めて、評価できる」エンジニアを目指して、今JS/Reactを学び直し中です。

このnoteはその過程をそのまま発信していきます。たまに仕事で思ったことも発信していきます！

今回はJavascriptの基本構文についてのスライドがまとまったのでこの記事を書いてみました。また量が多いので2投稿に分けたので是非お時間あるときに見て下さい！

AIで調べれば何でもわかる時代に、この記事にたどり着いていただき、ありがとうございます。

ただ検索して終わりではなく、できるだけかみ砕いて、自分がつまずいたところも含めて説明するように書いたので、ぜひ読んでみてください。

読んでいただいて、ここがわかりにくい、といった点があればコメントで教えていただけると嬉しいです。教材のブラッシュアップにも、私自身の勉強にもつながるので、気になることがあれば遠慮なくお願いします。

JavaScriptの基本構文

今回はJavaScriptの基本構文についてまとめます。

変数宣言（const / let）

JavaScriptで変数を宣言する方法には const と let があります。

const：再代入できない変数を宣言する際に使用
let：再代入できる変数を宣言する際に使用

// constの場合
const name = "田中"
name = "佐藤"   // 再代入NG（エラーになる）

// letの場合
let name = "田中"
name = "佐藤"   // 再代入OK

基本的には const で変数を宣言し、for文などの繰り返す処理には let を使うのがよいとされています。

関数宣言（function）

関数を定義する方法として、代表的なのが function を使う書き方です。

// 関数の定義方法
function 関数名(引数) {
  実行される処理
  return //無くてもよい
}

// 関数を変数に代入する場合
const 変数名 = function(引数) {
  実行される処理
  return //無くてもよい
}

return あり → 結果を呼び出し元に返す
return なし → 処理だけして終わる

アロー関数

アロー関数を使うと、function に比べて宣言を短く書くことができます。

// functionの場合
function(引数) {
  実行される処理
}

// アロー関数の場合
const 変数名 = (引数) => {
  実行される処理
}

使い分けとしては、

function → そのまま宣言して使う
アロー関数 → 変数に代入して使う

というイメージです。

functionとアロー関数で this の挙動が違う

function とアロー関数は書き方が似ていますが、this の挙動に大きな違いがあります。

functionの場合

const person = {
  name: "田中",
  hello: function() {
    console.log(this.name)
  }
}

person.hello() // → "田中"

person が呼び出しているので、this = person となり、this.name で "田中" が取得できます。

アロー関数の場合

const person = {
  name: "田中",
  hello: () => {
    console.log(this.name)
  }
}

person.hello() // → undefined（値が見つからない）

アロー関数は this が呼び出し元ではなく、常に window（自分がいるタブと考えればOK）に固定されるため、person の name が取得できず、undefined になってしまいます。

このように、オブジェクトのメソッドとして関数を定義する場合は、this の挙動の違いに注意が必要です。

勉強と並行してスライドを作成していますが、アロー関数についてはこれまで触れたことがなく、今回とても新鮮な内容でした。
実際に現場のコードを確認してみると、ほとんどの箇所でアロー関数が使われていました。今回この部分を理解できたことで、仕事でも役立てられそうだと感じています。

今回はここまでです。次回は配列やオブジェクトの操作について書いていく予定です。