JavaScriptとは？
JavaScriptとは、Webページに動きをつけるためのプログラミング言語です。
HTMLは「構造」を、CSSは「見た目」を作ります。これに、JavaScriptを使うと「動き」や「操作」ができるようになります。
例）ボタンを押すと文字色が赤色になるJavaScriptを追加。
Node.jsなどの環境を使うことで、Webブラウザだけでなくサーバー側の処理もJavaScriptで書けるようになりました。これにより、これまでPHPやJavaで書かれていたサーバサイドの処理も、JavaScriptで実装できるようになっています。
JavaScriptの特徴
1.ブラウザで動く
・特別なソフトを入れなくても、ChromeやSafariなどのブラウザでそのまま動かせる
・HTMLやCSSと一緒に使って、ウェブページを動的に変化させることができる
2.簡単に試せる
・HTMLファイルに <script> タグを書くだけで使える
・ボタンを押したときに動く処理など、簡単にテストできる
3.動的な処理が得意
・ページを読み込んだ後でも内容を変えたり、新しい要素を追加したりできる
・ユーザーの操作に応じて動くページを作れる
JavaScript入門： コンソールの使い方
JavaScriptを学ぶときに、まず覚えておきたいのがブラウザのコンソールです。
コンソールとは、Webブラウザに備わっている「開発者ツール」の一部で、JavaScriptの動作確認や計算結果のチェック、エラーの確認ができる便利な場所。
コンソールでできること
・計算や式の結果をすぐ確認できる
・変数やオブジェクトの中身を確認できる
・関数の動作確認ができる
・エラー内容を確認できる
主に「確認・テスト・デバッグ」に使用する
コンソールの開き方
・Google Chrome
- 右クリックから
Webページ上で右クリック→「検証」→「コンソール」 - メニューから
右上の「 ⋮ 」メニュー→「その他のツール」→「デベロッパーツール」→「コンソール」 - キーボードショートカット
Windows：F12またはCtrl + Shift + I
Mac：Cmd + Option + I
・Microsoft Edge
- 右クリックから
Webページ上で右クリック→「開発者ツールで調査する」→「コンソール」 - メニューから
右上の「 … 」メニュー→「その他のツール」→「開発者ツール」→「コンソール」 - ショートカットキー：
Windows：F12またはCtrl + Shift + I
Mac：Cmd + Option + I
ブラウザの種類によって操作は多少異なりますが、基本的な流れはほとんど同じです。
開発者ツール(DevTools)のデフォルトは英語表示ですが、設定で日本語に変更することも可能です。
コンソールに出力する方法
console.log("こんにちは");
/* console.log()は、値やメッセージをコンソールに表示するための命令 */
JavaScriptでできること
1. ページの内容を変える
・文字や画像を後から変えたり、新しいものを追加したりできる
例）ボタンを押すと文字が表示される
2. ユーザーの操作に反応する
・ボタンを押したり、フォーム入力したときに動く処理を作れる
例）入力した名前を表示する
3. 簡単な計算やデータを処理する
・足し算や引き算だけでなく、リストの並べ替えや条件判定もできる
例）2つの数字の合計を計算する
let a = 2;
let b = 3;
let sum = a + b; /* 2 + 3 を計算 */
console.log(sum);/* コンソールに出力 */
4. アニメーションや動きのあるページを作れる
・画像をスライドさせたり、文字を動かしたりできる
例）画像が2秒毎に変化する
5. 外部のデータを使える
天気情報やニュースなど、インターネットから情報を取得して表示できる
例：天気API1を使って今日の天気を表示する
JavaScriptをブラウザで動かす方法
1. HTMLファイルに直接書く
HTMLファイルに<script>タグを追加してJavaScriptを記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
</head>
<body>
<script>/* <script>タグは、<body>タグの末尾に書くのが一般的 */
console.log("こんにちは");
</script>
</body>
</html>
2. 外部のJavaScriptのファイルを読み込む
<head>タグ内に<script src="ファイル名.js"></script>を記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<script src="main.js"></script>
<!-- 外部のmain.jsファイルを読み込む -->
</head>
<body>
</body>
</html>
console.log("こんにちは");
3. イベント属性
イベント属性とは、HTML要素に直接書いて、ユーザーの操作やブラウザの動作に応じてJavaScriptを実行するための属性のこと
<button onclick="console.log('こんにちは')">ボタン</button>
<!-- onclick属性はクリックした時 -->
4. コンソールに書く
ブラウザの開発者ツールのコンソールで直接JavaScriptを実行する方法
ES Modules(ECMAScript Modules)
ES Modules(ESM)は、JavaScriptのコードを「再利用可能な単位(モジュール)」に分割して管理できる仕組みのこと
特徴：
・ファイルごとに処理や関数を分けて使える
・必要な部分だけを読み込めるため、コードが整理しやすい
使い方：
・他のモジュールに機能を公開する：export
・他のモジュールから機能を読み込む：import
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<script type="module" src="main.js"></script>
<!-- type="module"があると、ESモジュールとして読み込む -->
</head>
<body>
</body>
</html>
/* exportで関数を外に公開する */
export function add(a, b) {
return a + b;
}
/* exportで定数を外に公開する */
export const PI = 3.14;
/* importでそれぞれのファイルから、関数と定数を読み込んで、このファイルで使えるようにする */
import { add } from './add.js';
import { PI } from './pi.js';
console.log(add(2, 3)); // 5
console.log(PI); // 3.14
さいごに
内容に間違いがあれば教えていただけると嬉しいです。
よければ「いいね」も励みになりますので、よろしくお願いします。
-
インターネット上で天気情報を取得するための、ソフトウェア同士のやり取りの窓口とルールのこと ↩