奥海清瀧の遊楽園→JavaScript→導入

JavaScriptの導入

2024/11/11 更新

JavaScriptとは

JavaScriptは、動的なWebサイトを作るのに使われているプログラミング言語です。プログラミング言語の中では難易度が低めであり、動的な型付け言語で簡単に変数を扱うことができます。

※動的な型付け言語・・・型の種類に囚われずに変数を扱える言語のこと。C++にはintやcharがあり、型の種類を厳密に決めなければならないので、静的型付け言語と呼ばれている。JavaScriptやPythonが動的型付け言語、C言語系(C言語、C++、C#)やJavaが動的型付け言語である。
※変数・・・値を入れる箱のようなもの。変数を使うとメモリを使うことになる。JavaScriptの変数では64ビットのメモリを使うが、C言語系では厳密に型付けをするので主に32ビットを使う。64ビットで8バイト、32ビットで4バイトである。

Webブラウザの表示には標準でGPUが使われているので、高速な描画が可能であり、ゲームを作って遊ぶこともできます。個人的には使いやすくてスムーズに動くゲームも作れるので、「神の言語」だと思っています。皆さんもぜひ習得してJavaScriptで遊びましょう。

環境の構築

JavaScriptはWindowsのメモ帳にも書けるのですが、コードエディタがあったほうが便利です。なので、Visual Studio Code(通称:VSCode)をダウンロードして使いましょう。

VSCodeをダウンロードしてからアプリを起動すると、最初は英語になっています。サイドバーの拡張機能のアイコンをクリックし、検索欄に「japan」と打ち込み、出てきた候補から[Japanese Language Pack for Visual Studio Code]をインストールしましょう。

画像

HTMLとCSS、JavaScriptを扱うので、開発が楽になるように、拡張機能で[HTML CSS Support]、[JavaScript (ES6) code snippets]もインストールしておきましょう。

JavaScriptを使う

JavaScriptのコードはどこに書くかというと、HTMLの中に書きます。中に直接書く方法と別のファイルに書く方法の2種類があります。それぞれ実際にやって確かめましょう。

HTMLという言葉が出てきましたが、HTMLはWebページを作るための言語です。HTMLでページの内容を書き、CSSで見た目を調整するといった感じです。まず、デスクトップなどに新しいフォルダを作り、名前を「JavaScript」にしましょう。そのフォルダをVSCodeの上にドラッグ&ドロップすれば、ファイルを開くことができます。サイドバーからエクスプローラーを表示し、[新しいファイル]をクリックして、「index.html」ファイルと「main.js」ファイルを作りましょう。

画像

htmlファイルを開き、次の内容を書きます。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>テキストの変更</title>
</head>

<body>
    テキストです
</body>
</html>

HTMLではタグ(<>)をいくつも使うことによりページを作っていきます。ここではHTMLの説明はしないので、定型として覚えましょう。<!DOCTYPE html>というのはHTMLの仕様を指定するもので、htmlタグは中の内容をhtmlで表示するというもので、headはページの内容ではないメタデータを書くためのもので、bodyの中身がページに表示される部分となります。titleタグはブラウザの一番上のタブに表示される文字で、bodyの中の文字が実際にページに表示される内容になります。index.htmlファイルをダブルクリックしてブラウザに表示させると、ページに文字が表示されているのが確認できます。

画像

まずは、ページに書かれたテキストをJavaScriptを使って変更してみましょう。bodyタグの中身を次のように変えます。 

<div id="text">テキストです</div>
<script>
    const text = document.querySelector("#text");
    text.textContent = "テキストがJavaScriptにより変更されました"
</script>

<実行結果>

画像

やっていることは、文字を汎用ブロックで囲み、ブロックの名前(ID)を「text」とし、JavaScriptでtextブロックを取得し、中の内容を変える、という流れになります。divタグが汎用ブロックで、文字を囲むことによりJavaScriptで文字の変更を可能にしています。id="text"で汎用ブロックの名前をtextにしています。scriptタグの中身にJavaScriptを書いていきます。今回は、Web APIのDOMを使ってタグの中身を変更しています。

Web APIというのは、ブラウザを操作するための機能群のことを指します。DOMというのは、ブラウザの表示内容を変更するためのAPIです。APIは何かしら操作するための機能だと覚えましょう。

ここで内容を詳しく解説すると混乱してくると思われるので、text変数に汎用ブロックを取得し、汎用ブロックの中の文字を変更していると覚えましょう。

JavaScriptの書き方にはもう一つあります。main.jsに、次の内容をindex.htmlからコピペします。 

const text = document.querySelector("#text");
text.textContent = "テキストがJavaScriptにより変更されました";

そして、index.htmlのbodyの中を次のように変えましょう。 

<div id="text">テキストです</div>
<script src="main.js"></script>

src="main.js"とすることで、htmlからJavaScriptのファイルを読み込んでいます。結果は先程と同じになります。HTMLの内容は変更しないので、スクリプトの書き方はhtmlファイルに直接書いても、別のjsファイルに書いても構いません。HTMLの内容は変更しないと書くと語弊がありますね。正確にはJavaScriptを使ってHTMLの内容を変更することになります。JavaScriptの仕様を学ぶこととWeb APIを学ぶのは別物だということを頭に入れ、まずはJavaScript自体の仕様について学んでいきましょう。ただ、深く学ぼうとすると嫌になるので、まずはJavaScriptの仕様を浅く学んでからWeb APIで遊ぶのをおすすめします。その方針でページを書いていきたいと思います。

-トップへ-