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

2020年2月6日システムJavaScript,プログラミング初心者

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

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

この記事では、JavaScriptプログラミングを始めたいけど、どうすればいいの?JavaScriptって何?などJavaScriptの特徴プログラミングの始める方を紹介します。

この記事でJavaScriptについて分かること

  • JavaScriptの特徴
  • JavaScriptで出来ること
  • JavaScriptプログラミング初心者にオススメな理由
  • JavaScriptプログラミングを始める方法

JavaScriptとは

JavaScriptとは
JavaScriptとは

JavaScriptは、プログラミング言語の1種で主にブラウザ上で動作させることが出来ます。1995年に開発され、Webサイトに動きなどをつける為に開発されました。

現在のWebサイトだと、大体JavaScriptが使われています。

JavaScriptで出来ること

JavaScriptを使うことで、Webサイトやホームページにアニメーションなどの動きを付けることが出来ます。

JavaScriptが使われているWebサイトの事例

Twitterを例にしてJavaScriptが使われている事例を紹介します。

例えば

  • いいねボタンを押下すると、いいねされる。
  • タイムラインで一番下までスクロールすると、続きが読み込まれて表示される。

などでJavaScriptは使われています。またこういったWebサイトを「リッチなユーザインタフェース」と言ったりします。

JavaScriptがプログラミング初心者にオススメである理由

JavaScriptは、プログラミングを始めようと思っている初心者にとてもオススメです。

なぜJavaScriptプログラミング初心者にオススメなのか理由を説明します。

詳しくは、以前書いた「プログラミング初心者におすすめ出来る1つのプログラミング言語」で紹介したのでぜひご覧ください。

JavaScriptがプログラミング初心者にオススメな理由

  • 発環境の構築やインストールなどが不要である。
  • インターネットで調べるとすぐに情報が見つかる。
  • 利用シェアが高い。

JavaScriptだとプログラミング学習だけを集中して学習することが出来ます。なので、就職・転職などビジネスへ早くコミットすることが出来ます。

またJavaScriptをある程度理解できると、他のプログラミング言語の習得に活用することが出来ます。なぜなら、プログラミングの書き方や出来ることなど、プログラミングに関する考え方は大体同じだからです。

開発環境の構築やインストールなどが不要

プログラミング初心者にとって、開発環境を整える作業はすごくハードルが高いことです。なので、プログラミングを始めるための開発環境を整える作業で挫折する人はすごく多いです(汗)

ですが、

JavaScriptは開発環境を構築する必要がありません。」

なぜなら、

テキストエディタとブラウザさえあればJavaScriptでプログラミングの勉強をすぐに始めることが出来ます。」

  • テキストエディタは、
    • JavaScriptプログラミングコードをコーディングするために必要。
  • ブラウザは、
    • JavaScriptプログラミングコードを実行するために必要。
プログラミング初心者にオススメなテキストエディタ

プログラミング初心者にオススメなテキストエディタは「Visual Studio Code」というテキストエディタです。
Visual Studio Code のインストールページ
理由は、「マイクロソフトが作成したテキストエディタである」ことや「WindowsでもMacでも動作するテキストエディタである」などの理由があります。
※テキストエディタに関する詳しい内容は、後日書こうと思っています。

インターネットで調べるとすぐに情報が見つかる

JavaScriptは、インターネットにすごく情報があります。

なので、 「エラーで困ったこと」や「作りたいシステムのサンプルコード」などすぐに見つかったりします。

あまり使われていないような特殊なプログラミング言語だと、インターネットで調べてもなかなか情報が見つからないことが多いです。

利用シェアが高い

JavaScriptは、利用シェアが高いプログラミング言語です。

例にすると、Qiitaというプログラミング共有サービスにおいてもJavaScriptがタグ登録されている投稿記事ランキングは上位にあります。

QiitaでのJavaScriptタグの投稿記事ランキング
QiitaでのJavaScriptタグの投稿記事ランキング

また利用シェアが高いということは、就職や転職などにおいても需要があると思います。

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

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

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

JavaScriptでプログラミングしてみる

前段でも紹介しましたが、JavaScriptは"テキストエディタ“と"ブラウザ“があればプログラミングを始めることが出来ます。

JavaScriptを実行(ステップ1)

テキストエディタを開き、以下のコードを記述してファイルを保存します。

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

※テキストエディタがPCに入っていない場合は、「Visual Studio Code」からPCへインストールしてください。

“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を実行(ステップ2)

ステップ1で作成した「index.html」をブラウザで表示します。

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

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

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

サンプルコードの解説

JavaScriptで「Hello World.」とダイアログを表示するサンプルコードについて解説します。

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

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

JavaScriptが書かれている個所は、「<script>」から「</script>」というタグで囲まれた内容がJavaScriptプログラムになります。

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

そして、この「alert('Hello World,’);」がJavaScriptプログラミングです。

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

例えばテキストエディタで以下の様にJavaScriptを変更してみます。

alert('Hello World.');

を以下の様にJavaScriptサンプルコードを変更します。

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

そしてブラウザで[F5]キーを押下して更新します。

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

以上がJavaScriptプログラミングした簡単なサンプルコードの紹介となります。

JavaScriptに関する専門用語

JavaScriptに関する専門用語
JavaScriptに関する専門用語

JavaScriptの勉強を進めていると、JavaScriptに関する専門用語がちらほら出てきます。

ここでは、良く使われるJavaScriptの専門用語を紹介します。

Ajax(エージャックス)とは

Ajaxとは、Asynchronous JavaScript + XMLの略。
難しく言うと「JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと」です。

簡単な例を言うと、

Twitterのライムラインで最下部へスクロールした時に、続きの内容が更新される

これがAjaxを利用した機能です。

※少し詳しく言うと、Twitterのタイムラインで最下部に行った際に、Ajax非同期通信(一部の情報をサーバから取得)して更新しています。

JQuery(ジェイクエリー)とは

JQueryとは、JavaScriptのライブラリです。

簡単に言うと、

JavaScriptでのプログラミングを楽にするやつ

です。

例えば、アコーディオンの実装が1行で出来ます。

JQueryを使わないでJavaScriptだけで実装すると、数十行のプログラミングコードを書かないといけません。
jQuery日本語リファレンス – slideToggle([speed], [callback])

JSON(ジェイソン)とは

JSONとは、JavaScript Object Notationの略です。

テキストベースのデータフォーマットです。Ajaxを使うようになると、JSONをよく利用することになります。

DOM(ドム)とは

DOMとは、Document Object Modelの略です。

JavaScripthtmlの要素(<p>や<span>などのHTMLタグ)を操作するための仕組みです。

HTMLの要素を操作する例として

Twitterでツイートする際に、ツイート分を入力すると"ツイートする"ボタンが押せるようになる

といったことで、"ツイートする"ボタンをJavaScriptでボタンを操作しています。

あと、DOMでいえば、Element(エレメント)という用語も出てきます。

まとめ

まとめ
まとめ

JavaScriptの特徴JavaScriptでプログラミングを始める方法について紹介しました。この記事を参考にプログラミング初心者JavaScriptプログラミング学習を始める手助けとなると幸いです。

JavaScriptがプログラミング初心者にオススメな理由

  • 開発環境の構築やインストールなどが不要なので、プログラミングの学習をすぐに始めることが出来る。
  • インターネットで調べるとすぐに情報が見つかる。
  • 利用シェアが高い。
【初心者】JavaScriptでプログラミングを始める方法を解説

プログラミング学習について

プログラミングの学習において少しアドバイスすると、プログラミングについて詳しく理解していなくても実際にプログラミングをして、プログラムの書き方に慣れると上達が早くなります。

【作業用】JavaScriptでカレンダー作成〜プログラミング動画〜[Study With Me]
プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。