【JavaScript】 基本文法をざっくり触ってみた｜1日1ハンズオン Day 44
こんにちは、ぽめら です。
本記事は1日1ハンズオン企画、第44回です！
今回は少し趣向を変えて JavaScript に触れたいと思います。
バックエンド側メインで普段作業をしているのでJSを忘れてきているのですが、Web開発の感覚を思い出したくて触ってみることにした次第です🌝
というわけで、JSの「基本のキ」ざっくり体験回！
（他言語とさほど変わらない基礎概念部分ですが）
1．はじめに
1-1．JavaScriptとは
JavaScript は、Webブラウザ上で動くプログラミング言語です。
もともとはWebページに「動き」をつけるために作られましたが、サーバーサイド（Node.js）やアプリ開発にも使われる万能選手ですね💪
ブラウザコンソールからも表示は可能なのですが、今回から何度かJavaScriptに触れたいので表示用ファイルを作成して進めたいと思います。
1-2．実行準備
✏️フォルダ作成
mkdir hands-on-js
cd hands-on-js📁フォルダ構成（まだ中身は空）
Desktop/
└── hands-on-js/🛠️ファイル作成
touch index.html script.js└Windowsの場合は：
echo. > index.html
echo. > script.js💻VScodeでフォルダを開く
私はコンソール操作も忘れないためにコンソールに触りましたが、VScode上でそのままフォルダ作成〜ファイル作成をしても何の問題もありません😆
📝ファイルに基本形を書いておく
・index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript練習 Day44</title>
</head>
<body>
<h1>JavaScript 練習ページ（外部ファイル版）</h1>
<p>出力はブラウザのConsoleで確認します。</p>
<!-- 外部スクリプトを読み込み -->
<script src="script.js"></script>
</body>
</html>JavaScriptコードはjsファイルに書き込んで使用します。
indexではそれを読み込む形式で記述しました。
2．変数（let と const）
基本的な「変数」から。
値を一時的に保存しておくための箱のようなものです。
jsファイルに下記を書き込みます。
let message = "Hello JavaScript!";
console.log(message);変更を保存した上で、index.htmlファイルを開きます。
今回記述した内容はコンソールに表示されるため、確認してみます。
右クリック＞検証
「Hello JavaScript!」の出力が確認できました。
console.log() は、Pythonでいう print() のようなものです。
（「;」をつけ忘れて動かないあるあるに注意）
※ let と const の違い
let name = "Pome";
name = "PomerA"; // 再代入OK
console.log(name);
const version = "ES6";
version = "ES7"; // ❌ エラー：再代入できません上記を保存してコンソールを見てみると下記のように再代入したversionはエラーとなる。
let：再代入できる（変わる値に使う）
const：再代入できない（固定値に使う）
3．配列とオブジェクト
複数の値をまとめて扱いたいときに便利なのが「配列」と「オブジェクト」。
配列（listのようなもの）
const fruits = ["apple", "banana", "orange"];
console.log("1つ目のフルーツ:", fruits[0]); // apple
console.log("配列の長さ:", fruits.length); // 3
インデックス"[X]"（0から始まる番号）で要素を指定します。
オブジェクト（辞書のようなもの）
const user = { name: "ぽめら", age: 100, job: "Engineer" };
console.log(`${user.name} (${user.age}歳) - 職業：${user.job}`); // テンプレートリテラル
Pythonでいう辞書（dict）に近いです。
このように key: value のペアで情報を整理します。
4. 関数定義
他言語とあまり書き方が変わらない関数定義と、アロー関数という直感的な書き方が存在します。
通常の関数定義
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("JavaScript"));アロー関数
const greetArrow = (name) => {
return `Hi, ${name}!`;
};
console.log(greetArrow("読者さん"));
ChatGPT曰く、「アロー関数」は短く書けるモダンなスタイルらしい⚡️
5. 条件分岐とループ
この部分については一般的なアルゴリズムの書き方ですね。
でもちょっとずつ違うので参画先が変わって扱う言語が変わると「あれ？どうやって書くんだっけ？」となるのは私だけだろうか…🫠
if文
const score = 85;
if (score >= 90) {
console.log("Excellent!");
} else if (score >= 70) {
console.log("Good!");
} else {
console.log("Try again!");
}
forループ
for (初期値; 条件式; 更新式)で使用します。
// for (初期値; 条件式; 更新式)
for (let i = 0; i < 3; i++) {
// 繰り返したい処理
console.log(`ループ ${i + 1} 回目`);
}
配列のループ（for...of）
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
このように、配列やオブジェクトの中身を順番に処理できます。
6．1ファイルで複数要素を組み合わせてみる
ここまでの要素をまとめて動かしてみました。
const user2 = { name: "ぽめら", scores: [85, 92, 76] };
function getAverage(arr) {
let total = 0;
for (const s of arr) {
total += s;
}
return total / arr.length;
}
const average = getAverage(user2.scores);
console.log(`こんにちは、${user2.name}さん！`);
console.log(`平均点は ${average.toFixed(1)} 点です。`);
久しぶりに触りましたが、ブラウザで動くものって楽しい✨
7. まとめ
// -------------------------------
// Day44：JavaScript 基本文法 練習
// -------------------------------
// Step1：変数
// let message = "Hello JavaScript!";
// console.log(message);
// let name = "Pome";
// name = "PomerA"; // 再代入OK
// console.log(name);
// const version = "ES6";
// version = "ES7"; // ❌ エラー：再代入できません
// Step2：配列
// const fruits = ["apple", "banana", "orange"];
// console.log("1つ目のフルーツ:", fruits[0]); // apple
// console.log("配列の長さ:", fruits.length); // 3
// Step3：オブジェクト
// const user = { name: "ぽめら", age: 100, job: "Engineer" };
// console.log(`${user.name} (${user.age}歳) - 職業：${user.job}`); // テンプレートリテラル
// Step4：関数
// // 通常の関数
// function greet(name) {
// return `Hello, ${name}!`;
// }
// console.log(greet("JavaScript"));
// // アロー関数
// const greetArrow = (name) => {
// return `Hi, ${name}!`;
// };
// console.log(greetArrow("読者さん"));
// Step5：条件分岐
// if文
// const score = 82;
// if (score >= 90) {
// console.log("Excellent!");
// } else if (score >= 70) {
// console.log("Good!");
// } else {
// console.log("Try again!");
// }
// ループ（for文）
// // for (初期値; 条件式; 更新式)
// for (let i = 0; i < 3; i++) {
// // 繰り返したい処理
// console.log(`ループ ${i + 1} 回目`);
// }
// ループ（for...of文）
// const colors = ["red", "green", "blue"];
// for (const color of colors) {
// console.log(color);
// }
// Step6：総まとめ
// const user2 = { name: "ぽめら", scores: [85, 92, 76] };
// function getAverage(arr) {
// let total = 0;
// for (const s of arr) {
// total += s;
// }
// return total / arr.length;
// }
// const average = getAverage(user2.scores);
// console.log(`こんにちは、${user2.name}さん！`);
// console.log(`平均点は ${average.toFixed(1)} 点です。`);
JavaScriptは“まず動かす”のが大切。
ブラウザのConsoleで少しずつ試すだけでも、体感的に覚えられますね。
というわけで今日はここまで！
ではまた明日👋
