TOP>
記事一覧>
初心者向けのJavaScrip入門！使い方から基本のプログラミングまでガイド！

初心者向けのJavaScrip入門！使い方から基本のプログラミングまでガイド！

2023.10.05更新

高収入も可能！機電系エンジニア求人はこちら ▶

この記事を書いた人

長谷川

FREE AID編集部機電系専門ライター Div.
アナログ回路設計・営業を経験した後ライター＆ディレクターとして独立。
電気電子・ITジャンルを得意とし、正確で分かりやすい情報の発信を行っています。

JavaScriptはWebサイトやシステムの開発に広く用いられているプログラミング言語です。今回は初心者の方の入門としてJavaScriptの基礎や使い方等をまとめました。これから学習を始めようと思っている方は是非参考にしてみて下さい。

JavaScriptとは？

JavaScriptはWebページで動的な操作を行わせたい時に使用されるプログラミング言語の一つです。JavaScriptを使うと開発者の意図に合わせてWeb上のコンテンツを動かすことや、ブラウザ上で表示される地図やグラフィックアニメーションなどの利用が出来ます。プログラミング環境の構築が容易のため、プログラム入門者でも学習し易い言語です。

JavaScriptはネットスケープコミュニケーションズのブレンダン・アイクによって開発されました。JavaScriptが初めてブラウザに実装されたのは1995年のNetscape Navigator 2.0で、実装された当初は「JavaScript」ではなく「LiveScript」という名前でした。

Web開発入門

JavaScriptは主にWeb開発に用いられるプログラミング言語ですが、実行するには他にも最低限HTMLやCSSの入門レベルの基礎知識が必要です。これはJavaScriptがHTMLやCSSで記述した内容に動きを与える言語であるためです。下表にHTMLやCSS、JavaScriptの基本的な用途を示します。

Javaとの違い

JavaScriptと似た名前のプログラミング言語に「Java」があります。プログラム入門者は2つの言語が同じ印象を持たれますが、基本的にJavaScriptはJavaとは全く別のプログラミング言語です。

JavaScriptは開発当初LiveScriptと呼ばれていました。しかし実装された当時Javaが大きな注目を浴びていたことや、JavaScripが実装されたブラウザのNetscapeとJavaを開発した会社が業務提携していたことから名前が変更されました。2つの言語の基本的な違いは下表に示します。

JavaScriptでできること

JavaScriptの用途

JavaScriptは基本的にWeb開発で使用されるプログラミング言語です。Web開発以外にもJavaScriptで出来ることは様々あるため、入門者の方向けに使用される開発の一例を紹介します。ただWeb開発以外の用途は他のプログラミング言語の方が使い勝手が良い場合が多くあまり使用されません。したがって、JavaScriptの入門者はWeb開発上での用途だけ学習しておけば問題ありません。

JavaScriptの利用例

ゲーム開発
スマホアプリ開発
Webアプリの開発

Web開発におけるJavaScriptの機能

Web開発においてJavaScriptを使用することで出来ることは非常に多岐に渡ります。内容についての詳細は記述しませんが、入門者の方向けにJavaScriptの入門として出来ることを一覧で紹介します。入門者の方が普段何気なく使っているWebサイトの便利機能はほとんどがJavaScriptによるものです。

Web開発におけるJavaScriptの機能例

ポップアップウィンドウの表示
ページを移動せずにデータを取得する（Google Map）
ページタブの作成
カウントダウンタイマーの表示
検索・ソート機能の追加
株価などのリアルタイムチャートの作成
ログインやカード情報の自動入力
自動計算機能

JavaScriptの利用例

JavaScriptは様々なWebサイトやWebサービスの開発に使われており、プログラム入門者でも聞いたことがある有名なWebサービスにも数多く使われています。以下に入門者の方向けにJavaScriptを使って開発された有名なWebサイトやサービスを紹介します。

JavaScriptの利用例

Twitter
ニコニコ動画
Facebook
メルカリ
グノシー

この章では入門者向けに、JavaScriptで最も多い使い方であるWeb開発でのプログラミングの方法を紹介します。JavaScriptのWeb開発ではブラウザ（「Internet Explorer」や「Google Chrome」などのインターネットに接続するアプリ）にJavaScriptの実行環境が搭載されているため、入門者でもブラウザさえあれば簡単に実行出来ます。

またブラウザ以外にプログラムの作成に必要なものは既存のテキストファイルだけなので、入門者でもインターネット環境があるパソコンだけで簡単にプログラム環境が整うのもJavaScriptの魅力の一つです。したがってプログラム初心者の方の入門として最適なプログラミング言語でもあります。

JavaScriptをブラウザで有効にする

入門者の方がJavaScript をブラウザで実行するにはまず、ブラウザ上でJavaScript を有効にする必要があります。昔はセキュリティのためにブラウザ側でJavaScriptを無効にしていましたが、現在では非常に多くのサイトで利用されているので無効にしてないことの方が多いです。ブラウザ毎に有効化の方法が異なるため、入門者の方向けに代表的なブラウザで有効にする方法を紹介します。

Internet Explorer

インターネットオプションの「セキュリティ」タブをクリック
「セキュリティのレベル」の「レベルのカスタマイズ」をクリック
設定ダイアログの「アクティブスクリプト」の部分を「有効にする」にチェック

Google Chrome

アドレスバー横の設定ボタンをクリックしてメニューを表示
「設定」をクリック
一番下の「詳細設定を表示、、」をクリック
プライバシーの見出し部分の「コンテンツの設定、、」をクリック
「JavaScript」の項目を有効にする

Fire Fox

常時有効。（拡張機能をインストールしないと無効に出来ない）

プログラムの実行手順

入門者の方がJavaScriptを記述する方法には、HTMLファイル中に記述する方法と、jsファイルを使ってHTMLに参照させる二つの方法があります。どちらでも動きますが、入門者にとっては直接HTMLに書き込む方法がおすすめです。以下に入門者の方向けにJavaScriptによるプログラムの実行手順を記述します。

JavaScriptのプログラム実行手順

テキストファイルにコードを記述する
ファイルを保存
拡張子を.htmlに変更
「右クリック」、「プログラムから開く」、「ブラウザ」で.htmlファイルを開く

JavaScriptのプログラミング例

JavaScriptの書き込む場所

JavaScriptはHTLMのプログラム中に記載するため、これからJavaScriptを学習したい入門者の方はHTMLの入門レベルの知識が必須です。JavaScriptの入門としてまずプログラムを書き込む場所を把握しましょう。下表に入門者の方向けにJavaScriptを書き込む場所と記入の仕方を示します。HTMLのコードも記述しますので、入門者の方は参考にして下さい。

【JavaScripを書き込む場所：HTMLコード】
<html>
<head>
1.ヘッダーに記入する
</head>
<body>

3.body内に記入する
</body>
</html>

以前はJavaScriptはヘッダー内に記載することが多かったのですが、ヘッダーに記載するとJavaScriptを完全に読み込んでからでないとBodyを読み込まないため、ページの表示に時間がかかってしまいます。

最近はページの読み込み速度が重要視されていることから、bodyの手前にJavaScriptを記述することが多くなっています。これからJavaScriptを学習する入門者の方はbodyの手前に記述することを覚えておきましょう。

プログラム例：HTMLコンテンツを変更する

「HTMLコンテンツ」はWebページに記述されている文章のことです。JavaScriptを使ってWebページ上で表示されるHTMLコンテンツを変更する機能は、入門者にとって最も入門的な使い方です。以下に入門者の方向けにJavaScriptでHTMLコンテンツを変更する手順とソースコードを示します。

HTMLコンテンツを変更する手順

変更するHTML要素を取得する
HTML要素を変更

【ソースコードの例】
<p id=”text”>書き換えるHTMLコンテンツ</p>

上記の入門者の方向けのコードでは１文目で書き換えるHTMLコンテンツのデータを指定し、4～5行目で内容を置き換えています。「text」や「elm」は変数（数学に使われるxやy)のため好きな文字列に変更可能です。また上記のコードでは入門者の方向けに分かりやすく記述するために含めていませんが、実際はボタンなどと連携してWebページ上で使用します。

まとめ

今回はJavaScript入門として入門者の方向けに基礎や使い方を紹介しました。JavaScriptはネット環境があるパソコンがあれば実行可能であるため、プログラミング入門者でも手が出しやすい入門的なプログラミング言語です。またソースコードも数多く公開されていることも入門者向けの学習し易い言語です。これからプログラミングを学ぼうと考えている入門者の方は是非挑戦してみて下さい。

電子工学・電気工学の専門知識が欲しいときは

電子回路の知識や組み方を勉強し、自分でものづくりができれば良いですが、知識や技術を身に着けるまでにはやはり時間がかかります。しかし、機電系のエンジニアは会社に属していることが多く、頼みづらいと思うこともあるのではないでしょうか。
電子工学や電気工学の専門的な技術・知識が欲しい！という方におすすめなのがFREE AIDです。

バナー