JS2

Last-modified: 2026-01-11 (日) 13:45:29

背景緑.png

計算

変数

プログラム説明
変数作成let A=1;最初に新しく変数を作るときにletがいる。constを使うと上書きできない変数になる。
変数上書きA=2;
変数計算A=1+2-3*4/5%6×は*、÷は/、%は割ったあまり。５％３は２になる

配列

プログラム説明
配列作成let B=[1,2,3];最初に新しく配列を作るときにletがいる。constを使うと上書きできない変数になる。
最初の数字の番号は０から始まる。
B[0]=1;B[1]=2:B[2]=3;と同じ意味
変数上書きB=[4,5,6];

オブジェクト作成

プログラム説明
オブジェクト作成let C= {商品: "本",値段: 3000};最初に新しく配列を作るときにletがいる。constを使うと上書きできない変数になる。
配列では０から順番に番号が振られていたがオブジェクトでは自分で名前を付ける。
C["商品"]="本";C["値段"]=3000;と同じ意味。
(C.商品="本";C.値段=3000というようにもかける)
オブジェクト上書きC={すること:"お使い",かかる時間:"1時間"}

計算

プログラム説明
数字化「１」parseInt("1");
文字化「１」String(1);
ランダム 「2～5」Math.floor(Math.random()*(5-2))+2;
減るように切り捨て「2.3」Math.floor(2.3);ー2.3は-3
増えるように切り上げ「2.3」Math.ceil(2.3);-2.3は-2
正の数は四捨五入「2.3」Math.round(2.3) ;-1.5は-1

処理

プログラム説明
配列作成
配列順次処理「console.log(中身X)」		let フルーツ= ["りんご", "バナナ", "みかん"];
for (中身X of フルーツ) {console.log(中身X);}		中身Xが順番にりんご、ばなな、みかんとなりプログラムを実行する。
オブジェクト作成
オブジェクト順次処理「console.log(中身X)」		let 商品 = { 名前: "本", 金額: 3000, 個数:5 };
for (中身X in 商品) {console.log(中身X + "：" + 商品[中身X]);}		中身Xはオブジェクトのタイトルになる。順番に名前、金額、個数となりプログラムを実行する

関数

プログラム説明
実行のみの関数function　ハロープログラム(){console.log("ハロー");}あらかじめプログラムを作っておく。
ハロープログラム();と書くだけで作ったプログラムを実行することができる。
function内で定義した変数は{}の外に出ると値がなくなる。
リターンあり関数let A=3,B=2
function　ハロー計算プログラム(A,B){console.log("ハロー");let C=0;C=A+B;return C;}
let 結果=ハロー計算プログラム(2,3);		ハロー計算プログラム();と書くだけでconsole.log(ハロー);が実行される。
さらにreturnの値になるのでlet 結果＝5という意味になる。

データの入手

時刻

プログラム説明
変数作成「年月日時分秒」
時刻セット
コンソール表示「年月日時分秒」		let 年,月,日,時,分,秒,曜日;let 今=new Date();
年=今.getFullYear();
月=今.getMonth()+1;
日=今.getDate();
時=今.getHours();
分=今.getMinutes();
秒=今.getSeconds();
if(今.getDay()===0){曜日='日';} if(今.getDay()===1){曜日= '月';} if(今.getDay()===2){曜日='火';} if(今.getDay()===3){曜日= '水';}
if(今.getDay()===4){曜日='木';} if(今.getDay()===5){曜日= '金';} if(今.getDay()===6){曜日='土';}
console.log(年+'年'+月+'月'+日+'日'+時+'時'+分+'分'+秒+'秒'+曜日+'曜日');

位置情報

プログラム説明
位置情報を取得
成功時
緯度、経度セット
コンソール表示「緯度　経度」
失敗時
コンソール表示「失敗しました：エラーメッセージセット」		navigator.geolocation.getCurrentPosition(
位置情報の取得成功,
位置情報の取得失敗
);

function 位置情報の取得成功(position) {
const 緯度 = position.coords.latitude;
const 経度 = position.coords.longitude;
console.log(`緯度: ${緯度}, 経度: ${経度}`);
}

function 位置情報の取得失敗(error) {
console.error("位置情報の取得に失敗しました:", error.message);
}		functionで分けて書く。ブラウザが位置情報の使用を許可していないと失敗する
navigator.geolocation.getCurrentPosition(
(position) => {
const 緯度= position.coords.latitude;
const 経度= position.coords.longitude;
console.log(`緯度: ${緯度}, 経度: ${経度}`);
},
(error) => {
console.log("位置情報の取得に失敗しました:", error.message);
}
);		別の書き方。１つにまとめて書く。

天気予報

プログラム説明
天気表示「東京」const apiKey = "〇〇〇〇"; // ← 自分のAPIキーを入れてね
const city = "Tokyo";

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
.then(response => response.json())
.then(データ => {
console.log(`都市: ${データ.name}`);
console.log(`天気: ${データ.weather[0].description}`);
console.log(`気温: ${データ.main.temp}°C`);
})
.catch(error => {
console.error("天気情報の取得に失敗しました:", error);
});		WebAPIというサービスをいろいろな会社が出している。そのシステムから情報を入手できる。
openweathermapで検索→sign in→新しく作成→名前　メールパスワードを入れ２つ□にチェック
→目的は他→APIキー→キーのアルファベットをコピー→一番上のAPIをクリック→下にある５Day/3 Hour forecastのAPI docをクリック
自分の位置の天気を表示const apiKey = "〇〇〇〇"; // ← 自分のAPIキーを入れてね

navigator.geolocation.getCurrentPosition(
位置情報の取得成功,
位置情報の取得失敗
);

function 位置情報の取得成功(position) {
const 緯度 = position.coords.latitude;
const 経度 = position.coords.longitude;
天気情報を取得(緯度, 経度);
}

function 位置情報の取得失敗(error) {
console.error("位置情報の取得に失敗しました:", error.message);
}

function 天気情報を取得(緯度, 経度) {
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${緯度}&lon=${経度}&appid=${apiKey}&units=metric`;

fetch(url)
.then(response => response.json())
.then(data => {
console.log(`都市: ${data.name}`);
console.log(`天気: ${data.weather[0].description}`);
console.log(`気温: ${data.main.temp}°C`);
})
.catch(error => {
console.error("天気情報の取得に失敗しました:", error);
});
}