FREE AID

機電系フリーランスエンジニア求人情報サイト「フリーエイド」

search
close

FREEAID WORKSフリーランス求人を探す

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

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

    2024.08.06更新

    機電系エンジニア必見！！貴重なフリーランス案件はこちら ▶

    この記事を書いた人

    機電系専門ライター Div.長谷川

    長谷川

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

    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の魅力の一つです。したがってプログラム初心者の方の入門として最適なプログラミング言語でもあります。

    関連記事：  リアルタイムOSとは？汎用OSとの違いや特徴を紹介！

    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のコードも記述しますので、入門者の方は参考にして下さい。

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

    <a href=”2.タグ内に記入する”></a>

    3.body内に記入する
    </body>
    </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は、これまでになかったフリーランスの機電系エンジニアにむけた情報プラットフォームです。
    仕事を探すフリーランスのエンジニアと、機電系のプロフェッショナル人材が欲しい企業などのマッチングを行っています。

    フリーランス×機電系エンジニア！高単価求人はこちら ▶
    初心者向けのJavaScrip入門！使い方から基本のプログラミングまでガイド！のページです。エンジニアにまつわるお役立ちの最新情報を発信しています。電気電子設計や製造技術や機械設計・生産技術などはもちろん、 フィールドエンジニアやITシステム開発まで、機電系エンジニア業界での働き方や年収、話題性の高い情報を細かく解説しています。 また、当サイトではフリーランス機電系エンジニア求人をご用意しています。 気になるエンジニア求人があれば、ご応募ください。 フリーランスの機電系エンジニア求人 なら【フリーエイド】
    記事一覧に戻る

    こんな記事も
    合わせて読まれています

    機電系求人はこちら機電系求人はこちら

    • TOP>
    • 記事一覧>
    • 初心者向けのJavaScrip入門！使い方から基本のプログラミングまでガイド！
    【貴重！】機電系フリーランス案件を見る
    【貴重!】機電系フリーランス案件を見る