🍁
🔰JavaScript基礎メモ[実行環境・歴史〜コマンドまで]
実行環境について
JavaScriptは主に以下の2つの環境で実行されます:
主なJavaScriptエンジン
各ブラウザには専用のJavaScriptエンジンがあり、これがJavaScriptコードを処理します:
Web APIsとブラウザの役割
- Web APIs
ブラウザはJavaScriptエンジンとともに、DOM操作やHTTPリクエスト、タイマー機能などを提供するWeb APIsを備えています。
JavaScriptはこれらのAPIを通じてブラウザを操作することができます。
例: fetch()でデータを取得、setTimeout()で一定時間後に処理を実行。
- JavaScriptエンジンだけではできないこと
JavaScriptエンジン単体ではWebページの操作はできません。
Web APIsを含むブラウザ環境が連携しているからこそ、動的なWebアプリケーションを実現できます。
V8エンジンの汎用性
V8エンジンはオープンソースで提供されておりブラウザ以外のソフトウェアにも組み込み可能。
[例: Node.js、Denoなど。]
これにより、JavaScriptがサーバーサイド、デスクトップアプリ、IoTデバイスなど、さまざまな場所で動作するようになりました。
ユニバーサルJavaScriptとは
「ユニバーサルJavaScript」とは、ブラウザやサーバー、デスクトップアプリなど複数の環境で動作することを意識して書かれたJavaScriptコードを指します。
これにより、同じコードベースを使い回して、異なるプラットフォーム上で動作するアプリケーションを構築することが可能です。
JavaScriptは元々HP上で何かを動かすときに使う言語
(スライドショー・自動計算・設定画面などのポップアップウィンドウ・カウントダウン...etc)
Ajax(非同期通信)リアルタイムでどんどん動く🥴（GoogleMAPにも使われている！）
導入
🌟JavaScriptの書く場所
<!DOCTYPE html>
<head>
<meta charaset="utf-8">
</head>
<body>
表示
🌟<script></script>
</body>
</html>
もしJavaScriptの記載量が多くなる場合は別のファイルに記載して呼び込む
<script src ="ファイル名"></script>
// もしmain.jsというファイルを作成しそこに記載した場合
<script src ="main.js"></script>
main.js
console.log('テストaaaa'); //コメントアウト
/*
コメント範囲
*/
確認方法はHTMLのファイルを開き検証ツールでコンソール開いて確認😪
JavaScriptの変数と定数
// 昔
var test = 123;
var test = 'テスト'
// let
let test = 123;
// letでは上書きできずエラーになる。中身を変えることは可能
test += 123;
// const
const TEST = 123; // 定数なので上書き無理
// 定数なので大文字
console.log(test);
配列
const array =[1,2,3];
console.log(array[2]); // 出力3
連想配列
キーと値がセットんいなっている配列
例
const member_2 = {
'本田': {
'height': 170,
'weight': 60
}, // カンマ忘れず！！
'田中': {
'height': 180,
'weight': 75
}
};
console.log(member_2.本田.weight); // 出力 60
const member_3 = {
'class1': {
'本田': {
'height': 170,
'weight': 60
},
'田中': {
'height': 180,
'weight': 75
}
},
'class2': {
'山田': {
'height': 150,
'weight': 42
},
'岡本': {
'height': 159,
'weight': 53
}
}
};
console.log(member_3['class2']['岡本']['weight']); // 出力 53
演算子
計算や判定を行うときに使う記号
条件分岐
// 書き方
if(条件){
条件が新なら実行
}
//実行例
const height =91;
if(height === 90){
console.log('身長は' + height + "cmです");
} else {
console.log("身長は90cmではありません");
}
三項演算子
if~elseを一行で書く方法🥴💦
// if else
// 条件 ? 真 : 偽
const score = 80;
const comment = score > 80 ? 'good': 'not good';
console.log(comment); // 出力 not good
for
JavaScriptのfor文は３種類ある😪
for
// for(初期値;繰り返す条件;増減 ++ --)
for(let i = 0; i <5; i++){
console.log(i);
} // 出力 1 2 3 4
for of
const scores = [10,20,30];
// one of them この複数の方に作った配列を入れる
for (score of scores){
console.log(score);
} // 出力 10 20 30
switchを使うならまぁifのほうがいい。。。使うときに調べればよし。
case:/break;のやつ~~
関数 function(機能)
基本構文
function test(引数1, 引数2){
// 処理
// 戻り値
return 戻り値;
}
👇定義関数の参考に
Stringオブジェクトとメソッド
StringはJavaScriptの標準オブジェクトの一つで、文字列操作のためのメソッド（関数）が含まれています。
💗よく使う組み込み関数
// 文字列 String
length： 文字列の長さを取得
indexOf()： 指定文字の位置を検索（最初の出現位置）
slice()： 部分文字列を抽出
substring()： 部分文字列を抽出
split() ：指定の区切り文字で分割して配列に変換
concat()： 文字列を連結
trim()： 文字列両端の空白を除去
startsWith()： 指定文字列で始まるか確認
includes()： 指定文字列を含むか確認
toLowerCase()： 小文字に変換
replace()： 指定部分を置き換え
// 正規表現を使えるメソッド(抜粋)
string.replace()
string.match()
string.search()
string.split()
// よく使う正規表現
[A-Z] A~Zの間の１文字
\ 次の文字をエスケープ
^ 行の先頭にマッチ
$ 行の末尾にマッチ
* 直前文字0回以上の繰り返しにマッチ
+ 直前文字1回以上の繰り返しにマッチ
? 直前文字0回か1回の出現にマッチ
{n} 直前の文字をn回一致
\w 文字に一致
\d 数字に一致
\s 空白文字に一致
....等（これは一部）
使い方マニュアル👇🕊ここを見れば大体できる！よく使うのは👆
ここからは標準オブジェクトの中でも使う頻度が高いものを少し紹介
Map（標準オブジェクトの１種）
連想配列 Map
new Map
map.set()
map.get()
map.has()
map.delete()
map.keys()
map.values()
map.forEach(callback)
map.keys(callback)
map.values(callback)
map.entries(callback)
new Set 重複値を取り除く
array（標準オブジェクトの１種）
配列 Array
配列(array)定義後
array.length 長さ
array.join() 結合
array.unshift() 先頭に要素追加
array.push() 末尾に要素追加
array.shift() 先頭を取り除く
array.pop() 末尾を取り除く
array.splice() 一部を置き換え
array.concat() 連結
array.indexOf() 要素検索
array.sort() ソート
array.flat() ネストされた配列を平らに
array.includes() 特定要素が含まれているか
array.forEach(callback) 各要素にcallback ※Objectには使えない
array.find(callback) 条件を満たした最初の配列を返す
array.map(callback) コールバックで新しい配列を生成
array.filter(callback) 条件を満たす新しい配列を生成
array.reduce(callback) 配列を累積(全部足したり)
{...array} 配列をオブジェクトに変換
コールバック関数
別の関数に引数として渡される関数のことです。渡された関数は、指定されたタイミングや条件で「呼び戻される（コールバック）」ようになっています。
配列の操作時などに使う
例
const animals = ["panda", "cat", "dog"];
animals.forEach(function(animal) {
console.log(animal);
});
// panda
// cat
// dog
名前がない関数は（無名関数・匿名関数）と呼ばれこのページでは使えるけど呼び出せない使い捨ての関数になり、コールバック関数もこれにあたる！
アロー関数
JavaScriptで使える短い構文の関数のこと。
functionキーワードの代わりに=>を使って書く。
基本構文
const 関数名 = (引数) => {処理 戻り値};
// 引数が１個なら()も不要（0個なら省略不可）
const test = test => test;
// 0の場合
const test = () => test;
// 処理が１行なら{}不要 returnも省略
const tax = (price,tax) => price*tax;
function greet(name) {
return "Hello, " + name + "!";
}
// これをアロー関数で書くと
const greet = name => "Hello, " + name + "!";
// この場合引数１だから()要らないし１行だから{}もいらない。
ん～～～～いみわからん。
Array.filter
filterは、配列に条件を付けて新しい配列を作成(〇円以上だけ!とか)
例：価格が2000円以上の商品を抽出
const products = [
{ name: "Tシャツ", price: 2000 },
{ name: "デニム", price: 3000 },
{ name: "サンダル", price: 1500 }
];
// 価格が2000円以上の商品を抽出
const expensiveProducts = products.filter(product => product.price >= 2000);
console.log(expensiveProducts);
// 出力: [{ name: "Tシャツ", price: 2000 }, { name: "デニム", price: 3000 }]
Array.find
findは、配列内で条件に一致する最初の要素を検索しその要素だけを返します。
もし複数の要素が条件に一致しても、最初に見つかった1つだけを返すので、最初の1つを探したいときに便利。
const members = ["マユカ", "ミイヒ", "アヤカ"];
const member = members.find((value) => value === "ミイヒ");
console.log(member); // 出力: "ミイヒ"
Array.map
配列をもとに新しい配列を作る
配列の数値を2倍にする
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers);
// 出力: [2, 4, 6, 8, 10]
この例では、mapを使って、配列の各要素に対してnumber * 2という処理を行い、新しい配列doubledNumbersを作成しています。
例２
const products = [
{ name: "Tシャツ", price: 2000 },
{ name: "デニム", price: 3000 },
{ name: "ジャケット", price: 5000 }
];
// 価格に10%割引を適用
const discountedProducts = products.map(product => ({
name: product.name,
price: product.price * 0.9
}));
console.log(discountedProducts);
// 出力: [{ name: "Tシャツ", price: 1800 }, { name: "デニム", price: 2700 }, { name: "ジャケット", price: 4500 }]
この場合、mapを使って、商品の価格に10%の割引を適用し、新しい配列discountedProductsを作成しています。
Objectオブジェクト
Objectは、JavaScriptで使われる最も基本的なデータ構造の一つで、「キーと値のペア」を管理するためのもの
オブジェクトは、複数の関連するデータや機能（メソッド）を1つにまとめるのに役立ちます。
基本構成
キーと値のペアで構成
- キー: 一意の識別子（文字列やシンボル）。
- 値: どんなデータ型でもOK（文字列、数値、配列、関数など）。
const person = {
name: "太郎", // キー: name, 値: "太郎"
age: 25, // キー: age, 値: 25 // 値の型は自由！
greet: function() {
console.log(`こんにちは、私は${this.name}です！`);
}
};
// プロパティの取得
console.log(person.name); // 出力: 太郎
console.log(person.age); // 出力: 25
// メソッドの呼び出し
person.greet(); // 出力: こんにちは、私は太郎です！
- 配列としてキー(DBでいうカラム)を出力したい時は
Object.keys()を使う
const keys = Object.keys(person);
console.log(keys);
// 出力: ["name", "age", "greet"]
- 配列として値を出力したい時はObject.values()を使う
const values = Object.values(person);
console.log(values);
// 出力: ["太郎", 25, [Function: greet]]
Object.
ユーザ定義関数＋組み込み関数
関数には２種類ある
- 組み込み関数
JavaScriptにあらかじめ用意されている便利な関数のことです。
オブジェクトを介さず、直接呼び出して使えるものが多いです。- ユーザー定義関数
この２つを足したコードの書き方🥴
今回は組み込み関数はreplaced（文字列を置き換える）を使用
例
const sentence = "catはかわいいけど、dogはもっとかわいいと思う。";
// 1. 単語を直接置き換え
console.log(sentence.replace("cat", "rabit"));
// 出力: "rabitはかわいいけど、dogはもっとかわいいと思う。"
// 2. 正規表現を使った置き換え（大文字・小文字を無視して "dog" を置き換える）
const regex = /dog/i;
console.log(sentence.replace(regex, "ハムスター"));
// 出力: "catはかわいいけど、ハムスターはもっとかわいいと思う。"
メソッドチェーン
メソッド（関数）をつなげる仕組み🥴
例
- const sentence = " SHIBAINU is Cute! ";
- const trimmed = sentence.trim(); // "SHIBAINU is Cute!"
- const lowerCased = trimmed.toLowerCase(); // "shibainu is cute!"
- const length = lowerCased.length; // 15
- console.log(length); // 15
// メソッドチェーンver👇
+ const sentence = " SHIBAINU is Cute! ";
+ console.log(sentence.trim().toLowerCase().length); // 出力 15
スコープ（有効範囲）
- グローバルスコープ:
- プログラム全体でアクセスできる範囲。
- どの関数やブロックの外からでも使用可能。
-
例: ファイルの最上部で宣言されたvar、let、const - リスクが高いので最小限の使用を推奨
- ローカルスコープ
- 特定の関数やブロック内でのみ有効。
- 外部からはアクセスできない。
-
例:letやconstを使った関数やブロック内での変数宣言。 - 変数が他の部分に影響を与えず安全
例
const global = "グローバル";
function checkScop() {
const local = "ローカル";
+ console.log(local); // OK
+ console.log(global) // グローバルなのでどこでもOK
}
+ console.log(global); // OK
- console.log(local); // 関数の外なのでNG
心折れたのでここまで～～～～
Discussion