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

2020年2月6日プログラム始め方JavaScript

JavaScriptプログラミングを始める方法
JavaScriptプログラミングを始める方法

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

プログラミング歴

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

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

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

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

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

実はめちゃ簡単な方法があります。
詳しい方法：プログラミング未経験でも今すぐ始める方法【JavaScript】

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

JavaScriptのプログラミングは、「テキストエディタ」と「ブラウザ」が必要です。この2つあれば始める事ができます。

テキストエディタとは
Windowsだとメモ帳のようにテキストを編集するアプリです。JavaScriptでプログラミングするためにはこのテキストエディタを使って作業します。

ブラウザとは
言わずと知れたWebページを表示する時に使うアプリです。JavaScriptのプログラミングコードを実行するために必要。

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

テキストエディタを用意

テキストエディタは「Visual Studio Code」を用意します。
※とりあえずはメモ帳でもOK

VIsual Studio Codeとは

Windowsで有名なMicrosoft製のテキストエディタです。最近のシステム開発ではよく利用されるエディタです。
関連記事：Visual Studio Code のインストールページ

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

テキストファイルを作成

テキストファイルを作成
テキストファイルを作成

上記のようにHTMLのテキストファイルを作成します。ファイル名は「index.html」とします。
※ファイルの拡張子(.html)を表示するようにパソコンを設定しておきましょう。

HTMLのテキストファイルへJavaScriptプログラムを記述

テキストエディタで作成したHTMLのテキストファイルを開きます。そして以下のコードを記述します。

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

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

そしてファイルを上書き保存します。

JavaScriptを実行

HTMLファイルをブラウザへドラッグ&ドロップ
HTMLファイルをブラウザへドラッグ&ドロップ

上記で作成したHTMLのテキストファイル「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でプログラミングする手順

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

ですが、プログラムでは

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

特徴があります。

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

ですので、

つぎはJavaScriptでプログラミング基礎の学習へ進んでみてください。
記事：プログラミング基礎を理解するコツを解説【JavaScript基礎講座】

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

【初心者】JavaScriptでプログラミングを始める方法を解説
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年2月6日プログラム始め方JavaScript

Posted by ユート