## JavaScriptの勉強に最適な本の選び方

**JavaScriptとは、Webサイトに動きを付けるために使用されるプログラミング言語**を指します。JavaScriptを使ってできることは多く、HTMLやCSSなどと比較すると覚えることが多く、勉強しなければならないことも多いです。

ここでは、JavaScriptの勉強におすすめの本の選び方について詳しく紹介します。　

### 専門用語に対する解説が丁寧である

プログラミング言語やWebデザインを初めて勉強する場合、デザインやITに関する専門用語の知識がほとんどない状態であることが多いでしょう。そのため、専門用語が頻出する本を選んだ場合、専門用語の意味を別途調べなければなりません。

*スキルアップには適していますが、初心者の場合はモチベーションが維持できず、挫折してしまう可能性があります。*

**インターネット上で専門用語を調べることもできますが、本に専門用語の解説が載っている方が正確な知識を身に付けることができる**でしょう。また、JavaScriptには公式リファレンスがあるため、本と同時に公式リファレンスも活用しましょう。

【参考】：[JavaScript公式リファレンス-MDN Web Docs](https://developer.mozilla.org/ja/)

JavaScriptの入門！その概要や文法の基礎について解説！

Web制作に関するコードがテキストのみで記載されていると、知識がない状態では理解するのに時間がかかる場合があり、勉強が思うように進まない恐れがあります。そのため、**実際に操作する画面や、図説、漫画形式などを使っている本がおすすめ**です。

*書店で実際に手に取って確認し、自分のレベルに合う本を選ぶのがベスト*です。ECサイトで本を購入する場合は、本の中身をすべて見ることは難しいです。そのため、サンプルページや概要などをよく確認してから購入しましょう。

表紙やタイトルのみで本を購入すると、自分のレベルに合わず学習を続けるのが難しくなる恐れがあります。

**JavaScriptなどのプログラミング言語を学習する場合に限らず、勉強する本を選ぶ際は出版日が比較的新しいものを選びましょう。**特にIT業界では技術の発展が早いため、出版日が古い本だと現状ではあまり使用されていない技術が記載されていることもあります。

*最新技術が記載されている本を選んでください。*またJavaScriptを勉強する場合、前提知識としてHTML・CSSの知識が必要です。HTMLやCSSを学習する場合、最新のバージョンはHTML Living StandardとCSS3であるため、これらが含まれている本を選びましょう。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

**プログラミング言語を学ぶ際は、実際に手を動かして学習するのがおすすめ**です。そのため、本とPCを用意して勉強を進めると効率的に学べます。

*サンプルコードが記載されていたらPCを利用して打ち込み、実際の挙動を確認すると知識が定着しやすい*です。またサンプルコードの一部に、自分なりのアレンジを加えるとより知識が深まります。

### 自分のレベルに合った本を選ぶ

**自分の知識レベルに合った内容の本を選ぶことが大切**です。初心者の方の場合、専門用語や難しい演習問題などがあると理解が難しく、挫折する恐れがあります。専門用語を丁寧に解説している、図解が豊富にあるなどといった初心者向けの本を選びましょう。

中級〜上級者の方は、基本的な内容よりも応用的な内容に踏み込んだ本がおすすめです。*業務の内容や今後身に付けたいスキルに合わせて選ぶと良い*でしょう。また、演習問題があれば自分の理解度を測ることができます。

## JavaScriptの学習におすすめの本

ここでは、JavaScriptを勉強するのにおすすめの本を15冊紹介します。以下で紹介する本はすべて2019年～2022年に発売されたもので、比較的新しい本を厳選して紹介しています。

**JavaScriptの基礎から実用的な知識までを網羅**しています。JavaScriptの仕様や通信処理についての解説に加え、Webページを実際に作成できる演習も含まれています。基礎を学んでから開発作業という流れになっているため、体系的に学ぶことができます。

▪著者：柳井 政和
▪ページ数：568ページ
▪出版社：SBクリエイティブ
▪発売日：2021/02/05

【参考】：[JavaScript[完全]入門](https://www.sbcr.jp/product/4815607630/)

### 図解！ JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編

本書はJavaScript未経験者や初心者の方向けに、厳選された基本的な文法が解説されています。**基本文法を使ってブラックジャックのゲームを作成する中で、文法の使いどころやつまずきやすいポイントを確認**できます。

また、JavaScriptとは何か、JavaScriptを使ってできることなどが冒頭で説明されているため、JavaScriptの基礎知識がない方でも取り組みやすいでしょう。*挫折しにくい工夫がされており、楽しくJavaScriptを学べる*ようになっています。

▪著者：中田 亨
▪ページ数：320ページ
▪出版社：秀和システム
▪発売日：2021/03/24

【参考】：[図解！ JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編](https://www.shuwasystem.co.jp/book/9784798063867.html)

JavaScriptでゲーム開発はできる？メリットとおすすめのライブラリ6選

### つくって楽しいJavaScript入門 身近な不思議をプログラミングしてみよう

本書は**自然や生き物のしくみをテーマにしたプログラミングからJavaScriptを学ぶという、楽しく学べる工夫がされた入門書**です。雪の結晶ができるしくみや感染症が流行するしくみなど、身近なテーマに沿ったプログラミングが例となっています。

*JavaScriptの基礎だけでなくプログラミングの基礎についても解説されているため、プログラミング初心者の方でもわかりやすい*でしょう。キャラクター付きのガイドや、雑学、豆知識も掲載されており、楽しみながらJavaScriptを学べます。

▪著者：スペースタイム 柳田 拓人 著、サイエンス&プログラミング教室 ラッコラ 監修
▪ページ数：256ページ
▪出版社：翔泳社
▪発売日：2021/11/10

【参考】：[つくって楽しいJavaScript入門 身近な不思議をプログラミングしてみよう](https://www.shoeisha.co.jp/book/detail/9784798168326)

**ゲームの開発を通じて楽しくJavaScriptを学ぶことができます。**ゲームには占い、数当て、マインスイーパー、落ちものパズルなどがあります。基本的な文法の解説に加え、質の高いプログラミングの方法やつまずきやすいポイントも詳しく解説されています。

また*HTMLとCSSとの連携についても解説*されており、HTMLとCSSの記述方法を学ぶことも可能です。学生向けとなっていますが、今後JavaScriptを使った仕事をしたいといった初心者の方にもおすすめです。

▪著者：重定 如彦
▪ページ数：344ページ
▪出版社：東京電機大学出版局
▪発売日：2022/03/20

【参考】：[学生のためのJavaScript](https://www.tdupress.jp/book/b600190.html)

本書では、JavaScriptでのプログラミングに必要な基礎知識を学べます。サンプルプログラムを用いてJavaScriptの概念、機能、文法、プログラムの書き方が説明されており、**JavaScriptの基礎を習得したい方におすすめ**です。

また、解説を読む、例題を解く、理解度をチェックするという3つのステップによって、プログラミング初心者の方でも理解しやすくなっています。*つまずきやすいポイントも丁寧に解説されており、図解も豊富で読みやすい*1冊です。

▪著者：CodeMafia 外村 将大
▪ページ数：576ページ
▪出版社：翔泳社
▪発売日：2021/11/15

【参考】：[独習JavaScript 新版](https://www.shoeisha.co.jp/book/detail/9784798160276)

### Colaboratoryでやさしく学ぶJavaScript入門

**JavaScriptの基本から解説されており、プログラミングが初めての方でもわかりやすい内容**となっています。まずは基本文法について学び、次に関数やオブジェクトの知識を身に付け、チャートやグラフの作成方法といった流れで学べます。

ビジネスで実用可能なサンプルも多く紹介されており、マップ上の描画、組織図やガントチャートの作成方法などがわかりやすく解説されています。JavaScript自体を学びたい方はもちろん、*仕事で繰り返し発生する作業の効率化を図りたい方にもおすすめ*です。

▪著者：掌田 津耶乃
▪ページ数：288ページ
▪出版社：マイナビブックス
▪発売日：2022/02/28

【参考】：[Colaboratoryでやさしく学ぶJavaScript入門](https://book.mynavi.jp/ec/products/detail/id=128345)

### 解きながら学ぶ JavaScriptつみあげトレーニングブック

本書はJavaScript初心者の方でもわかりやすいよう、文法の基礎を丁寧に解説しています。また、エラーやドキュメントの読み方の解説もあるため、**公式ドキュメントの解説から知識を得るスキルや、エラーメッセージから自力で解決方法を見つけるスキルが身に付きます。**

初心者の方だけではなく、*JavaScripをある程度理解しているが細かい部分に不安がある方や、実務で使えるようになりたい方にもおすすめ*です。

▪著者：リブロワークス
▪ページ数：248ページ
▪出版社：マイナビブックス
▪発売日：2021/12/23

【参考】：[解きながら学ぶ JavaScriptつみあげトレーニングブック](https://book.mynavi.jp/ec/products/detail/id=126984)

### ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

入門者向けの本で基本的な知識を学んだあと、より高度で応用的な知識を学びたい方におすすめの本です。**バグが出にくいコードの書き方や、押さえておくべきJavaScriptの言語特性などが紹介**されています。

最後に総合演習として、クイズの表示、正解率の集計、解答の制限時間の設定などが用意されています。*総合演習ではJavaScriptの理解度を確かめることができ、足りない知識や苦手な部分を確認できます。*

▪著者：サークルアラウンド株式会社、佐藤 正志、小笠原 寛
▪ページ数：304ページ
▪出版社：翔泳社
▪発売日：2022/01/14

【参考】：[ステップアップJavaScript フロントエンド開発の初級から中級へ進むために](https://www.shoeisha.co.jp/book/detail/9784798169835)

### JavaScript Primer 迷わないための入門書

本書は**ECMAScript 2015以降の比較的新しい書き方を中心とした入門書**です。既存のコードに頻出する古い書き方の解説もあり、JavaScriptのより実用的な使い方を学べます。基本となる文法や機能から、開発現場での活用方法まで解説されています。

また、*開発現場で発生したトラブルを自力で解決できるような具体策についても記載*されています。変化のスピードが早いJavaScriptに対応する方法にも焦点を当てており、実務で役に立つ知識を学べます。

▪著者：azu、Suguru Inatomi
▪ページ数：480ページ
▪出版社：KADOKAWA
▪発売日：2020/04/27

【参考】：[JavaScript Primer 迷わないための入門書](https://www.kadokawa.co.jp/product/302003000984/)

本書では、Chrome DevToolsのコンソールを使ってJavaScriptの基本を学びます。**実際にコマンドを入力して動作を確認しながら学べるため、知識のインプットとアウトプットが同時にできて効率よく学べます。**

また、*コードの設計思想やプログラムの動きの仕組みといった内容も解説*されており、基礎から深い内容まで幅広く学べるでしょう。本書を読むことで、仕事内容に応じてJavaScriptの必要な知識を自ら調べることができるようになります。

▪著者：あんどう やすし
▪ページ数：740ページ
▪出版社：O'Reilly Japan
▪発売日：2020/11/17

【参考】：[ハンズオンJavaScript](https://www.oreilly.co.jp/books/9784873119229/)

本書は、**JavaScriptの言語仕様であるECMAScript、ブラウザに文字や画像を表示する仕組み、ブラウザとプログラムをつなぐAPI、DOM、アニメーション表現などの技術を体系的に学べます。**

また、各章の冒頭で達成目標や学習のポイント、学習の流れを把握できるようになっており、今何を学んでいるかを確認しながら読み進めることができます。章末には*練習問題や達成目標のチェックシートがあり、理解度を客観的に確認*できます。

▪著者：境 祐司
▪ページ数：295ページ
▪出版社：SCC Books
▪発売日：2019/11/29

【参考】：[新しいJavaScriptの教科書](https://www.scc-kk.co.jp/scc-books/b-414.html)

本書は**JavaScriptの内容を網羅的に解説**しています。サンプルコードを用いた基本構文や機能の解説といった基礎知識の部分から、JavaScript標準ライブラリについての詳しい解説といった応用的な部分まで幅広く解説されています。

Node.jsで使われるサーバーサイドJavaScriptや、ツール、言語拡張機能、JavaScript特有の複雑な仕様などについても学ぶことができます。*JavaScriptの使い方をマスターしたい方におすすめ*です。

▪著者：David Flanagan（訳：村上 列）
▪ページ数：784ページ
▪出版社：O'Reilly Japan
▪発売日：2021/12/02

【参考】：[JavaScript 第7版](https://www.oreilly.co.jp/books/9784873119700/)

### プロフェッショナルWebプログラミング　JavaScript

本書は、**フロントエンドの技術の土台となるJavaScriptを確実に理解することで、流行や変化に対応できる力を身に付けることを目的**としています。Webページを動作させるという用途に限定し、シンプルなコードを用いてJavaScriptの仕様を丁寧に解説しています。

サンプルコードはダウンロード可能で、実際にブラウザで動作を確認しながら学べます。*実務経験や知識が少ない方でも、わからないところを自分で調べてJavaScriptを使いこなせるスキルが習得できる*でしょう。

▪著者：柳井 政和
▪ページ数：ページ
▪出版社：株式会社エムディエヌコーポレーション
▪発売日：2021/04/23

【参考】：[プロフェッショナルWebプログラミング　JavaScript](https://books.mdn.co.jp/books/3220303042/)

### JavaScriptでいきなり機械学習を遊び倒す本

本書は、**JavaScriptを使って機械学習を活用したWebアプリを開発できるようになることを目的**としています。初心者の方向けとなっており、JavaScriptの基本的な構文や機械学習についてわかりやすく解説されています。

基本構文とマウス操作で手軽に機械学習モデルを構築する方法や、Webアプリを開発する方法がチュートリアル方式で解説されています。*機械学習とJavaScriptを学びたい方におすすめ*です。

▪著者：まさとらん
▪ページ数：96ページ
▪出版社：インプレスR&D
▪発売日：2020/10/23

【参考】：[JavaScriptでいきなり機械学習を遊び倒す本](https://nextpublishing.jp/book/12404.html)

Pythonと機械学習を学んでAI時代に対応できるエンジニアに

### モダンJavaScriptの基本から始める　React実践の教科書

JavaScriptの基礎からTypeScriptの実践的な内容まで詳しく解説されています。内容は、**実際の開発現場のシチュエーションがストーリー風になっています。**そのため、初心者の方でも比較的実務での状況がイメージしやすいでしょう。

JavaScriptとは、主にWebサイトに動きを付けるために使用されるプログラミング言語です。当記事では、JavaScriptの勉強におすすめの本15選を紹介します。また、最適な本の選び方・学習する上での重要なポイントも解説しますので、参考にしてください。

JavaScriptとは、主にWebサイトに動きを付けるために使用されるプログラミング言語

JavaScriptを勉強するのにおすすめの本は、専門用語の丁寧な解説がある、図説が多い本

本で知識をインプットするだけではなく、実際に手を動かしながら学んだ知識をアウトプットすることが重要

JavaScriptの本おすすめ15選！選び方や勉強方法は？

比較的新しいプログラミング言語であるTypeScriptですが、JavaやPythonなどと比較すると認知度はそこまで高くありません。しかし、**TypeScriptは大規模開発ができるように実装され、Google社の開発に採用されるなど、世界的に注目を集めています。**ここでは、TypeScriptの概要について詳しく紹介します。

TypeScriptとは、**JavaScriptを拡張して実装されたオープンソースのプログラミング言語のことです。**2012年頃にマイクロソフト社によって開発され、2017年2月に正式にリリースが行われました。

TypeScriptが開発された理由には、JavaScriptのプログラミング言語を利用して大規模アプリを開発する際に、JavaScriptの複雑なソースコードを扱わなければならないため、独自のツールが必要となったことが挙げられます。

TypeScriptは、JavaScriptのデメリットである使いにくさを解消し、エラーやバグなどのトラブルが発生しにくいプログラミング言語として開発されました。

JavaScriptとは？人気のJavaScriptを5分で学ぶ

TypeScriptとJavaScriptの違いについて気になる方も少なくないでしょう。TypeScriptは、JavaScriptが発展したような特徴があるプログラミング言語です。ここでは、TypeScriptとJavaScriptの違いをピックアップしてまとめました。

**JavaScriptは動的型付け言語であり、TypeScriptは静的型付け言語であるという違いがあります。**これは変数に関するデータ型の違いです。

データ型とはプログラムで使用されるデータの種類を指し、JavaScriptのソースコードでは、プログラムを実行する際にデータ型が自動的に定められます。この特徴をもつプログラム言語は動的型付け言語と呼ばれます。

ソースコードをシンプルに記述できるメリットがありますが、プログラムを実行してみないとエラーやバグがわからないデメリットもあります。他の動的型付け言語の代表例として、RubyやPythonなどが挙げられます。

一方TypeScriptでは、変数のデータ型を実行前に指定することが可能です。

この特徴をもつプログラミング言語は、静的型付け言語と呼ばれます。コンパイルする必要があり手間がかかるというデメリットがありますが、コンパイルを実施する時にエラーやバグが発見できるというメリットもあります。

そのため、大規模システム開発などに向いている言語とも言えるでしょう。他の静的型付け言語の代表例として、C言語やJavaなどが挙げられます。

Javaとは？人気プログラミング言語Javaの将来性やメリットについて解説

### JavaScriptと同じ構文を使える

TypeScriptではJavaScriptと同様の構文を使用することができます。これまでにも説明しましたが、TypeScriptはJavaScriptの機能を拡張して開発されているため、JavaScriptの構文が使用可能です。

TypeScript入門編として利用する際に覚えておくポイント

TypeScriptを使用する上でどのようなメリットがあるのでしょうか。ここでは、TypeScriptのメリットについてまとめました。

TypeScriptはオブジェクト指向型言語として開発されているため、JavaScriptと比較するとソースコードをシンプルに記述しやすいメリットがあります。生成したクラス単位で関数を管理することによって、複数人で開発を行う場合でも、開発効率の向上やコーディングの統一化が期待できます。

TypeScriptはJavaScriptを発展させて開発されたため、**JavaScriptとの互換性が高く、JavaScriptの開発環境や実行環境があれば、TypeScriptを簡単に導入することが可能です。**

また、JavaScriptで作成したソースコードファイルをTypeScriptから呼び出したり、JavaScriptのライブラリやフレームワークをTypeScriptで使用できたりします。

### エラーやバグを未然に防止できる

TypeScriptは静的型付け言語であるため、変数のデータ型をソースコード内で宣言することができます。**データ型と値が一致しない場合には、コンパイルする際にエラーが発生するため、リリースする前にエラーやバグを未然に防止することが可能です。**

また、JavaScriptでは「undefined」が発生しやすく、実行する際のエラーの要因によくなります。「undefined」とは、「定義されていない」を意味します。

一方TypeScriptでは、コンパイラオプションを使用することで、「null」 や 「undefined」の可能性がある変数を確認し、ソースコードの問題点を発見しやすくなっています。

### JavaScriptの知識があれば理解しやすい

TypeScriptは、JavaScriptを元に機能の拡張を行っています。JavaScriptと文法や仕様が似ているため、**JavaScriptのプログラミングスキルを既に身に付けている人であれば、TypeScriptは理解しやすいプログラミング言語と言えるでしょう。**

また、TypeScriptのライブラリやフレームワークを使用する際には、JavaScriptの知識があるとスムーズに扱いやすくなります。このように、JavaScriptの知識やスキルがあると、TypeScriptのスキルも素早く身に付けることができるでしょう。

TypeScriptはJavaScriptの上位互換？違いは開発規模や機能面にアリ

TypeScriptはメリットの多いプログラミング言語ですが、もちろんデメリットもあります。ここでは、TypeScriptのデメリットについて詳しく紹介します。

### TypeScriptを使用している人口が少ない

現状では、**TypeScriptを使用する人よりもJavaScriptを使用する人の方が多い傾向にあります。**実際にTypeScriptの方が便利だとしても、TypeScriptを使用できる人がいなければ、開発で利用されることは少ないでしょう。

TypeScriptの機能面には多くのメリットがあるため、今後はTypeScriptを使いこなせる人材は増加していくのが予想されますが、JavaScriptを使いこなせる人材の数を上回るにはまだまだ時間がかかると考えられます。

### インターネットなどの情報が少ない

*TypeScriptは比較的新しくできたプログラミング言語であるため、インターネットなどで調べても情報が他のプログラミング言語と比較して少なめです。*また、TypeScriptを学習するにあたって、他の言語と比較すると日本語で読める記事が不十分であることもデメリットと言えるでしょう。

例えば、TypeScriptを使用して開発を進めていくとエラーが発生することがありますが、そういった時に調べても情報が少ないと問題解決に多くの労力が必要です。プログラミング初心者の方であれば、まずはJavaScriptから勉強を始めた方が良いかもしれません。

*TypeScriptでソースコードを記述する場合、データ型の設定といった新しい知識を身に付けるための学習コストが必要です。*TypeScriptはJavaScriptと文法や仕様が似ているため、JavaScriptのプログラムそのままで動作することもあります。

一方、TypeScriptで記述したプログラムが動作しないことも少なくありません。そのためTypeScriptをゼロから勉強する方にとっては、JavaScript以上に学習コストがかかる可能性もあります。

TypeScriptのおすすめ本をレベル別に紹介！学習方法も解説

## 関係性の深いJavaScriptのフレームワークやライブラリ

TypeScriptではJavaScriptのフレームワークを使用することができます。ここでは、TypeScriptと関係性の深いJavaScriptのフレームワーク「React」「AngularJS」「Vue.js」について紹介します。

ReactとはFacebookが開発したJavaScriptのライブラリであり、主にUIに関する機能を提供しています。テキストボックスの配置を変更したりボタンのデザインを変えたり、**Reactを使用することでWebアプリなどの見た目の細かい部分を調整できるため、ユーザーにとって使いやすい仕様に仕上げることが可能です。**

よくフレームワークと誤解されますが、公式サイトにもあるように本来はライブラリです。その理由は、Reactには多くの機能が備わっていますが、基本的にUI設計に限定したものとなっているため、フレームワークではなくライブラリに分類されます。

特に推奨はされていませんが、拡張機能を利用することでTypeScriptでも使用可能です。

【参考】：[React](https://ja.reactjs.org/)

Reactの将来性はVue超え？できることやメリット・デメリットも解説

AngularJSは2009年にGoogleによって開発された、TypeScriptでの開発を推奨されているJavaScriptのフレームワークです。Webアプリ開発に必要な機能を一通り提供しているため、他のライブラリを使用せずともAngularJSで全てまかなえることがあります。

Reactと比較すると学習コストはやや高めですが、使い勝手の良いフレームワークの1つです。

【参考】：[AngularJS](https://angularjs.org/)

JavaScriptに関するフレームワークについて徹底解説！

Vue.jsは、AngularJSを参考にして作られたJavaScriptのライブラリです。Reactと比較すると機能が限定されている分学習コストが低く、Webアプリ開発経験者であれば比較的習得しやすいライブラリです。

**他のライブラリと組み合わせがしやすい特徴があり、機能が少ない分、大規模開発よりも小規模開発に向いています。**Vue3.0はTypeScriptで記述されているため、拡張機能を使用しなくてもTypeScriptを使用できます。

【参考】：[Vue.js](https://jp.vuejs.org/index.html)

## TypeScriptはJavaScriptを発展させて開発されたプログラミング言語！

これまでに、TypeScriptの概要やJavaScriptとの違い、TypeScriptのメリット・デメリットについて解説しました。TypeScriptとは、JavaScriptを拡張して実装されたオープンソースのプログラミング言語のことです。TypeScriptは静的型付け言語で、JavaScriptは動的型付け言語という違いがあります。

TypeScriptのメリットは、コードがシンプル・JavaScriptとの互換性が高い・エラーやバグを未然に防げるなどが挙げられます。一方デメリットは、開発者人口の少なさや学習コストが高いことなどが挙げられます。**プログラミング初心者であれば、まずはJavaScriptから勉強してみるのがおすすめです。**

TypeScriptとは、JavaScriptを発展させて開発されたプログラミング言語を指します。当記事では、TypeScriptの概要やTypeScriptとJavaScriptの違い、TypeScriptのメリット・デメリットについて解説します。

TypeScriptは静的型付け言語で、JavaScriptは動的型付け言語という違いがある

TypeScriptのメリットは、コードがシンプル・プログラムの処理速度が速い・エラーやバグを未然に防げるなどがある

TypeScriptのデメリットは、開発者の人口が少ないこと・学習コストが高いことなどがある

TypeScriptとは？JavaScriptとの違いも解説！

*Node.jsとは、JavaScriptの実行環境の一つです。*

本来、JavaScriptはフロントエンド言語です。Webページ上の要素にアクセスし、ユーザの操作をトリガーとしたHTML要素の動きを実現できます。「このボタンをホバーしたら、クリックしやすいようにボタンが大きくなる」等の動きがこれに当たります。

**更にNode.js環境を用意することで、JavaScriptにバックエンドの処理も行わせることができます。**例えば、サーバに配置されたファイルの読み書きやDBとのアクセスがJavaScriptで出来るようになります。

【参考】：[公式-Node.jsとは](https://nodejs.org/ja/about/)

*「JavaScriptは書いたことあるけど、Node.jsで何が出来るのか分からない」*

*「チーム開発でNode.jsを使うことになったけど、何からやればいいか分からない」*

*「Node.jsを自走して学習していきたいが、どうやればいいか分からない」*

Node.jsで実現出来ることをお話した後に、実際にNode.jsを使うための手順、自走して学習していく方法を解説します。

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

ここでは、Node.jsを使うと我々エンジニアは何を実現出来るのかについて解説します。

*・単体でWebアプリケーションを作ることができる*

**Node.jsはWEBサーバとしての役割も担います。**つまり、nginxのような通常WEBサーバとして用いられるソフトウェアを使うことなく、Node.jsだけでサーバを起動しHTTP通信を行うことができます。

また、Node.jsを用いることでブラウザ上でのHTML操作だけでなく、DBとのデータ連携が可能になることをすでに述べました。このことから、Node.js環境でWEBアプリケーションを作成することができます。

*・モバイルアプリケーションが作れる*

**Node.jsを導入することで、スマホアプリ開発用フレームワークであるReact Nativeを動作させることができます。**React Nativeの開発言語はJavaScriptであるため、動作させるにはJavaScriptの実行環境であるNode.jsが必要です。

React Native入門！将来性やアプリ開発環境について解説

*・新仕様のJavaScriptを古いブラウザでも動作させられる*

JavaScriptはアップデートが年々行われている言語であり、そのためバージョンによってはコードの記述方法が一部異なる場合があります。特に、JavaScriptのバージョン「ES2015」以降はオブジェクト指向での記述が可能になったりと、大幅な仕様変更がありました。

バージョンアップによって、古いブラウザ（Internet Explorer11など）がその仕様に適応できない場合があります。

これを防ぎ、バージョンアップしたJavaScriptと古いブラウザの互換性を保証するためにJavaScriptコードの変換を行う必要があります。**これを実現するツールのうち代表的なものに「Babel」があり、その動作環境としてNode.jsがよく選択されています。**

*・最新のフロントエンド技術を導入できる*

**フロントエンドの技術として、TypeScriptやReact、Vue.jsといった言葉を聞いたことはあるでしょうか。これらを導入する際の実行環境としてNode.jsはよく選択されています。**

選択されている理由として、上記で挙げた技術では、ブラウザ上でのDOM操作だけではなく、ソースコードのコンパイルやファイルインストールといったサーバサイド処理が必要になってくることが挙げられます。そのため、JavaScriptをサーバサイドでも扱えるNode.jsが実行環境として適しているのです。

MacOS環境でのNode.jsインストール方法をこちらで解説します。以下ではHomebrewを用いてインストールを進めていきます。

**nodenvとは、Node.jsのパッケージ管理ツールです。**複数プロジェクトで異なるバージョンのNode.jsを利用したい場合に重宝します。

ターミナルを開いて、下記3つのコマンドを順番に実行して下さい。

curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash

*それぞれ、「nodenvをインストールする」「パスを通す」「nodenvがインストールできているか確認する」を意味するコマンドです。*

3つめのコマンドに対して下記の表示があれば、正しくnodenvがインストールできています。

下記の2コマンドを順に実行します。{バージョン番号}には、インストールしたいNode.jsのバージョンを記載します。

インストールしたnodeのバージョンが2つめのコマンドで表示されれば、無事にNode.jsがインストールできています。

さらにnodenvでは、ディレクトリごとに使うNode.jsのバージョンを指定できます。プロジェクトで利用したいディレクトリ配下に移動して、下記の2コマンドを実行してください。

インストールしたいバージョンが表示されれば、インストール完了です。

## ローカルでWebアプリを立ち上げるまで

ここまでで、ローカルPCにNode.jsをインストールすることができました。では、実際に簡単なWEBアプリを作成してみましょう。

Node.jsはJavaScriptの実行環境を指し、JavaScriptでサーバサイド処理を行うことが可能です。ReactやVue.jsなど、最新のフロント技術の導入時にはよく選択される環境なので、将来性は高いです。この機会に是非習得することをお勧めします。

Node.jsはJavaScriptの実行環境であり、サーバサイド処理を行うことが可能です。

Node.js環境では、WEBアプリ開発はもちろん、スマホアプリ開発が可能になります。

Node.jsを学習し続けるには、公式サイトを初め、ProgateやUdemyといった学習サイトが有効です。

Node.js入門！メリットやインストール方法・学習方法を解説

## HTML、JavaScript、Javaのおさらい

*Web開発で挙げられる言語に、HTML・JavaScript・Javaがあります*が、これらの間にはどのような関係性があるのかご存知でしょうか。HTMLとJavaScriptに関しては、馴染みのある方もいらっしゃると思いますが、Javaはどうでしょうか。

この記事では、**HTMLをベースにJavaScriptやJavaをどのように連携させていくかを説明していきます**。関係性を見ていく前に、まずは上記3つの言語について基礎をおさらいしていきましょう。

HTMLとは、Webページを作成するために開発された言語です。*通常のプログラミング言語と異なり、文章構造や視覚表現を記述することのできるマークアップ言語*です。世の中のWebサイトのほとんどがこのHTMLで記述されており、視覚的かつ直感的にコードを書くことが可能となっています。2014年にリリースされたHTML5が今でも最新バージョンとなっており、動画や音声の埋め込みが容易になりました。

HTMLはWebページの土台とも言える役割を持ち、その中でJavaScriptを呼ぶことによって動的なコンテンツを実装することも可能です。**HTMLにとって、JavaScriptは単独では実現できない動きを実現できる拡張機能のようなものということができます**。

HTMLとは？今さら人に聞けないその概略や役割を解説！

JavaScriptは、オブジェクト指向なインタプリタ型のプログラミング言語です。コンパイルを不要とすることから、クライアント側のブラウザ上でプログラムを動作させることが可能です。主にWebサイト上に動きを付ける目的で利用されています。*記述内容が似ているもののJavaとは別物の言語であり、用途や目的も大きく異なります*。

JavaScriptの記事（2ページ目）