JavaScriptでプログラミングを始める方法【プログラミング初心者の入門講座】

2020年2月6日システムJavaScript,プログラム入門

【初心者】JavaScriptでプログラミングを始める方法【プログラミング初心者の入門講座】
【初心者】JavaScriptでプログラミングを始める方法【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

JavaScriptでプログラミングを始める方法について紹介します。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

JavaScriptでプログラミングをする方法

JavaScriptでプログラミング勉強を始めようと思っている人は

  • どうやって始めたらいいのかわからない

と悩んでいると思います。

実はめちゃ簡単な方法があります。

では、JavaScriptでプログラミングの勉強を始める方法について解説します。

簡単にJavaScriptでプログラムを実行する方法

まずはJavaScriptのプログラムを実行する一番簡単な方法である「Chromeブラウザを使った方法」について解説します。

本格的にJavaScriptでプログラミングする方法は後述します。

手順1：ブラウザを表示

まずChromeブラウザを起動します。

JavaScriptでプログラムを実行する方法(手順1：ブラウザを表示)
JavaScriptでプログラムを実行する方法(手順1：ブラウザを表示)

手順2：ブラウザで開発ツールを表示

そしてChromeの開発ツール(デベロッパーツール)を表示します。

JavaScriptでプログラムを実行する方法(手順2：ブラウザで開発ツールを表示)
JavaScriptでプログラムを実行する方法(手順2：ブラウザで開発ツールを表示)
デベロッパーツールの表示方法
  • メニューから表示
    • Mac
      • [表示] – [開発/管理] – [デベロッパーツール]
    • Windows
      • 右上アイコン横の三点リーダー – [その他のツール] – [デベロッパーツール]
  • ショートカットキーで表示
    • Mac
      • [optionキー] + [commandキー] + [iキー]
    • Windows
      • [ctrlキー] + [shiftキー] + [iキー]

デベロッパーツールを開くと以下のような画面が表示されます。

JavaScriptでプログラムを実行する方法(手順2：ブラウザで開発ツールを表示)
JavaScriptでプログラムを実行する方法(手順2：ブラウザで開発ツールを表示)

手順3：JavaScriptのプログラムを書く

そして以下のプログラムコードをデベロッパーツールへコピー＆ペーストします。

alert('はじめてJavaScriptのプログラムを実行！');
JavaScriptでプログラムを実行する方法(手順3：JavaScriptのプログラムを書く)
JavaScriptでプログラムを実行する方法(手順3：JavaScriptのプログラムを書く)

手順4：プログラムを実行

そしてデベロッパーツールで[Enterキー]を押下して、プログラムを実行します。

すると、以下のように「はじめてJavaScriptプログラムを実行！」っとダイアログメッセージが表示されます。

JavaScriptでプログラムを実行する方法(手順4：プログラムを実行)
JavaScriptでプログラムを実行する方法(手順4：プログラムを実行)

どうでしょう？思った以上に簡単だったと思います。

JavaScriptでプログラミングを簡単に始める方法
  • ChromeブラウザのデベロッパーツールでJavaScriptを実行する

本格的にJavaScriptでプログラミングする方法

さきほどは簡単にJavaScriptでプログラミングする方法を紹介しました。ここからは本格的な方法を解説します。

テキストエディタとブラウザを用意します。

  • テキストエディタ
    • JavaScriptでプログラミングコードをコーディングするために必要。
  • ブラウザ
    • JavaScriptのプログラミングコードを実行するために必要。

本格的なJavaScriptのプログラミングは、この2つあれば始める事ができます。

エンジニアもテキストエディタでプログラミングします。

テキストエディタを用意

テキストエディタは「Visual Studio Code」を用意します。

VIsual Studio Code

Windowsで有名なMicrosoft製のテキストエディタです。最近のシステム開発ではよく利用されるエディタです。

→Visual Studio Code のインストールページ

Visual Studio Codeの設定：インストールしてからする日本語化とかの初期設定

JavaScriptを実行

ステップ1：テキストエディタへプログラムを書く

テキストエディタを開き、以下のJavaScriptのソースコードを記述します。

“JavaScriptで「Hello World.」とダイアログを表示する"サンプルコード

<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptをプログラミングの始め方</title>
	</head>
	<body>
		<h1>JavaScriptをプログラミングする方法</h1>
		<script>
			alert('Hello World.');
		</script>
	</body>
</html>

ステップ2：ファイルを保存

そしてテキストファイルを保存します。

  • ファイル名は「index.html」とします。
  • ファイルを作成する場所は「デスクトップ」とします。

ステップ3：JavaScriptを実行

上記で作成したファイル(index.html)をブラウザで表示します。

index.htmlをブラウザで表示する方法は、

  1. まずブラウザ(EdgeでもChromeでもFireFoxどれでもOK)を開きます。
  2. 次にデスクトップへ保存した「index.html」ファイルをブラウザへドラッグ＆ドロップします。

すると、ブラウザに「Hello World.」と表示されます。

本格的なJavaScriptのプログラミング方法は以上です。

めちゃ簡単です！

おまけ：サンプルコードの解説

ここからは少しおまけの内容でJavaScriptのサンプルコードの解説をします。

<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptをプログラミングの始め方</title>
	</head>
	<body>
		<h1>JavaScriptをプログラミングする方法</h1>
		<script>
			alert('Hello World.');
		</script>
	</body>
</html>

実はこのサンプルコードは、HTMLとJavaScriptが混在しています。

HTMLもWebサイト制作では重要ですが、いったん無視して大丈夫です。

JavaScriptは、<script>から</script>で囲まれた部分の

<script>
	alert('Hello World.');
</script>

が、JavaScriptのプログラミングです。

このプログラミングは『Hello World.とダイアログメッセージを表示』です。

サンプルコードを変更してみる

では、おまけついでにテキストエディタでJavaScriptのサンプルコードを変更してみます。

ステップ1

テキストエディタでindex.htmlファイルを開いてください。

ステップ2

そして以下のソースコード

alert('Hello World.');

を以下の様に変更します。

alert('こんにちは。');

変更したら上書き保存([ctrlキー]+[sキー])をします。

ステップ3

そしてブラウザを再読み込み([F5キー])します。

「Hello World.」というダイアログのメッセージが表示されていたのが、「こんにちは。」というメッセージ変わったと思います。

これがJavaScriptのプログラミング方法の基本手順です。

まとめ：JavaScriptでプログラミングを始める方法

まとめ：JavaScriptでプログラミングを始める方法
まとめ：JavaScriptでプログラミングを始める方法

今回はJavaScriptでプログラミングする方法を解説しました。

  • 簡単にJavaScriptでプログラムを実行する方法
  • 本格的にJavaScriptでプログラミングする方法
  • JavaScriptでプログラミングする手順

わからない事だらけなので最初が一番つらいと思います💦

ですが、プログラムでは

1つのプログラミング言語である程度プログラムできるようになると他の言語でも通用する

特徴があります。

プログラミング言語1つ習得すると他の言語の習得が容易になります。

最後までご覧いただきありがとうございました。

【初心者】JavaScriptでプログラミングを始める方法を解説
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

＼今なら／Amazonギフト券チャージでポイントが貯まる

Amazonチャージでギフト券をチャージするとお得
Amazonチャージでギフト券をチャージするとポイントが貯まる

Amazonチャージでギフト券をチャージしておくとポイントが貯まるのでめっちゃお得です。

UT

Amazonを利用している人ならお得な情報です。

Amazonチャージとは

Amazonギフト券を事前にチャージしておけるサービスです。特典としてチャージする度にポイントが付与されるのでお得です！

  • 5,000円以上：0.5%
  • 20,000円以上：1%
  • 40,000円以上：1.5%
  • 90,000円以上：2%

※Amazonギフト券の有効期限は10年間と長いので、9万円チャージしたとしても1年に9,000円以上使うのであれば無理なく使い切れます。

リンク：Amazonチャージはこちらから。

クレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中
クレジットカードチャージで0.5%ポイントが貯まる

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中です。

UT

以下のリンクからキャンペーンにエントリーする必要があるので注意が必要です。

リンク：Amazonチャージのキャンペーンエントリーはこちらから。

ブラックフライデー連動のスタンプラリー

ブラックフライデー連動のスタンプラリー
ブラックフライデー連動のスタンプラリー

Amazonでは、2021年12月17日までにスタンプを5つ集めると「10人に1人最大50,000～500ポイント」が当たるチャンス！なスタンプラリーが開催しています。

  • ポイントアップキャンペーンにエントリーする
  • Amazonプライム配送特典の対象商品を購入する
  • Prime Videoを観る
  • Amazon Music Primeを聴く
  • Prime Readingの本を読む
UT

スタンプの1つである「ポイントアップキャンペーン」へのエントリーは、2021年12月02日23時59分までに完了する必要があります。

リンク：Amazonプライムスタンプラリーはこちらから。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想ｗだから実績が出ないorz)
→UTのプロフィール
→Amazon欲しいものリスト

2020年2月6日システムJavaScript,プログラム入門

Posted by UT