[ JavaScript : 基礎習得講座 I ] JSファイルの作成/実行方法

本記事では、JavaScriptとはどのようなプログラミング言語であるか / JavaScriptファイル(.js)の作成からファイルの実行方法, デベロッパーツールの活用までをご紹介させて頂きます。サンプルコードや画像などを用いて解説して頂きますので、初めてでもご安心ください。

✅   JavaScriptとは何かを理解出来る
✅   JavaScriptファイル作成方法
✅   JSファイルの読み込み方法とHTML内で定義する方法
✅   デベロッパーツールの利用方法

JavaScriptとは??

JavaScriptとは、ウェブブラウザ上で動作する(動的なWebページを作成する事のできる)プログラミング言語であり、HTMLやCSSと同様のクライアントサイドの言語になります。
画面のレイアウト構造をHTMLで作成し、CSSでその見た目(デザイン)を決め、JavaScriptでサイトに動きをつけるといったイメージでOKです。

より深く理解したい方は、次の記事なども参考にしてみることをお勧めします。

JavaScriptとは？初心者必見の基本知識をわかりやすく解説！ BREEZE

WEB

クライアントサイド

各種ファイルの作成

ここから今回のメインの内容になりますので、実際にファイルの作成を行なっていきたいと思いますが、まず作成するのは、HTMLです。

ん？ってなった方もいるかもしれませんが、JavaScriptはあくまでサイトに動きをつける役割を果たすため、画面レイアウトを作成するHTMLで、土台を作ってあげる必要がありますので、次の項目を参考にHTMLファイルを作成してあげてください。

ベースとなるHTMLファイルを作成

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js_sample1</title>
    </head>
    <body>
    </body>
</html>

JavaScriptファイルの作成

HTMLファイルが準備できましたら、HTMLが置いてある場所と同じところに次は、JSファイルを作成していきます。
次のコードをコピペして作成してあげてください。

今回は、動きの確認ができればOKですので、出力用のコード一文のみで大丈夫です。

// console.log(); → ()内に記述した文字列/数値などの値を出力することが可能。
// 今回は、デベロッパーツール(開発者ツール)上にHello JavaScript!!という文字列を表示させます。
console.log("Hello JavaScript!!");

HTMLファイルでJSファイルを読み込む

JSファイルが作成出来たら、続いては、HTMLファイル上でJSファイルを読みこみます。そうすることで、HTML経由で、JSのプログラムを動作させることが可能になります。

以下のように修正してあげてください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js_sample1</title>
    </head>
    <body>
        <!-- js_sample1.js (JSファイル)を読み込む : 追加 -->
        <script src="js_sample1.js"></script>
        <!--                                         -->
    </body>
</html>

現在のファイルの配置的には、以下のようになっていればOKです。
私の方では、js_sample1フォルダを作成し、その中に2ファイルとも保存しております。

適度にフォルダを作成し、ファイルはわかりやすく管理していきましょう。

JavaScriptの実行方法

ここまで準備できたところで、実際に作成したプログラムを動かしてみましょう。
実行方法は、HTMLファイルをブラウザで開いて頂ければ完了になります。

HTMLファイルをダブルクリックして頂ければブラウザが開きますので、その作業のみで大丈夫です。

すると、次のような真っ白な画面が開けると思いますが、ご心配なさらず。

真っ白な画面上で、右クリックをしてもらうとメニューが出てくると思いますので、その中から検証というものを選択して頂くと、検証ツール(デベロッパーツール<開発者ツール>)が画面の右側に表示されます。

デベロッパーツールが開けたら、上の方に「Elements」, 「Console」, 「Sources」というタブがあるのが確認できると思いますので、その3つのタブの中で、Consoleを選択してみてください。

すると、以下のようにJSファイルに記述したコードがブラウザ上にて実行されているのがわかると思います。

HTML内にJavaScriptを記述する方法

デベロッパーツールを活用し、ブラウザ上で実行する方法以外にも実は、JavaScriptファイルの実行方法はあります。

以下のように、scriptタグを用いて、HTMLファイル内に直接記述する方法になります。

次のコードと同じように修正を行い、再度、実行してみてください。

結果としては同じ内容が出力されることが確認できると思います。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js_sample1</title>
    </head>
    <body>
        <!-- js_sample1.js (JSファイル)を読み込む : このコードは削除 -->
        <script src="js_sample1.js"></script>
        <!--                                         -->

　　　　 <!-- 直接埋め込む : このコードを追加 -->
        <script>
            console.log("Hello JavaScript!!");
        </script>
        <!--                                         -->
    </body>
</html>