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

2024年8月6日更新

この記事を書いた人

「FREE AID」編集部：長谷川

大手メーカー「コマツ」、「オムロン」などで7年間、アナログ回路エンジニアとして設計・評価業務に従事。
ECU、PLCなどのエレキ開発経験を多数持つほか、機械商社での就労経験も有する。
株式会社アイズ運営の機電系フリーランスエンジニア求人情報「FREEAID」専属ライターとして、
機電分野の知識と実務経験を活かし、専門性の高い記事執筆を行っている。

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

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

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

Google Chrome

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

Fire Fox

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

機電系エンジニア活躍中！フリーランス高単価案件はこちら ▶

プログラムの実行手順

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

JavaScriptのプログラム実行手順

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

JavaScriptのプログラミング例

JavaScriptの書き込む場所

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

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

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

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

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

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

1. 変更するHTML要素を取得する
2. HTML要素を変更

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

<script>
ver elem = document.getElementByID(“text”);
elem.innerHTML = ‘置き換える内容’;
</script>

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

まとめ

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

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

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

https://freelance-aid.com/

FREE AIDは、これまでになかったフリーランスの機電系エンジニアにむけた情報プラットフォームです。
仕事を探すフリーランスのエンジニアと、機電系のプロフェッショナル人材が欲しい企業などのマッチングを行っています。

この記事の運営元：株式会社アイズ

株式会社アイズは、お客様と従業員双方の声を重視し、最適な技術サービスを提供することで社会に貢献するトータルソリューションカンパニーです。
「アウトソーシング」「ビジネスソリューション」「エンジニアリング」「ファクトリーオートメーション」の4つの事業を柱に、製造業やICT分野の課題解決を力強くサポートします。
フリーランスの機電系エンジニア求人情報サイト「FREE AID」を運営しています。