※このページはアフィリ広告を含みます。
₍^⩌ᴥ⩌^₎
今日はJavaScrpt出てくる基本的なコードを学びましょう
₍ᐢ⓿ᴥ⓿ᐢ₎
₍ᐢ⓿ᴥ⓿ᐢ₎
₍^⩌ᴥ⩌^₎
なんとなく、JavaScriptの雰囲気が伝わればいいかなと…
₍ᐢ⓿ᴥ⓿ᐢ₎
₍^⩌ᴥ⩌^₎
教え方の正解がわからないのでとりあえずやってみようぜ 笑
₍ᐢ⓿ᴥ⓿ᐢ₎
適当すぎる…
₍^⩌ᴥ⩌^₎
今日覚えるのはこれ
₍^⩌ᴥ⩌^₎
基礎がしっかりしていれば少しずつスキルアップして応用ができるようになる…といいなーってことで
₍^⩌ᴥ⩌^₎
最初は『1.変数の宣言』
let name = '太郎';
//変数『name』に『太郎』という文字列を代入
const age =25;
//定数『age』に25を代入
console.log(name + 'さんは' + age + '歳です。');
₍^⩌ᴥ⩌^₎
次は『2.条件文（if文）』
let score = 85; // scoreに85を代入
if (score >= 90) { // scoreが90以上のとき
console.log('優秀です！'); // 優秀な場合のメッセージを表示
} else if (score >= 70) { // scoreが70以上90未満のとき
console.log('合格です。'); // 合格の場合のメッセージを表示
} else { // それ以外（70未満）
console.log('残念ながら不合格です。'); // 不合格の場合のメッセージを表示
}
₍^⩌ᴥ⩌^₎
次は『3.繰り返し処理（for文）』
for (let i = 1; i <= 5; i++) { // iを1から5まで1ずつ増やしながらループ
.log('カウント: ' + i); // 現在のカウントを表示
}
₍^⩌ᴥ⩌^₎
次は『4.関数の定義と呼び出し』
function greet(name) { // nameを引数に取るgreetという関数を定義
return 'こんにちは、' + name + 'さん！'; // 挨拶のメッセージを作成して返す
}
console.log(greet('花子')); // 'こんにちは、花子さん！'と表示される
₍^⩌ᴥ⩌^₎
次は『5.配列の使用』
let fruits = ['りんご', 'バナナ', 'オレンジ']; // fruitsという配列に3つの果物を格納
fruits.forEach(function(fruit) { // 配列の各要素に対して繰り返し処理を行う
console.log(fruit); // 現在のfruitを表示
});
₍^⩌ᴥ⩌^₎
次は『6.オブジェクトの使用』
let person = { // personというオブジェクトを定義
name: '次郎', // nameプロパティには'次郎'を代入
age: 30, // ageプロパティには30を代入
greet: function() { // greetメソッドを定義
console.log('こんにちは、' + this.name + 'さん！'); // this.nameを使って自分の名前を参照
}
};
console.log(person.name); // personオブジェクトのnameプロパティを表示（'次郎'）
person.greet(); // greetメソッドを呼び出して挨拶を表示
₍^⩌ᴥ⩌^₎
次は『6.オブジェクトの使用』
let person = { // personというオブジェクトを定義
name: '次郎', // nameプロパティには'次郎'を代入
age: 30, // ageプロパティには30を代入
greet: function() { // greetメソッドを定義
console.log('こんにちは、' + this.name + 'さん！'); // this.nameを使って自分の名前を参照
}
};
console.log(person.name); // personオブジェクトのnameプロパティを表示（'次郎'）
person.greet(); // greetメソッドを呼び出して挨拶を表示
₍^⩌ᴥ⩌^₎
次は『7.プロミス（Promise）の使用』
let promise = new Promise(function(resolve, reject) { // 新しいプロミスを作成
let success = true; // 成功かどうかのシミュレーションフラグ
if (success) { // 成功の場合
resolve('成功しました！'); // resolveを呼び出して成功を伝える
} else { // 失敗の場合
reject('失敗しました。'); // rejectを呼び出して失敗を伝える
}
});
promise
.then(function(result) { // プロミスが成功したときの処理
console.log(result); // 成功メッセージを表示
})
.catch(function(error) { // プロミスが失敗したときの処理
console.log(error); // エラーメッセージを表示
});
₍^⩌ᴥ⩌^₎
JavaScrptの基本的な文法や概念はこのくらいかな。
これを理解すれば、より複雑なコードを書くときに分かりやすくなるはずだよ。
₍ᐢ⓿ᴥ⓿ᐢ₎
実際に使われているところをみてみないとイメージしにくいな。
₍^⩌ᴥ⩌^₎
使われてるコード書くか…。
₍^⩌ᴥ⩌^₎
１．変数の宣言
₍^⩌ᴥ⩌^₎
※あたらしく追加したコードは青色で書いてあるよ！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>簡単な変数の例</title>
</head>
<body>
<header></header>
<main></main>
<footer></fooger>
</body>
</html>
₍^⩌ᴥ⩌^₎
書けたかな？
₍^⩌ᴥ⩌^₎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>簡単な変数の例</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header></header>
<main></main>
<footer></fooger>
<script src="./JavaScript/main.js></script>
</body>
</html>
₍^⩌ᴥ⩌^₎
CSSとJavaScriptのファイルは各フォルダにいれてあるものを指定しているよ
₍^⩌ᴥ⩌^₎
headerとfooterは今回使わないけど基本構造の習慣で入れておこう
₍^⩌ᴥ⩌^₎
次はメインコンテンツを追加してみよう
₍^⩌ᴥ⩌^₎
※あたらしく追加したコードは青色で書いてあるよ！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>簡単な変数の例</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header></header>
<main>
<!-- 挨拶ボタン -->
<button id="greetButton">挨拶する</button>
<!-- メッセージを表示するパラグラフ -->
<p id="greetingMessage"></p>
</main>
<footer></fooger>
<script src="./JavaScript/main.js></script>
</body>
</html>
₍^⩌ᴥ⩌^₎
次は見た目を分かりやすくするためにCSSの追加しましょう
₍^⩌ᴥ⩌^₎
button {
/* ボタンの余白 */
padding: 10px 20px;
margin: 16px;
/* カーソルをポイントに変更 */
cursor: pointer;
/* ボタンの色 */
background-color: #ffffff;
/* ボタンの枠線 */
border: 2px solid #f93e54;
}
button:hover {
background-color: #f93e541f;
}
₍^⩌ᴥ⩌^₎
ここまではこんな感じになったかな
₍^⩌ᴥ⩌^₎
色とか余白とか自分の好みで変えてね