JavaScriptとは
JavaScriptは、Webページを作成するために使用されるプログラミング言語で、主にWebブラウザで動作します。Webページにダイナミックな機能を追加することができ、例えば、入力フォームの検証、動画や画像のスライドショーの作成、マウスカーソルの動きに合わせて画像を動かす、等々のことができます。
ねえ、ミク先生、JavaScriptって何？
JavaScriptは、Webページにインタラクティブな動きを加えることができるプログラミング言語だよ。
ああ、Webサイトで動きのあるページっていうこと？
そうそう、例えば、ボタンをクリックしたらメッセージが表示されたり、画像が変わったりするような動きがJavaScriptで実現できるんだ。
また、サーバーサイドでも利用されており、Webアプリケーションの開発に必要な技術の1つとなっています。
サーバーサイドとは、Webサーバー側で実行されるプログラムや処理のことを指します。Webサーバーは、Webページの要求を受け取り、Webページをクライアント側に返す役割を担いますが、サーバーサイドのプログラムによって、Webサーバーは、データベースへのアクセスやWebページの動的な生成などの機能を提供することができます。
具体的には、サーバーサイドでは、データベースの情報を取得してWebページに表示する処理や、Webフォームから送信されたデータを受け取り、処理する処理、セキュリティのための認証処理や、Webページの動的な生成などを行います。
サーバーサイドのプログラムには、PHP、Ruby、Python、Java、JavaScript(Node.js)などがあります。Web開発において、クライアントサイドで動作するJavaScriptとサーバーサイドで動作するプログラムを組み合わせることで、より高度なWebアプリケーションの開発が可能になります。
JavaScriptは、オブジェクト指向プログラミングや関数型プログラミングの特徴を持っており、簡単で柔軟な構文を使って書くことができます。
現在、JavaScriptはWeb開発に必要不可欠な技術の1つであり、多くのWeb開発者が使っている言語です。
JavaScriptの書き方
なるほど、じゃあ、具体的にどう書くの？
まずはテキストエディタと呼ばれる、テキストを書き込むためのアプリケーションを用意します。Windowsには「メモ帳」という標準搭載されているアプリケーションがありますので、それを使って書いてみましょう。
- メモ帳を起動します。
- 以下のようなHTMLのコードを書き込みます。JavaScriptファイルを読み込むscriptタグをbodyタグ内に追加してください。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript101</title>
</head>
<body>
<h1>JavaScript101</h1>
<p>こんにちは、JavaScriptの世界へようこそ！</p>
<script>
alert('こんにちは、JavaScriptの世界へようこそ！');
</script>
</body>
</html>- 保存します。ファイルメニューから「名前を付けて保存」を選択します。
- 保存ダイアログで、「ファイルの種類」を「すべてのファイル」に変更します。
- ファイル名を「index.html」とし、保存先のフォルダを指定して保存します。
これで、JavaScriptファイルが読み込まれたHTMLファイルが作成されました。
へー、これで何が起きるの？
ブラウザでこのHTMLファイルを開くと、ページが読み込まれると同時に、alert()関数によってポップアップメッセージが表示されるんです。
組み込み関数
さっきのコードにあったalert()って何？
alert()はJavaScriptの組み込み関数で、引数として渡されたメッセージをダイアログボックスとして表示する関数なのです。
組み込み関数とは、プログラミング言語が最初から用意している機能や操作を行うための関数のことです。プログラマは、組み込み関数を呼び出すことで、簡単に基本的な操作や処理を実行することができます。例えば、文字列の長さを取得したい場合、文字列の長さを返す組み込み関数を使用することができます。また、配列をソートしたい場合には、配列をソートするための組み込み関数を使用することができます。組み込み関数は、プログラムをより簡潔かつ効率的に書くことができるため、プログラミングにおいて非常に重要な役割を担っています。
変数
ミク先生、変数って何？
変数は、データを格納するためのもので、後で使用することができますよ。
どうやって使うの？
こんな感じですよ。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript101</title>
</head>
<body>
<h1>JavaScript101</h1>
<p id="greeting"></p>
<script>
var name = 'ハルト';
document.getElementById('greeting').innerHTML = 'こんにちは、' + name + 'さん！';
</script>
</body>
</html>おお、<p>タグの中に何か表示されたね。
そうそう、varを使って、nameという変数を作成し、それをdocument.getElementById()関数で指定された要素のinnerHTMLプロパティに設定して、ページに表示させたんだ。
変数とは、値を格納するためのメモリ上の場所を指し示す識別子です。プログラマは、変数に値を代入したり、変数の値を参照することができます。変数は、プログラム内で一意の名前を持ち、その名前で参照されます。変数には、文字列、数値、真偽値、オブジェクト、配列など、さまざまなデータ型の値を格納することができます。例えば、次のように変数を宣言して、値を代入することができます。
let myVariable = "Hello, world!"; // 文字列型の変数
let myNumber = 123; // 数値型の変数
let myBoolean = true; // 真偽値型の変数
let myObject = {name: "John", age: 30}; // オブジェクト型の変数
let myArray = [1, 2, 3]; // 配列型の変数
変数は、プログラム内で値を保持するために非常に重要です。プログラムで扱う値を変数に格納することで、プログラムの複雑さを減らし、可読性を高めることができます。
プロパティ
上の説明で出てきた、innerHTMLって何？
innerHTMLは、要素の中身を取得したり、設定したりするためのプロパティで、この場合は<p>タグの中にテキストを設定するために使用したんだ。
プロパティとは、オブジェクトに属する情報や値を表す名前と値のペアのことを指します。オブジェクトは、複数のプロパティを持つことができます。プロパティには、文字列や数値、真偽値、関数、配列、オブジェクトなど、さまざまなデータ型の値を格納することができます。プロパティは、ドット記法やブラケット記法を使ってアクセスすることができます。
例えば、以下のようなオブジェクトがあったとします。
let person = {
name: "John",
age: 30,
isMale: true,
sayHello: function() {
console.log("Hello, my name is " + this.name);
},
hobbies: ["reading", "running", "coding"],
address: {
city: "Tokyo",
country: "Japan"
}
};このオブジェクトには、name、age、isMale、sayHello、hobbies、addressの6つのプロパティがあります。それぞれのプロパティには、次のようにアクセスすることができます。
console.log(person.name); // "John"
console.log(person.age); // 30
console.log(person.isMale); // true
person.sayHello(); // "Hello, my name is John"
console.log(person.hobbies[0]); // "reading"
console.log(person.address.city); // "Tokyo"プロパティは、オブジェクトの構造化された情報を表現するために重要な役割を担っています。オブジェクトを使うことで、プログラム内で複雑なデータ構造を表現することができ、より柔軟で効率的なプログラミングが可能になります。
ふむふむ、なんだか難しそうだけど、とりあえず使い方は分かったかも。
そうだね、JavaScriptは最初は難しく感じるかもしれないけど、使っていくうちに慣れていくよ。
まとめ
今回はjavascriptのはじめ方について解説しました。
うん、でもまだまだ分からないことがたくさんあるね。
そうですね、JavaScriptはWeb開発で広く使われている言語です。Web開発に興味があるのであれば、ぜひJavaScriptの勉強を始めてみてください。
ただ、独学では時間もかかるし、途中で挫折する事もあるみたい。
スクールで勉強するのもおススメです。
次の記事もぜひ併せて読んでみてください。
コメント