※当記事は、シリーズ Web制作コーダーのための「脱コピペ・AI頼り」JavaScript講座 の第1回です。

どうもこんにちは。コピペとAIに頼ってきた業界4年目のコーダーです。

この記事を見てくださっている方は、私と似た状況の方も多いのではないでしょうか。

JavascriptってHTMLやCSSと比べて難しいですよね。

ぜひ、当シリーズを通して筆者である私と一緒に、

「なんとなく何をしているか分かるけど、同じ制御を0から書くのは無理」

といった状況から、自信を持って制御を追加・修正できるコーダーに成長しましょう！

コピペ・AI頼りのJavascript・jQuery制御から脱却したい方へ

コピペ・AI頼りだとコーダーとして生き残れないか？

まず、結論から言うと恐らく生き残れはします。ただし、業界内で重宝されるコーダーにはなれない可能性が高いです。

私の現場感覚としては、公開済みの既存サイトではまだまだjQueryは使用されています。
一方で、新規の立ち上げサイトではピュアなJavascriptで記述していこう、といった状況です。

このような状況に加え、以下のような基礎力のあるコーダーの需要が高いです。

様々な参考サイトからのコピペや、AIが作成したコードを集めてサイトを作成すると保守性の低いカオスなファイルになりやすいです。

よって、コーダーとして生き残るためには「問題なく動けて表示ができればいい」ではなく、誰に引き継いでも恥ずかしくないコーディングを目指す必要があります。

当シリーズ（Web制作コーダーのための「脱コピペ・AI頼り」JavaScript講座 ）について

当シリーズは、全体を通して最終的にWeb制作分野におけるJavascriptとjQueryを理解し、自力で保守性の高い制御を作成・調整できるようになることが目標です。

よって、以下のような方向けの記事になっております。

斯く言う私がまさに同じ状況なので、ぜひ一緒に頑張りましょう！笑

今後のシリーズの掲載記事（予定）

当シリーズは、全12回を予定しております。

途中でタイトルや構成内容が変更になる場合もあります。

自分が苦手な制御についての回のみ読んだとしても、理解できるように各記事は構成しております。

Javascriptの超基本「文・値・変数」とは

それでは早速始めるのですが、

結論、JavaScript はどんなに複雑なコードでも「文・値・変数」の3つの組み合わせでできています。

そして、JavaScript力とは、この小さなパーツの組み合わせから処理の流れを読み解ける力のことです。

まずはこれら3つを理解することで、どんなUI制御のコードも読みやすくなります。

① 文（ステートメント）

まず、文（ステートメント）の意味を確認します。

言葉ではややこしいので、具体例を見てみましょう。

let appleCount; 

appleCount = 10 + 5; 

if (appleCount > 10) {
    console.log("リンゴはたくさんあります。");
}

この制御における文（ステートメント）は下記の赤枠部分です。

Javascriptでは、この制御のまとまりを上から順に実行していきます。

② 値（value）と型（type）

次に、値（value）と型（type）の意味を確認します。

具体的に値と型について、Web制作分野で覚えるべき3つの型に当てはめて解説します。

let message = "こんにちは"; // 文字列
let count = 5;              // 数値
let isOpen = true;          // 真偽値

値（value）は簡単で、1つ目から順に、「こんにちは」「5」「true」が値です。

次に、これら値の分類を示す型（type）については以下の通りです。

これら3つの型を理解できれば、if文の条件式やUIのON/OFF制御を正しく読み解けるようになります。

③ 変数（let / const）

次に、JavaScriptの基本となる変数について確認します。

ここでも具体的に、コードから確認します。

let message = "こんにちは";
const siteName = "Webful";
let count = 5;

まず、変数はこのコードにおける「message」「siteName」「count」です。

そしてもう一つ重要なのが、let と const の使い分けです。

JavaScriptのほとんどの処理は、「値を変数に入れる → その変数を使って制御する」という流れで動いているので、この2つは重要です。

ここまでの要素だけで動く“簡単なJavaScript”を書いてみる

ここでは、前章までに紹介した要素で簡単なJavascriptを書いてみます。

if文はまだ扱っておりませんが、コーダーであれば、ある程度の仕組みは想像できると思います。

また、次回の記事、「クリックイベントとif文の基本 | JavaScriptでUIを切り替える方法（第2回）」でif文については解説するので、ぜひそちらもお読みください。

【例文】「文・値・変数」を使った簡単なJavascript

const appleCount = 5;
let applePrice;
const menu = "リンゴ";

if (appleCount >= 3) {
  applePrice = 100;
  console.log(menu + "は、" + applePrice + "円です");
} else {
  applePrice = 120;
  console.log(menu + "は、" + applePrice + "円です");
}

検証ツールのコンソールに入力すると、「リンゴは、100円です」と表示されます。

また、const appleCount = 5;の数値を3未満に変更すると、「リンゴは、120円です」と表示されます。

【jQueryで書くとどうなる？】第1回の比較コーナー

このシリーズでは、毎回「JavaScript」と「jQuery」を両方見比べながら理解を深めるという流れで進めていきます。

ただし今回の第1回は…jQueryで書き換えても全く同じコードになります。

要するに、JavascriptとjQueryの「文・値・変数」の基礎は同じということです。

次回以降扱う制御では、再現するのにしっかり違いが出てくるので楽しみにしてください！笑

まとめ — 「読み解く力」の最初の土台ができました

今回の第1回では、JavaScript の基礎となる

• 文（ステートメント）
• 値（value）
• 変数（let / const）

という、どんな複雑なコードでも必ず登場する “パーツ” を確認しました。

これら3つを理解できるようになると、今後 JavaScript のコードを読むときに

• 「これは値だな」
• 「これは変数の更新だな」
• 「これは処理のひとかたまり（文）だな」

とコードを分解して読み解く力が身についていきます。

第2回ではいよいよクリックイベント × if 文を扱うので、より実務よりの制御の理解につなげていきましょう！

それでは第1回は簡単ではありますが、これで終了です。

また別の記事でお会いしましょう！