【JavaScript】JavaScript入門

アプリケーションやWEBサイトは生活に欠かせない必需ツールです。
JavaScriptはそれらを構築する１つの技術です。

ここではJavaScriptについてご紹介します。

JavaScriptとは

JavaScriptはプログラミング言語の１つです。
主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。

JSファイル

JavaScriptで記述したファイルをJSファイル（またはJavaScriptファイル）と呼びます。
ブラウザで動作するにはHTMLドキュメントからJSファイルを読み込みます。

開発環境

ブラウザで動作するJavaScriptの開発はテキストエディタとブラウザを利用します。
いずれもOSにデフォルトで用意されているものでも構いませんが、WEBサイトやアプリケーションの開発を想定する場合は別途インストールすることをお勧めします。

特にテキストエディタは開発効率に関わり、学習においても時間短縮を狙うことができます。
AtomやVisual Studio Codeなど様々なものがありますので、OSや好みに合わせてインストールしてみてください。

ブラウザは学習段階では普段使い慣れたブラウザで問題ありません。
一般公開（リリース）する場合は、各種ブラウザでテストした方が良いため、想定ブラウザを用意することをお勧めします。

開発環境

初めにどの方法でも多様する開発者ツールを開きましょう。

開発者ツールは多くのブラウザにデフォルトで備わっており、例えば、Chromeでは次の手順で開けます。

1. ブラウザを起動する

ブラウザを起動します。
ページは任意のもので問題ありませんが、不要な処理やデータが入り込む可能性があります。
可能であればご自身で作成した空のHTMLファイルをブラウザで開いてください。

2. ページの任意の場所を右クリック

右クリックすると次のようなメニューが開きます。

3. 『検証』をクリック

『検証』をクリックすると開発者ツールのウィンドウが開きます。
※ ウィンドウが開く場所は右や下、別ウィンドウなど環境によって異なる場合があります。

なお、2,3の手順はショートカットコマンドがあります。
MacOS: Command + Option + I
Windows: Ctrl + Shift + I

4. 『Consoleタブ』をクリック

『Consoleタブ』をクリックすると大なり記号（>）とテキストカーソルが表示されます。
ここにプログラムの結果を出力することができます。

実行方法

ブラウザでJavaScriptを実行する方法は主に３種類あります。

開発者ツール

開発者ツールのコンソールに直接コードを入力します。

10 + 20を入力し、エンターキーで確定してみましょう。
計算結果の30が表示されていればコードの実行に成功です。

HTMLファイル（内部コード）

HTMLファイルのscript要素に記述します。
type属性にtext/javascriptを定義してください。

<script type="text/javascript">
    プログラムコード
</script>

例えば次のHTMLファイルをブラウザで開くと、開発者ツールのコンソールに30が表示されます。

sample.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript入門</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="text/javascript">
            console.log(10 + 20);
        </script>
    </body>
</html>

Console

HTMLファイル（外部コード）

一般的に多く使われる方法です。

HTMLファイルのscript要素のsrc属性でJSファイルを読み込み実行します。
type属性はtext/javascriptを定義してください。

<script type="text/javascript" src="JSファイルパス"></script>

例えば次のHTMLファイルをブラウザで開くと、開発者ツールのコンソールに30が表示されます。
※ HTMLファイルとJSファイルは同じディレクトリ（フォルダー）に保存しています。

sample.js

console.log(10 + 20);

sample.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript入門</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="text/javascript" src="sample.js"></script>
    </body>
</html>

Console

まとめ

JavaScriptはブラウザやサーバーで動作するプログラミング言語です。
様々な場面で活躍するため、是非習得してみてください。