*jQuery*とは、**JavaScriptライブラリの1つ**でコードをシンプルに開発するために考案されました。*イベントハンドラ・アニメーション・Ajax*をシンプルに記述するためのAPIが提供されます。*最小のコード量で、より多くの事を実装すること*を目標として開発されました。
参考：[jQuery](https://jquery.com/)

*jQuery*は以下のような特徴があり、*JavaScript開発者*の多くは標準的にjQueryを使用しています。
・**コードが軽量であること**
コードサイズが100KB未満でコンパクトであるため、あらゆるモジュールに利用可能です。
・**CSS3に準拠していること**
CSS3準拠のため、スタイルシートの標準活用が可能です。
・**ブラウザ互換性が高いこと**
Chrome・Edge・Firefox・Internet Explorer・Safari・Opera等、主要なブラウザに対応しますので高い互換性があります。

実際の開発コードも、jQueryを使用することでJavaScriptやCSSのコード量を削減することができるのでおすすめです。

*jQueryライブラリ*は**公式ダウンロードサイトからダウンロード**します。公式サイト最新版は*3.6.0*です。
参考：[jQuery Download](https://jquery.com/download/)

jQueryはお使いの*パッケージマネージャ*からも利用できます。*npm*や*yarn*の場合は次の様にインストールセットアップを行います。
npm install jquery
yarn add jquery

jQueryはダウンロードせずに*CDN（Content Delivery Network）*の利用も可能です。CDNの使い方は、**\<script src=”配信先のjQuery URL”>**を指定します。
参考：[jQuery CDN – Latest Stable Versions](https://code.jquery.com/)

*jQuery*は次のサンプルのように、**HTMLに組み込んで利用**します。数ある入門サイトや入門講座でもおすすめする最初のステップです。
\<!doctype html>
\<html>
\<head>
    \<meta charset="utf-8">
    \<title>Title\</title>
\</head>
\<body>
    \<a href="URL">Text\</a>
    \<script src="jquery.js">\</script>
    \<script>
　　： 
    \</script>
\</body>
\</html>

jQueryコードをどこに書くかというと、\<script>と\</script>で囲んだ部分にJavaScriptやjQueryのコードを記述します。\<head>と\<body>の要素のどちらに記述しても構いませんが、作成したjQueryコードを実行する前にライブラリ読み込みを完了する必要があります。そのためjquery.jsの読み込みは、\<head>の最初に記述する方が確実に動作設定させることができます。

上記サンプルの”src=”で指定するjquery.jsは、**事前にダウンロードし保存**しておきます。ダウンロードせずにCDNを利用しても構いません。
参考：[jQuery How jQuery Works](https://learn.jquery.com/about-jquery/how-jquery-works/)

ここでは*jQueryの使い方*をいくつか紹介していきます。*ブラウザ表示完了後の処理*を考えてみると、JavaScriptでは**onload関数**を用いてブラウザ表示完了後の処理を記述できます。
window.onload = function() {
     alert( "ようこそ本ウェブサイトへ" );
 };
ここで*ダウンロードが上手く終了しない場合*は、以下の*jQueryコードで何らかの表示を追加*できます。以下の例は、jQueryのreadyイベントの実装例です。
$(document).ready(function() {
     // ここにjQueryコードを記載します
 });

上記サンプルで用いた**$**は*jQuery関数を呼ぶ手続き*です。つまり、$(document)はjQuery(document)と同義となります。さらに、”$(document).ready(function() {“は”$(function() {“と省略することもできます。省略時のサンプルは以下の通りです。
$(function(){
     // ここにjQueryコードを記載します
});

### jQueryの考え方をわかりやすく

*jQuery*は多岐に利用できますが、*CSSのセレクタ*や*HTMLの要素*を指定し処理を設定します。つまり「どのような条件で」「何を」「どうするのか」を順に指定すれば良いことが分かります。
・**条件設定「どのような条件で」**
　例として、クリックした時・ロード完了時等
・**指定するCSS・HTML要素「何を」**
　CSSやHTML要素
・**動作設定「どうするのか」**
　色を変更する・追加表示する等

具体的な指定方法については、以降で説明していきます。

*条件設定*の方法は*イベントAPIの定義*に従います。以下は代表的なイベントの例です。
・**ページがロードされた場合**
　ready()で指定し実行します。

その他マウスやキーボード操作に対応したイベントの多くを指定することができます。
・**イベントが発生した場合**
　クリックイベント時の処理をclick()で指定します。
　ダブルクリック時の処理をdblclick()で指定します。
　エラー時の処理をerror()で指定します。
　フォーカス時はfocus()で指定します。
　選択オプションの変更時はchange()で指定します。
　キー操作時はkeyup()・keypress()・keydown()で指定します。
　マウス操作時はmouseup()・mousedown()・mouseover()・mouseenter()・mousemove()・mouseleave()で指定します。

jQueryで*CSS・HTML要素を指定する場合*についてもまとめておきます。jQueryでは、**CSSのセレクタ**を用い合致する条件指定を行います。条件に応じて以下の要素を指定します。
・*jQuery(セレクタ[, コンテキスト] )*
　セレクタの設定を行います。
・*jQuery(エレメント)*
　DOMエレメントを指定します。
・*jQuery(配列エレメント)*
　配列を含むDOMエレメントを指定します。
・*jQuery(オブジェクト)*
　通常のオブジェクトを指定します。
・*jQuery(セレクション)*
　jQueryオブジェクトを複製します。
・*jQuery()*
　引数を受け付けない指定です。

jQueryではHTMLに対しても指定が可能です。各**HTML要素**を指定することができます。
・*jQuery( html [, ドキュメント] )*
　HTML文字列を解釈し設定します。
・*jQuery( html, 属性)*
　単一のHTMLを対象に設定します。

さらに、DOMがロード完了により実行する関数を定義するにはコールバック関数を指定します。
・jQuery( callback )
　簡略表現として用い、実際は$(document).ready()を指します。
　必要とされるコードを記述します。

実際のサンプルは次のようになります。
div要素で最初のボーダー枠を赤にし、以降の\<div>に”あなたは誰？”を緑で挿入します。最後の\<div>は背景色を赤に設定します。
\<!doctype html>
\<html>
\<head>
  \<script src="jquery.js"></script>
  \<script>
  $(document).ready(function(){
    $("span:first").css("border","2px solid red");
    $("div").html("\<span class='fg-g'>あなたは\<b>誰？\</b>\</span>");
    $("div:last").css("background-color","red");
  });
 \</script>
 \<style>
  .fg-g { color:green; }
  \</style>
\</head>
\<body>
  \<span>止まりなさい！\</span>
  \<div>\</div>
  \<div>\</div>
\</body>
\</html>

動作設定を記載する際には以下のような指定を行います。
**\<a href=”URL”>のリンクをクリックした場合**のサンプルは以下の通りです。
$("a").click(function() {
 // ここにコードを記述します
}
$("a")はa要素を表します。

コード記述の例として、alertで**ポップアップ表示を行う場合**のサンプルは以下のようになります。
$("a").click(function() {
 alert("メッセージ");
}

この記述は一見以下のコードと同等に見えます。
\<a href="URL" onclick="alert('メッセージ')">XYZ\</a>
*jQuery*の場合では、*1度の指定*だけで**全てのa要素に反映**できます。通常は各要素単位で指定する必要があるため、より*簡単に記述できるメリット*があります。

この他に*addClass()*でクラスを追加したり、*removeClass()*でクラスを削除したりすることができます。サンプルは以下の通りです。\<body>内の3つの\<p>の順番で表示色や背景色を変更しています。
\<!doctype html>
\<html>
\<head>
  \<script src="jquery.js">\</script>
  \<script>
  $(document).ready(function(){
    $("p:first").addClass("bg-y");
    $("p:last").addClass("fg-g");
  });
 \</script>
 \<style>
  .bg-y { background:yellow; }
  .fg-g { color:green; }
 \</style>
\</head>
\<body>
  \<p>本日の</p>
  \<p>テストは</p>
  \<p>中止です</p>
\</body>
\</html>

## jQueryはお手軽に始められる生産性向上ライブラリです

*jQuery*は*JavaScriptのライブラリ*のため、*HTML・CSSやJavaScriptの記述と併用可能*です。従来個別に設定していた指定が一括で行ったりイベントハンドラを簡単に設定したりすることができます。ウェブコンテンツの**開発生産性が向上**するため、ぜひ利用しましょう。

jQueryは、イベントハンドラ・アニメーション・Ajaxをシンプルに記述するためのJavaScriptライブラリで、コードサイズがコンパクトで人気があります。ここでは、jQuery初心者向け情報からライブラリの使い方までを入門講座として説明していきます。

jQueryとは、コードをシンプルに開発するために考案されたJavaScriptライブラリを指します

jQueryを使用することでJavaScriptやCSSのコード量を削減することができます

ウェブコンテンツの開発生産性が向上しますので、おすすめです

jQuery入門！基本情報からライブラリの使い方まで解説

- [JSONファイルとは？基本構造からファイルの読み書き方法まで解説](https://and-engineer.com/articles/YUrUYBAAACUA2zGd)

- [JavaScriptの入門！その概要や文法の基礎について解説！](https://and-engineer.com/articles/YOgeQBEAACgAyfVp)

- [JavaScript入門者・中級者におすすめの技術本8選！](https://and-engineer.com/articles/YSD_OhAAAGEhCS10)

*JSON*とは*JavaScript Object Notation*の略で、**データ記述言語の1つ**です。読み方は「ジェイソン」です。

JSONは*テキスト形式*で表記されるので、*簡単にデータ交換ができます*。JavaScriptで定義されているオブジェクト表記法ではありますが、*主要なプログラム言語*から利用されています。JSONの仕様は、*RFCおよびIETFの標準規格*です。
参考：[IETF STD90 RFC8259 JSON](https://datatracker.ietf.org/doc/html/rfc8259)

JSONファイルとは？基本構造からファイルの読み書き方法まで解説

JSONの特徴は、**表記形式がシンプル**であることです。具体的には、表記が*テキスト形式*なのでフォーマットが*読みやすい*ことが挙げられます。さらに*データ量が少ない*ため、軽量に処理を行うことができます。以上のことから、JavaScriptに限らず**言語に依存しないデータ交換**が可能です。

その他のデータ交換の方式には、*XML*を用いる方法もあります。XMLはExtensible Markup Languageの略で、マークアップ言語の1つです。XMLでは*ユーザが定義したタグ*を用いてデータ交換を行います。そのためXMLは*構文理解が必要*で、人間が直接読み取ることが簡単ではありません。

上記理由によりちょっとしたデータ交換には、初心者でも分かりやすいJSONがよく使われています。

JSONのフォーマットは簡単なため、初心者でもすぐに覚えられます。記述は*キー（名前）とバリュー（値）のペア*で記述していきます。

具体的には、以下の表記形式に従い記述します。
**表記形式：基本規則**
　{ “名前”: 値 }
　{ “名前”: 値 , “名前”: 値 }
　{
　　“名前”: 値 ,
　　“名前”: 値 ,
　　“名前”: 値
　}

基本規則についてもう少し説明します。
・**キー（名前）とバリュー（値）のペア**
　データは名前と値のペアで記述します。
　名前と文字列の値はそれぞれ”（ダブルクォーテーション）で括ります。
　’（シングルクォーテーション）は使用できません。

記述規則は以下の規定があります。
・**｛｝（波カッコ）と:（コロン）の利用**
　データの最初と最後は｛｝（波カッコ）で括ります。
　名前と値の間に:（コロン）を入れます。
・**名前と値のペアの間に,（カンマ）を利用**
　名前と値のペアが複数ある場合は、名前と値のペアの間に,（カンマ）を入れます。
・**配列は[]（角カッコ）で、ネストは{}（波カッコ）で記述**
　値を入れ子とする場合は配列表記とネスト表記が可能です。
参考：[JSONの紹介](https://www.json.org/json-ja.html)

### JSONの特殊文字の表記形式は？

以下の特殊文字は、*エスケープ文字*として**\\（バックスラッシュ）**を先に入力し使用します。

・**\\”（ダブルクォーテーション）**
・**\\\\（バックスラッシュ）**
・**\\/（スラッシュ）**
・**\\b**
　バックスペースを意味します。
・**\\r**
　フォームフィードを意味します。
・**\\n**
　ラインフィードを意味します。
・**\\r**
　キャリッジリターンを意味します。
・**\\t**
　タブを意味します。
・**\\uXXXX**
　16進数表記です。

JSONは以下の*データ型*に対応しています。
・**文字列**
　”（ダブルクォーテーション）で括った文字列で、特殊文字は\\（バックスラッシュ）を先に付けます。
・**数値**
　0から9の数字、符号、小数点、指数記号（Eとe）が使えます。
　8進数と16進数は使えません。
・**true、false**
　論理値で全て小文字で表記します。
・**null**
　ヌル値で全て小文字で表記します。
・**オブジェクト**
　JSONオブジェクトを{}（波カッコ）で入れ子にすることができます。
・**配列**
　[]（角カッコ）で括ることで、連続したデータ領域が割り当てられます。

以下の例は、スーパーの食材仕入れデータの使用例です。
*使用例：*
　{
　　”Category”: [
　　{
　　　“ID”:201,
　　　“Name”: “Apple”,
　　　“Cost”:88,
　　　“Qty”:20
　　},
　　{
　　　“ID”:202,
　　　“Name”: “Orange”,
　　　“Cost”:99,
　　　“Qty”:50
　　},
　　{
　　　“ID”:203,
　　　“Name”: “Banana”,
　　　“Cost”:85,
　　　“Qty”:35
　　},
　　　　　：
　　]
　}

これまで学んだJSON表記形式を活用して、さらに項目や分類を整理することも容易にできます。

JSONファイルとは、**JSONフォーマット**で記述された*テキスト形式のファイル*を指します。ファイルを使ったデータ交換に利用されており、ファイルの拡張子は**.json**です。JSONファイルでは先に学んだフォーマットを*テキストエディタやツール*で作成していきます。

*テキストエディタ*としては、*WindowsのNotepad・MacOSのTextEdit、LinuxのVim*等のテキストエディタでファイルの作成や修正が可能です。高度なJSONの編集機能が必要でしたら、JSONに対応する作成ツール・エディタを使用します。

*JSONエディタ*は、Windows用JSONエディタとして*Notepad++やJSONedit*、MacOS用は*Jayson*が有名です。こだわりがなければ、Windows・MacOS・Linuxで動作する統合開発環境（IDE）の*Visual Studio Code（VSCode）*は無償（無料）で利用できるのでおすすめです。
参考：[Microsoft Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

先ほどはテキストエディタやツールを用いたJSONファイルの作り方を紹介しました。ここでは、*プログラムAPI*を説明します。JSONはプログラム言語に依存しないため、各種プログラム言語で利用します。特に、*JavaScript・Java・Python・PHP*の利用度は高いです。

JSONファイルを作るには、各*プログラム言語で提供されているAPI*を使用します。以下は、JavaScript・Java・Python・PHPを用いたJSONファイルの作り方です。
・**JavaScript**
ファイルへの出力は、オブジェクトをJSON.stringify()でJSONデータ形式に変換し、writeFileSync()でファイルに出力します。ファイルの読み込みは、readFileSync()やreadFile()でファイルからJSONデータを読み込み、JSON.parse()でオブジェクトを復元します。

・**Java**
Javaでは、JSONObjectクラスが利用できます。最初にimportでnet.sf.json.JSONObject、またはorg.json.JSONObjectのライブラリをインポートします。

ファイルへの出力は、データをJSONObject.put()でJSONデータ形式に変換し、JSONObject.write()でファイルに出力します。ファイルの読み込みは、readLine()でファイルからJSONデータを読み込み、JSONObject.get()でオブジェクトを復元します。

・**Python**
PythonではJSON APIを用い、最初に”import json”でライブラリをインポートします。

ファイルへの出力は、　次にjson.dumps()でJSONデータ形式に変換し、writelines()でファイルに出力します。ファイルの読み込みは、readline()でファイルからJSONデータを読み込み、json.loads()でオブジェクトを復元します。

・**PHP**
ファイルへの出力は、オブジェクトをjson\_encode()でJSONデータ形式に変換し、fwrite()でファイルに出力します。ファイルの読み込みは、fread()やfgets()でファイルからJSONデータを読み込み、json\_decode()でオブジェクトを復元します。

JSONは簡単で、初心者でも分かりやすい*データ交換フォーマット*です。基礎からじっくり学びたい場合は、以下の*入門本*をおすすめします。

・**きちんとわかる！ JavaScript とことん入門**
JavaScriptの基礎からWebサーバとの通信、JSONファイルの通信までカバーします。
出版元：技術評論社
参考：[きちんとわかる！ JavaScript とことん入門](https://gihyo.jp/book/2017/978-4-7741-9000-6)

JavaScriptの基礎が理解できたら、ウェブAPIを理解しましょう。
・**Web API: The Good Parts**
Web API設計の考え方と手法が理解できます。JSON over HTTP方式を用いてウェブサーバからJSONデータを受け取ることができます。
出版元：オライリー・ジャパン
参考：[Web API: The Good Parts](https://www.oreilly.co.jp/books/9784873116860/)

## JSONを理解してデータ交換に活用しましょう

JSONはシンプルなフォーマットで、*初心者でも分かりやすい*ことが特徴です。JSONフォーマットが理解できたら*JSONファイル作成*や、ウェブサーバから*JSONフォーマットのデータ交換*が可能です。ぜひ実際に**データ交換を試してみましょう**。

JSONはデータ記述言語の1つです。テキスト形式で記述が簡単なので、JavaScriptのみならず主要なプログラム言語から利用されています。ここでは、JSONの考え方から基本のフォーマット、さらにファイル読み書きまで解説していきます。

JSONとはデータ記述言語の1つで、JavaScriptで定義されているオブジェクト表記法を指します

JSONはテキスト形式で記述が簡単なので、主要なプログラム言語から利用されています

JSONを用いて、ファイルやウェブサーバを通じたデータ交換を簡単に行うことができます

JSON入門！基本フォーマットからファイルの作り方まで解説

まずは*Node.jsの基礎知識*について解説します。Node.jsとはそもそも何か、Node.jsが使われる場面、Reactなどとの違いについてまとめました。Node.jsについて誤解している人は多いので、今1度基礎をおさらいしましょう。

Node.jsはプログラミング言語ではありません。*Node.jsはJavaScriptの実行環境*の方を指します。Node.jsをインストールすると、JavaScriptをサーバサイドでも使うことが可能です。また、スマホアプリ開発やIoT開発にも利用することができます。**Node.jsを使うことで、フロントエンドとサーバサイドで使う言語をJavaScriptで統一できる**ため、プログラマーの負担を減らすことが可能です。

サーバサイドとは、Webサイトの裏側の処理のことです。Webページはブラウザとサーバが通信を行うことによって表示されます。サーバサイドは、サーバ側で動くプログラムを指します。ユーザーがWebサイトのURLを入力したら、*サーバ側のプログラムが動き、Webページを生成します*。Webページに必要なデータをデータベースから習得する、などの処理を行います。**Webページが表示されれば、サーバサイド側の役目は完了**です。

サーバサイドではPHP・Python・Perlなどの言語を使うのが一般的でしたが、Node.jsの登場でJavaScriptもサーバサイドで動かせるようになりました。

フロントエンドはWebサイトの表側の処理のことです。*ユーザーが直接触る部分の処理を担当*します。たとえば、ユーザーがフォームに入力した際にメッセージを出力したり、Webページにアニメーションをつけたり、スクロールに合わせて表示内容を変更する、といった処理です。

フロントエンドは、ユーザーのブラウザ側で動作します。**フロントエンドで使われる言語は、主にJavaScript**です。ブラウザはJavaScriptのコードを読み取り、コードに書かれた処理を行います。

Webアプリはサーバサイドとフロントエンドのプログラムが協力して動いています。

JavaScriptはプログラミング言語です。プログラミング言語は決められた法則に則って、処理を表すための言語のことです。一方で*Node.jsは実行環境を指します*。プログラミング言語で書かれたソースを読み取り、処理を行うためのものです。JavaScriptなどの言語はそれ単体では動作せず、必ず実行環境が必要です。

**PHPやPythonを動かす場合、実行環境をインストール**する必要があります。一方JavaScriptを動かす場合、特に実行環境を用意しなくても、ブラウザさえあれば動くでしょう。これは、ブラウザがJavaScriptの実行環境の役割を果たしてくれているからです。

ですが、JavaScriptをブラウザではなくサーバサイドで動かす場合は、実行環境を用意しないといけません。その実行環境がNode.jsです。JavaScriptとNode.jsは全く別物なため、注意が必要です。

*ReactはJavaScriptライブラリの1つ*で、主にUIに関連する機能を提供します。よくフレームワークと間違えられますが、フレームワークはWeb開発で必要な機能を全て提供するものであり、UI関連のみ提供するReactはこれに該当しません。

**Reactはライブラリですが、Node.jsはライブラリではなく実行環境**です。ReactとNode.jsは全く性質が異なるものです。

*Node.jsの使いどころ*について解説します。Node.jsは現状どういった場面で活躍しているのかまとめました。Node.jsは意外と汎用性が広く、**JavaScriptを様々な開発で使う**ことができます。1つ1つのNode.jsの使いどころについて詳しく解説します。

1番の使いどころは、やはりWebアプリ開発でしょう。*SNS・ECサイト・動画配信サイト*など多くのWebアプリが次々と登場しています。近年、家で過ごす時間が増えたため、Webアプリを使うユーザーも増えたと推測されます。Webアプリ開発は今後も伸びる市場でしょう。

Node.jsはスマホアプリ開発にも使えます。JavaScriptでスマホアプリ開発を行う際は、React Nativeを使うことが多いでしょう。*React Nativeとは、iPhoneとAndroidの両方で動かせるフレームワーク*のことです。

現状スマホアプリ開発では、**SwiftやKotlinが人気のため、Node.jsはそこまで使われてはいません**。とはいえ、Web・iPhone・Androidの3種類を1つの言語で開発できるのは、見逃せない特徴と言えるでしょう。

Node.jsはIoT関連の開発にも使えます。IoTとは**Internet Of Thingsの略であり、「物がネットに接続できる」ことを意味**します。たとえば、ネットに繋がるエアコンが既に多く販売されています。ネットに接続することで、エアコンをスマホから操作する、などが可能です。他にも、冷蔵庫や電子レンジなどIoT家電は多くあります。

IoTは今後も伸びる市場であり、*それが開発できるNode.jsも将来性が期待できます*。

### 大規模開発をする場合はTypeScriptがおすすめ

Node.jsはJavaScriptだけでなく、*TypeScriptの実行環境としても使えます*。TypeScriptはJavaScriptの代替言語として知られています。JavaScriptと違い、型を指定する必要があり、その分**エラーのチェックを厳密にできるメリット**があります。特に大規模開発では、エラーチェックが厳密にできる特性は効果を発揮します。反対に、小規模で素早い開発をしたい場合は、型の指定がいらないJavaScriptの方が向いているでしょう。

## Node.jsのメリット・デメリット

続いて、*Node.jsのメリット・デメリットを解説*します。Node.jsは利便性が高く、多くのWeb開発企業で導入が進んでいます。一方でNode.jsにはデメリットも存在します。**良い面と悪い面を両方理解した上**で、Node.jsを使うか考えましょう。

1番のメリットは、*サーバサイドとフロントエンドで言語が統一できる*ことでしょう。どちらもJavaScriptで開発できれば、PHPやPythonなどの言語を使わなくてよくなり、プログラマーの負担が減ります。また、企業側もサーバサイドとフロントエンドで別々にプログラマーを雇う必要がなくなり、コスト削減が可能です。

JavaScriptは長年現役で使われている言語であり、「JavaScriptなら極めている」というエンジニアも多いでしょう。JavaScriptがサーバサイドでも使えれば、そういったエンジニアの活躍の場が広がります。

また、**Node.jsは非同期処理ができるのも魅力**です。通常プログラムは、複数のタスクがある場合、上から順番に1つずつ実行します。上のタスクが終わらないと、下のタスクを実行できないため、タスクが多いと処理に時間がかかってしまいます。

非同期処理ができると上のタスクを実行中に下のタスクも進められるため、処理時間が削減できるでしょう。これによってWebサイトの表示スピードも上げることができ、ユーザーが使いやすいサイトが実現します。特に、大量のデータを処理しないといけない場面では、非同期処理ができることで表示速度は大きく変わります。

Node.jsのデメリットは、*対応しているサーバが現状少ないこと*です。対応していないサーバの場合、仮想環境を作ってそこでNode.jsを動かす、などといった手間がかかります。とはいえ、**Node.jsのデメリットはこのぐらいであり、基本的にはメリットの方が多い**でしょう。

最後に、*Node.jsの学び方をまとめました*。Node.jsを習得するには何をすべきなのか、おすすめの方法を解説します。本記事を通じてNode.jsに興味を持った方は、**ぜひこれらの方法で勉強してみてください**。

最も一般的な勉強方法は、参考書を購入することです。参考書なら*Node.jsの基礎を漏れなく網羅*しており、安心して学習を進めていけます。初心者向けの分かりやすく解説された良書も多くあるので、**自分に合ったものを1つ選んでみましょう**。

Node.jsを学ぶには、オンライン講座を活用するのもおすすめです。たとえば、*UdemyなどのサイトではNode.jsの講座を受けられます*。Udemyは**初心者向けから上級者向けまで幅広い講座を揃えています**。

## Node.jsは今後流行る可能性あり！ぜひ習得しよう

本記事では*Node.jsについて解説*しました。Node.jsは何なのか、ご理解頂けたかと思います。Node.jsはサーバサイドでもJavaScriptを動かせるため、開発効率が大きくアップするはずです。今後Node.jsを導入する企業は増えると推測されます。**JavaScriptを習得済みの方は、今のうちにNode.jsも習得すると活躍の場が広がる**でしょう。

本記事ではNode.jsとは何かについて解説します。Node.jsは最近注目されているJavaScriptの実行環境のことです。Node.jsを使いこなすことで、開発効率を一気に上げることが可能です。Node.jsの概要や詳しい説明についてみていきましょう。

Node.jsを利用すれば、JavaScriptをサーバサイドでも使うことが可能

Node.jsはスマホアプリやIoT開発でも使える

Node.jsを利用すれば、サーバサイドとフロントエンドで言語が統一できる

Node.jsとは？JavaScriptとの違いや使い所を解説

**jQueryとは、Webブラウザ用のJavaScriptのコードをより簡単に記述できるように設計されたJavaScriptライブラリの1つです。**jQueryのスキルを習得すれば、Web制作でできることの幅が広がります。ここでは、jQuery入門ということで、概要や特徴、できることについて初心者向けに分かりやすく紹介します。

jQueryはジョン・レシグ氏によって、2006年1月にリリースされました。**jQueryとはJavaScriptでできることを簡単に実現できるように設計されたJavaScriptライブラリの1つです。**つまり、jQueryとJavaScriptは異なったプログラミング言語ということではなく、jQueryはJavaScriptのプログラムの1つと言えます。

*jQueryの登場により、プログラミング初心者でもフロントエンドに関する開発を行いやすくなったという特徴があります。*近年では、JavaScriptフレームワーク「Vue.js」「React.js」の登場により、jQueryを使用することが「終わった」と感じている方もいるかもしれません。しかし*Web制作の現場では、jQueryはシンプルなコードで記述されるため、現在でも多用されています。*またjQueryは学習コストが低いため、身に付けて損はないスキルと言えるでしょう。

**jQueryのライブラリの中には、HTML・CSSに関するソースコードが数多くあり、動的な表現をシンプルな短いコードで簡単に実装できます。**例えばjQueryできることとして、Webサイトでよく使用されている「ボタンをクリックすると画像が切り替わるスライドショー」「マウスオーバーすると文字や背景の色が変化するメニュー」などが挙げられます。

*また、JavaScriptでできることの1つであるサーバ非同期通信「Ajax」についても、jQueryを使用すれば簡単に実装可能です。*一般的にサーバにデータを送信して、処理結果をWebサイトに反映するには、再読み込みを行う必要があります。しかしAjaxを使用すれば、非同期でサーバと通信できるため、Webサイトの再読み込みが不要となります。**jQueryを使用しないでソースコードを記述した場合、コード量は膨大となり、ソースコードの可読性や開発効率の低下を招いてしまうでしょう。**

jQueryとは、JavaScriptでできることをより簡単に記述できるように設計されたJavaScriptのライブラリの1つであることは理解できたでしょうか。ここでは、jQueryの使い方について詳しく紹介します。

jQueryを使用するには、導入から始める必要があります。**jQueryの導入方法には2種類があり、ファイルをダウンロードしてサーバに直接アップロードする方法と、jQueryの配布元で公開されているファイルを使用するCDNを用いる方法です。**CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称であり、Webコンテンツをインターネットを経由して配信するために最適化されたネットワークのことです。

まずjQueryをダウンロードして導入する方法では、オフラインでも利用できるというメリットがあります。*下記のjQueryに関する公式リファレンスの「Download」にある「Download the compressed, production jQuery x.x.x」と記載された最新バージョンのファイルを右クリックし、「名前を付けてリンク先を保存」でダウンロードすることが可能です。*
（ 参考：https://jquery.com/ ）

一方、CDNを使用してjQueryを導入する方法では、Webサイトの表示を高速化できたり、サーバの負荷を軽減させたりすることが可能です。*一般的に「jQueryのCDN」「GoogleのCDN」「MicrosoftのCDN」の3種類が使用できます。それぞれのURLを利用して、scriptタグを作成し、HTMLファイルのヘッダーに記述すれば導入は完了です。*

**jQueryの記述場所は、ダウンロードした場合とCDNを使用する場合のどちらでも、HTMLファイルのヘッダーに記述するのが一般的です。**ただしダウンロードした場合は、HTMLファイルのヘッダーに対して記述する前に、jQueryのファイルをアップロードしなければならないため、注意が必要です。

*またjQueryファイルをダウンロードした場合には、JavaScriptファイルをサーバにアップロードする必要があります。一方CDNを使用する場合には、この手順は必要ありません。*まずはダウンロードしたファイルをサーバにアップロードします。例えば「js」という名前のフォルダを作成して、そのフォルダの中にファイルをアップロードするのがおすすめです。 その後、jQueryファイルのパスを使用してscriptタグを作成する必要がある点にも注意しましょう。

次に、事前準備ができたらHTMLファイルのヘッダーのscriptタグに、jQueryについて記述を行います。ヘッダーには、CSSファイルなど様々なファイルの読み込みについて記述するため、ヘッダーのどこにjQueryについて記述したら良いか迷われる方も少なくないでしょう。**ヘッダー内であれば、どこに記述しても問題ないというのが結論となります。**一般的に、実務現場では様々なファイルを記述する中の最後に記載することが多いでしょう。

jQueryの使い方や導入方法については理解できたでしょうか。ここからは、jQuery入門ということで、jQueryの基礎文法について詳しく紹介します。

**jQueryの基本構文は「$("セレクタ").メソッド("パラメータ[引数]");」です。**セレクタにはjQueryで操作するHTML・CSSの要素を記載、メソッドには処理する内容について記載、そしてパラメータには具体的な処理を指示したい場合に記載します。例えば、h2タグによって囲まれた部分の色を青にする場合は下記のように記述します。

セレクタにはpタグ、メソッドにはcssを変更するためcss()、引数には文字色であるcolorを青（#0000FF）に指定するように記述しています。ここからはセレクタやメソッド、イベント処理について具体的に見ていきましょう。

**セレクタには、操作対象となるHTMLやCSSの要素が入力されます。**例えば、idやclassの属性値を入力することも可能です。jQueryではセレクタによって、HTMLやCSSの要素の様々な箇所を制御することができます。ここからはセレクタの指定方法の具体例を見ていきましょう。なおJavaScriptでは、「//」を使用すればコメントアウトすることが可能です。

// divタグを指定する場合
$("div")

// 最初のdivタグのみを指定する場合
$("div:first")

// 「pagetitle」というidを指定する場合
$("#pagetitle")

// 「myclass」というclassを指定する場合
$(".myclass")

**メソッドには、指定した要素に対してどのような操作を行うかを記載します。パラメータを入力すれば、より具体的な処理を指定することが可能です。**ここからは、よく使用されるメソッドについて紹介します。

例えば「.css()」メソッドは指定のCSSスタイルに変更するために使用。「.append()」メソッドはHTMLの末尾に指定した要素を追加するために使用。「.remove()」メソッドは指定した要素を削除するために使用。そして「.addClass()」は指定した要素にクラスを追加するために使用します。

メソッドと似ているものとしてイベントがあります。**イベントを使用すれば、Webサイトにアクセスしたユーザーのアクションに対して任意の処理を実行することが可能です。**

例えばボタンをクリックしたときや、画面をスクロールしたときなどに対して、イベント処理を行うことができます。 jQueryで使用できるイベントは数多くありますが、ここからは一例を紹介します。

// divタグの要素をクリックした場合のイベント
$("div").click():

// divタグの要素をマウスオーバーした場合のイベント
$("div").mouseover():

## jQueryを使用すればJavaScriptの記述を効率化できる！

これまでに、jQueryの概要・特徴・できること・使い方・導入方法・入門者向けの基本文法について解説しました。jQueryとは、**JavaScriptのコードをより簡単に記述できるように設計されたJavaScriptライブラリであり、JavaScriptのプログラムの1つ**とも言えるでしょう。また、**jQueryを使用すれば短いコードで開発を行えるため、ソースコードの可読性や開発効率の向上**が期待できます。

jQueryを導入するには、*公式リファレンスからダウンロードする方法とCDNを使用する方法*の2種類があります。それぞれのメリットとデメリットを把握してから、導入方法を選択するのがおすすめです。そしてjQueryを記述する場所は、*HTMLのヘッダー*です。

jQueryの基本構文は、主にセレクタ・メソッド・パラメータから構成されます。jQueryは学習コストが比較的低いため、今後Web制作に携わりたいと考えている方は、ぜひ勉強してみましょう。

jQueryとは、JavaScriptのコードをより簡単に記述できるように設計されたJavaScriptライブラリの1つです。当記事では、jQueryの概要・特徴・できること・使い方・導入方法・入門者向けの基本文法について解説します。

jQueryとは、JavaScriptのコードを簡潔に記述できるように設計されたJavaScriptライブラリ

jQuery導入方法は、公式リファレンスからダウンロードする方法とCDNを使用する方法の2種類

jQueryの基本構文は、主にセレクタ・メソッド・パラメータから構成される

jQueryとは？特徴・できること・導入方法・使い方を解説！

## JavaScriptでゲーム開発は初心者でもできる

JavaScriptと言えば、Webサイトに動きを付けるために使用されるイメージを抱く方が多いでしょう。実は、**シューティングゲームやRPGなどのゲーム開発もJavaScriptで行うことができます。**プログラミング初心者がJavaScriptを使用してゲーム開発を行うとしても、ハイレベルなプログラミングスキルは要求されません。そのためJavaScriptの基礎を身に付ければ、ミニゲーム程度のゲーム開発を行うことは充分に可能です。
ここでは、JavaScriptの概要やできることについて詳しく紹介します。

**JavaScriptは主にWebサイトに動きを付けるために使用されることが多いプログラミング言語です。**また、JavaとJavaScriptの名称が似ているため、同様の言語と勘違いされる方も多いですが、これら2つは全く異なるプログラミング言語です。

HTMLやCSSのプログラミング言語を習得すれば、スマホやPCで閲覧できる簡単なWebサイトを作成することができます。しかし、これらの言語だけでは静的なWebサイトしか作成することができません。*JavaScriptのプログラミング言語を習得すれば、Webサイトに動的要素を追加できるため、よりユーザーに配慮したWebサイトを作成することが可能です。*

まず先述したように、*JavaScriptを使用すればスマホやPCのブラウザに表示された画面に動きを加えることができます。*例えば画面をスクロールしたら、背景のデザインを変化させることなどが可能です。他にもサーバと通信を行い、データを送受信することもできます。

**またNode.jsが登場したことにより、JavaScriptはフロントエンドだけではなく、サーバーサイドの開発でも使用されています。さらにReact Nativeというフレームワークを使用すれば、iOSとAndroidの両方に対応したスマホアプリを開発することが可能です。**このようにJavaScriptはWebサイトに動きを付けるだけではなく、様々なことに活用されています。

## JavaScriptでゲーム開発を行うメリット

JavaScriptの概要やJavaScriptでできることは理解できたでしょうか。ここでは、JavaScriptでゲーム開発を行うメリットについて詳しく紹介します。

### Web開発のスキルも併せて勉強できる

**JavaScriptは汎用性の高いプログラミング言語であるため、ゲーム開発を行うときに基礎スキルを習得すれば、Web制作やWebアプリ開発に応用することもできます。**例えばWebデザイナーにも興味がある方や、スマホアプリを開発してみたい方は、JavaScriptによるゲーム開発の経験は将来的に活用できる可能性が高いと言えるでしょう。

### 疑問点や不明点が生じても解決策を得やすい

**JavaScriptは世界中で使用されている言語であるため、数多くの開発者が初心者向けのトラブルに対する解決策に関する記事をインターネット上などで公開しています。**2021年8月のTIOBEインデックスのプログラミング言語人気ランキングに関するデータによると、JavaScriptは7位に位置しており、人気の言語であることが理解できます。
（ 参考：https://www.tiobe.com/tiobe-index/ ）

知名度が低いプログラミング言語の場合、情報収集に時間がかかってしまいます。一方JavaScriptの場合、数多くの知見があるため課題解決も比較的容易です。

### 他のプログラミング言語と比較して難易度が易しい

**多種多様にあるプログラミング言語の中でも、JavaScriptは習得難易度が比較的簡単な方です。**プログラミング初心者の場合、エラーやバグなど不具合が発生すると、モチベーションが維持できず挫折してしまうことも少なくありません。JavaScriptであれば習得難易度が低いため、プログラミング初心者にとって最初に学ぶ言語としておすすめと言えるでしょう。

### 短期間で開発を行うことができる

**プログラミング言語の習得難易度が低かったり、課題解決に対する知見が多かったりするということは、開発効率の向上にもつながります。**1つの制作に長い時間を割くのは実務において少なくありません。しかしプログラミング初心者の場合、短期間で成果を出せる方がモチベーションを維持しやすいと言えるでしょう。

ここではプログラミング初心者のために、JavaScriptを使用したゲームの作り方を習得するための学習方法をステップごとに紹介します。

**JavaScriptの開発環境の中で必須とも言えるのがエディタです。**JavaScriptでソースコードを記述するためにエディタが必要で、例えばメモ帳でも問題ありません。*しかしコーディングに特化したエディタを使用すれば、効率よく開発を行うことができます。また、将来的に実務のプログラマーとなった際にもエディタを使いこなせるのは重要です。*エディタにも様々な種類があり、例えば「Visual Studio Code」「Atom」「Emacs」などがあります。

**JavaScriptを使用する前にHTMLのスキルが必要です。**HTMLの知識のないプログラミング初心者は、まずHTMLの基礎を学習しましょう。HTMLの基礎は学習サイトや入門書などで学習すれば、簡単に身に付けることが可能です。
*Web制作を将来的に行いたいと考えている方は、CSSの知識を同時に身に付けたり、既に作成されているWebサイトをサンプルとして模写コーディングを行ったりすると実務で役立つスキルを習得できます。*

HTMLの基礎を学ぶことができたら、JavaScriptでゲーム開発を行うために、JavaScriptの基礎を勉強しましょう。**JavaScriptのおすすめの学習方法は、学習サイト・本・勉強会・プログラミングスクールなどが挙げられます。**どのような学習方法が自分に合うかを把握するために、独学でも勉強できるかどうかや、将来的な目標を明確にすることが大切です。

### JavaScriptを使用してソースコードを記述して実行する

**JavaScriptの基礎を学んだら、スキルを定着させるためにも実際に手を動かしてソースコードを記述してみることが重要です。**例えば学習サイトや本で扱ったサンプルコードを改変し、実際に実行してみるのがおすすめです。自分の手でソースコードを記述し、プログラムを実行すると、エラーなどの不具合が発生することも少なくありません。その際に新しい気づきを得られることが多く、スキルアップにもつながっていきます。
また、分からない部分が出てきたら、JavaScriptの基礎に立ち戻り復習を行うことも大切です。

### JavaScriptのゲームライブラリを勉強する

ライブラリとは、よく使用される機能をプログラムの中で再利用できるようにまとめたものを指します。**JavaScriptには数多くのライブラリが用意されており、ゲーム開発に特化したゲームライブラリもあります。**ゲームライブラリを使用すれば、プログラミング初心者でも効率よく開発を行うことが可能です。*特にゲーム開発には専門の知識やスキルが要求されるため、ライブラリを活用しないでゲーム開発を行うのは、初心者にとって難易度が高いと言えるでしょう。*

### JavaScriptを使用してゲーム開発を行う

JavaScriptのゲームライブラリを身に付けることができたら、実際にゲーム開発を行いましょう。**本格的なゲーム開発を行う前に、まずはサンプルを模写することから始めてみるのがおすすめです。**ソースコードのサンプルコードを使用してプログラミング言語の基礎を学ぶように、サンプル模写を行えばゲーム開発に必要な考え方を身に付けることができるでしょう。

初心者の場合、難しいサンプルを模写して学習すると、途中で挫折してしまうこともあるため、ミニゲーム程度のサンプルから取り組んでみることがおすすめです。*サンプルを通してゲーム開発の基礎を身に付けることができたら、自分なりのアレンジを加えて好みのゲーム開発を行ってください。*

## JavaScriptを使用すれば初心者でもゲーム開発ができる

これまでに、JavaScriptの概要やJavaScriptでゲーム開発を行うメリット、JavaScriptを使用したゲームの作り方について解説しました。**JavaScriptは主にWebサイトに動きを付けるために使用される言語ですが、近年では活躍の幅は拡大しており、ゲーム開発にも使用できます。**

JavaScriptは世界中で使用されており知名度が高いため、情報収集しやすいという特徴があります。また、JavaScriptは他のプログラミング言語と比較すると習得難易度が低いため、プログラミング初心者が最初に学ぶのにおすすめの言語とも言えるでしょう。

*JavaScriptでゲーム開発を行う前に、エディタの準備をしたり、HTMLとJavaScriptの基礎を習得したりすることが大切*です。また、JavaScriptには数多くのライブラリが用意されているため、**初心者でも効率よくゲーム開発を行うにはJavaScriptのゲームライブラリを習得しておきましょう。**ゲームライブラリまで学ぶことができたら実際にゲーム開発を行ってください。最初はサンプル模写を通してゲーム開発の考え方を身に付けることがおすすめです。

JavaScriptは他のプログラミング言語と比較すると習得難易度が低いため、初心者におすすめの言語の1つです。当記事では、JavaScriptの概要やJavaScriptでゲーム開発を行うメリット、JavaScriptを使用したゲームの作り方について解説します。

JavaScriptは主にWeb制作で使用される言語であるがゲーム開発もできる

初心者がJavaScriptでゲーム開発を行う際に、ゲームライブラリを使用すると効率よく開発できる

JavaScriptでゲーム開発を行う場合、サンプルのソースコードやゲームを活用するのがおすすめ

初心者がJavaScriptでゲーム開発はできる？作り方を解説！

## 初心者におすすめの言語、JavaScriptとは？

今人気の言語の中で、**JavaScriptは初心者の方におすすめしたい言語の1つ**です。ここでは、JavaScriptの特徴やできることを解説しながら、皆さんがJavaScriptに関心を持ち、学習していく上で参考になる事柄をお伝えしていきます。

Web全盛の時代、JavaScriptを知らないエンジニアはいないでしょう。**JavaScriptは動きのあるWebページの開発に使用される言語**です。皆さんがよく目にする動きのあるバナー広告や、写真がスライドするページなどはJavaScriptで作成されています。JavaScriptが登場する前のHTMLで作成されたWebページは動きがなく、静的画面が当たり前でしたが、JavaScriptの登場でWebページの概念が大きく変わりました。

JavaScriptは、単に*Webに動きをつけるだけのプログラミング言語というイメージが強いですが、実際にはさまざまな分野で利用されています*。この記事では、JavaScriptの特徴に加え、活用範囲や将来性などについて解説します。

### JavaScriptは人気のプログラミング言語

*[プログラミング言語人気ランキング2020（日経×TECH）](https://xtech.nikkei.com/atcl/nxt/column/18/01068/111100001/)*の「普段使用しているプログラミング言語ランキング」では、*JavaScriptはC/C++やPythonに次いで3位にランクイン*しているように、非常に人気の高い言語です。**世界では今注目のPythonと並ぶほどの人気言語で、U/Iが重視される今、その必要性がさらに高まっています**。

**JavaScriptとJavaを混同する人もおり、両者は同じ系統のプログラミング言語と思われがちですが、それぞれは全く別ものです**。*JavaScriptは主にWebページに動きを与えるためのプログラミング言語*ですが、*Javaはあらゆるマシンで動く汎用言語*です。Javaは主にサーバーサイドで使われるプログラミング言語ですが、*JavaScriptは主にクライアント側(端末側)で動く*という点でも異なります。ネーミングが似ているのは、JavaScriptが人気のJavaにあやかりたいとの思いで、Javaを冠したからです。

## JavaScriptを初心者におすすめする理由

**JavaScritは特別やさしい言語というわけではありませんが、初心者の方には習得をおすすめしたい言語**の1つです。以下に*その理由を述べた*ので、参考にしてみてください。

### インストール不要で特に準備するものがない

プログラミングを学ぶ際に、準備すべきものが多いとスタートのハードルが上がってしまいますが、**JavaScriptは学習時に環境構築が不要の言語**です。*普段使っているPCがあれば直ぐにスタートできます。*JavaScriptはブラウザ上で動くスクリプト言語のため、インストールの必要がありません。

PC以外に必要なものは、*普段利用しているEdgeやChromeなどのブラウザと、メモ帳などのテキストエディタだけ*で、改めて環境を作る必要がない点は初心者におすすめです。

### プログラムの結果が目で見て分かる

**JavaScriptは、自分でコーディングしたプログラムの動作が直ぐに確認できます**。「結果がすぐに分かる」というのは仕事や学習のモチベーションに必要です。後ほど実際に演習で確認していただきますが、*視覚的に動作をすぐに確認できるという点は、初心者におすすめできる点です*。

JavaScriptは静的なWebページを動的なページに変える役割がメインですが、実はそれ以外にもさまざまなことができます。**用途が広いという事は、多様な仕事で利用できるということ**です。その*汎用性もおすすめできる点です*。次の章では、JavaScriptでできることを挙げていきます。

JavaScriptの概要や特徴について述べてきましたが、続いて**JavaScriptを使うと何ができるのか**ということについて見ていきましょう。

これは最大の特徴とも言えますが、**JavaScriptは世に知られた言語の中では唯一Webサイトに動きを付けることができます**。静的なWebサイトを作るだけなら、HTMLとCSSで作れますが、*動きのあるWebサイトを作るにはJavaScriptが欠かせません*。また、裏側で*データの処理などを行う場合には「PHP」などが必要*です。

ではここで、**試しにJavaScriptを使って、動きのあるWebページを作ってみましょう**。

初心者でも簡単に作れるものとしてデジタル時計を選んでみました。JavaScritを多少かじった経験のある方は、まず回答を見ずに自身で現在時刻を表示するWebページを作ってみてください。
初めての方は、JavaScriptの簡便さを体験するために、以下の手順を試してみてください。

*HTMLファイルからJavaScriptファイルを呼び出す「外部スクリプト」*という方式で行っています。

*1.以下のコードをメモ帳にコピペし、demo.htmlのファイル名で任意のフォルダに保存します。*

----------------------------------ここから------------------------------

JavaScriptの記事（1ページ目）