JavaScriptを学び始めると、自然に「モダンJavaScript」を学んでいくことになりますが、これまでのJavaScriptと何が違うのか気になる人もいるでしょう。*モダンJavaScriptは、最近のJavaScriptを利用したWeb開発では、一般的に使用されるアプローチやツールの集合体のことです。*

この記事では、モダンJavaScriptの主な特徴を中心に解説していきます。Webエンジニア、Webデザイナーを目指す方、JavaScriprのモダンな書き方を学びたい方はぜひ参考にしてください。

モダンJavaScriptの説明に入る前に、初めにJavaScriptについておさらいしておきましょう。

JavaScriptは、Google ChromeやMicrosoft EdgeなどのWebブラウザ上で動作するプログラミング言語です。**JavaScriptはほとんどのWebサイトで利用されており、次のようなことを実現できます。**

*1.Webサイトに「動き」をつける*
 ユーザのアクションに応じて、ボタンのクリックやキーボード入力などを制御できます。

*2.非同期処理が行える*
 データの非同期読み込みやAPI通信などを効率的に実行できます。（jQueryを導入し、非同期通信技術のAjaxを実装すると行えます。）

*3.サーバーサイドの開発ができる*
Node.jsなどを使ってサーバーサイドのプログラムも書けます。簡単に言えば、JavaScriptは動きのあるダイナミックなWebページを実現するためのプログラム言語であり、ユーザ体験を向上させる上で欠かせない存在と言えます。

【参考】：[JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)
【参考】：[Microsoft Edge について](https://www.microsoft.com/ja-jp/edge?form=MA13FJ)
【参考】：[Google Chrome ｜  Google](https://www.google.com/intl/ja_jp/chrome/)

JavaScriptでできること6選！向いている人や学習方法も解説

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

モダンJavaScriptは、最新のJavaScriptの機能やベストプラクティス全体を指しており、モダンJavaScriptというプログラミング言語が存在するわけではありません。*モダンJavaScriptの主な特徴は次の通りです。個々の詳しい解説は後述します。*

1.仮想DOMを用いるライブラリ/フレームワーク: React、Vue、Angular、Riotなどが含まれる
2.パッケージマネージャー（npm, yarn）を使用: 依存関係の解決やパッケージの管理に役立つ
3.ES2015以降の記法を使う: constやlet、テンプレート文字列、アロー関数などを活用する
4.モジュールバンドラー（Webpackなど）を使用: 複数のファイルを1つにまとめて読み込み速度を向上させる
5.トランスパイラ（Babelなど）を使用: 新しいJavaScriptの記法を古い記法に変換する

これらの要素が含まれているケースをモダンJavaScriptと称します。

【参考】：[モダンJavaScriptチートシート | Modern JS Cheatsheet](https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html)

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

Vue.jsとは？すぐに分かる概要から特長・使い方まで解説！

### なぜモダンJavaScriptを学ぶのか？

なぜJavaScriptではなく、モダンJavaScriptを学ぶ必要があるのでしょうか？次に挙げるように、**現代のWeb開発において欠かせないスキルだからです。**

*■ 1.効率的な開発*
 仮想DOMやモジュールバンドラ、トランスパイラなどのツールを使うことで効率的にコードを書けます。

*■ 2.最新技術への対応*
 ES2015以降の記法を学ぶことで、最新のWeb開発に追従できます。

*■ 3.SPAの基盤*
 モダンJavaScriptはSingle Page Application（SPA）の基本になっています。

*■ 4.依存関係の解決*
 パッケージマネージャが依存関係を解決してくれます。

ここではモダンJavaScriptの特徴と言える最新の機能やベストプラクティスの要素について、もう少し詳しく見ていきましょう。

**仮想DOM（Virtual DOM）は、ブラウザ上でのDOM操作を効率的に行うための仕組みです。**ReactやVue.jsなどのライブラリやフレームワークで使われています。

【参考】：[React](https://react.dev/)
【参考】：[Vue.js - The Progressive JavaScript Framework | Vue.js](https://ja.vuejs.org/)

npmやyarnなどのパッケージマネージャは、JavaScriptのライブラリやモジュールを管理するためのツールです。特定のライブラリやフレームワークを利用していると、それらのバージョン変更がアプリケーションの動作に影響を及ぼすといった依存関係の問題が起きることがあります。

**パッケージマネージャはこうした依存関係の問題を解決してくれます。**

【参考】：[npm](https://www.npmjs.com/)
【参考】：[GitHub - yarnpkg/yarn](https://github.com/yarnpkg/yarn)

ES2015（ES6）以降の記法とは、2015年に公開されたJavaScriptの次期仕様です。ES2015以降の記法を利用することで、**変数宣言（let, const）、クラス構文、アロー関数、分割代入といった新しい記法を使えます。**

【参考】：[ES2015 とは｜GitBook](https://machiiro.github.io/bootcamp/javascript/esnext/01_about.html)

Webpackなどのモジュールバンドラーは、複数のJavaScriptファイルを1つにまとめて読み込み速度を向上させるためのツールです。

複数のファイルを1つにバンドルすることで、読み込み速度を向上させ、パフォーマンスを高めます。モジュールバンドラーを用いることにより、**開発効率の向上と、本番環境でのパフォーマンス向上といった効果を得られます。**

【参考】：[webpack](https://webpack.js.org/)

Babelなどのトランスパイラは、新しいJavaScriptの記法を古い記法に変換する役割を果たします。ES2015以降の記法で書かれたJavaScriptを古いブラウザでも動作可能なコードに変換することで、ブラウザの互換性の問題が解消し、**古いブラウザを意識せずに新しい構文が利用できます。**

【参考】：[Babel ｜Babel](https://babeljs.io/)

モダンJavaScriptは、以上述べた要素を組み合わせ、より効率的でメンテナンス性の高いコードを書くためのアプローチです。

## モダンJavaScriptのメリットとデメリット

モダンJavaScriptの特徴について解説しましたが、*ここではモダンJavaScriptを利用することによるメリットとデメリットについて紹介します。*モダンJavaScriptに対する理解を深めましょう。

モダンJavaScriptは、その特徴によって次のようなメリットが期待できます。デメリットとのバランスよく考慮して、開発を進めることが求められます。

*■ 1.開発のしやすさ*
モダンJavaScriptは、仮想DOMを用いるライブラリやフレームワーク（React、Vue、Angularなど）を活用するため、UXの向上やコンポーネント化による開発効率の向上が期待できます。

【参考】：[Angular 日本語版](https://angular.jp/)

*■ 2.依存関係の解決*
パッケージマネージャー（npmやyarnなど）の利用により、ライブラリやフレームワークの依存関係を自動的に解決します。そのため開発者は依存関係に悩まされることなく、開発に集中できます。また、この機能によって、世界中に公開されているさまざまなパッケージを簡単に利用できます。

*■ 3.効率的にモダンコードが書ける*
主にES2015以降の記法を使用します。constとletで変数宣言、テンプレート文字列、アロー関数などが利用できることで、より効率的でモダンなコードを書くことが可能になります。

*■ 4.モジュールの読み込み速度*
Webpackなどのモジュールバンドラーは、複数のJavaScriptファイルを1つにまとめて読み込んでくれます。そのため読み込みの速度を向上させます。

*■ 5.古い記法を意識せず開発*
ブラウザごとに表示できる記法が異なるため、トランスパイラが必要です。Babelなどのトランスパイラは、新しいJavaScriptの記法を古い記法に変換してくれるため、古い記法を意識せずに開発を行えるため、開発効率が向上します。

### モダンJavaScriptのデメリット

モダンなJavaScriptの開発について知りたい方にとって、モダンJavaScriptは魅力的ですが、いくつかのデメリットも存在します。以下にモダンJavaScriptの主なデメリットを紹介しますので、デメリットを理解した上で利用するようにしましょう。

*■ 1.複雑なDOM操作*
モダンJavaScriptのフレームワークやライブラリでは仮想DOMを使用します。仮想DOMは、HTMLの構造をJavaScriptのオブジェクトとして再現し、リクエストがあった時にブラウザに反映させる手法ですが、逆にコードを複雑化させ、レンダリングコストを高める場合があります。

*■ 2.新しい記法の学習コスト*
ES2015以降の記法にはさまざまな機能が追加されましたが、これらに慣れ、使いこなせるようになるまで時間や学習コストがかかります。例えば、constとletの違いの認識や、テンプレート文字列の使用方法などがあります。

*■ 3.モジュールバンドラとトランスパイラの導入*
モダンJavaScriptの開発では、新たに複数のファイルを一つにまとめるためのモジュールバンドラ（Webpackなど）や新しい記法を古い記法に変換するトランスパイラ（Babelなど）を使用しますが、これらのツールの導入に学習コストが新たに必要になります。

*ここではモダンJavaScriptを本格的に学びたい方に、おすすめの参考書を紹介します。*

既にJavaScriptの基礎を学んだ方は「改訂3版JavaScript本格入門」をおすすめしますが、初学者の方は先に「1冊ですべて身につくJavaScript入門講座」で一通りの基礎を身に付けましょう。

本書は、日本で最も売れているJavaScriptの本の大幅増補改訂版です。ECMAScript 2022に対応し、**最新の基本文法から応用トピックまで詳しく解説しており、モダンJavaScrptの基礎から現場での応用まで広くカバーしています。**

JavaScriptの初学者には難しいと感じる方もいますので、先に初学者向けのJavaScripr参考書で基礎を押さえてから購読することをおすすめします。（参考サイト内で本書のサンプルがダウンロードできます。）

▪著者：山田祥寛
▪出版社：技術評論社
▪ページ数：624ページ 
▪発売日：2023/2/13

【参考】：[改訂3版JavaScript本格入門](https://gihyo.jp/book/2023/978-4-297-13288-0)

### 1冊ですべて身につくJavaScript入門講座 

Webクリエイターとして活動する方や、JavaScriptを学びたい初心者の方におすすめしたい参考書です。サンプルデータはWebサイトからダウンロードできるので、**実際に手を動かしながら最新の技術を学ぶことができます。**

▪著者：Mana
▪出版社：SBクリエイティブ
▪ページ数：344ページ
▪発売日：2023/03/01

【参考】：[ 1冊ですべて身につくJavaScript入門講座](https://www.sbcr.jp/product/4815615758/)

## モダンJavaScriptの習得でエンジニアとして活躍しよう

ここまでモダンJavaScriptについて、JavaScriptの概要、モダンJavaScriptの特徴や利用する理由、メリットとデメリットなどについて解説しました。

JavaScriptは比較的古い言語であり、それゆえの問題点もありますが、**モダンJavaScriptの活用によってさまざまな問題を解決し、開発の生産性をあげることが可能です。**この機会に、モダンJavaScriptを体得し、Web開発にぜひ活かしましょう。

モダンJavaScriptは、現代のJavaScript開発でよく使用されるアプローチやツールの集合体のことです。この記事ではモダンJavaScriptの特徴やメリット、デメリットなどを解説します。モダンJavaScriprを学びたい方はぜひ参考にしてください。

モダンJavaScriptは、最近のJavaScript開発で一般的に使用されるアプローチやツールの集合体のこと

モダンJavaScripには仮想DOMやパッケージマネージャ、 ES2015以降の記法などの新しい技術が付加されている

モダンJavaScriptの活用によって旧来のさまざまな問題を解決し、開発の生産性をあげることが可能である

モダンJavaScriptとは？その特徴、メリットや参考書を紹介

*JavaScriptは、HTMLとともにウェブブラウザで処理できるプログラミング言語として人気があります。*JavaScriptはブラウザのエンジンで処理されるスクリプト言語で、簡単にプログラミングを始めることができます。

プログラミングを進めていくと、機能拡張のたびに小規模なコードもどんどん複雑化し、保全性の確保が重要になります。ここでは、デバッグコードの埋め込みや注釈の記述に用いるコメントアウトについて理解を深めていきましょう。

JavaScriptは、オブジェクト指向のスクリプト言語です。ウェブページにボタン操作などのインタラクティブ性を持たせることができます。非同期処理による並行処理や、マルチスレッド・プログラミングも可能です。*ECMAによって標準化されており、ECMAScriptとして言語仕様が定義されています。*

【参考】：[ECMA: ECMA-262](https://ecma-international.org/publications-and-standards/standards/ecma-262/)

オブジェクト指向言語とは？概念とプログラミング言語をわかりやすく解説！

### そもそもコメントアウトとは

*コメントアウトとは、プログラミングで使用するソースコードにコメント機能を用いて追記することです。*コメント機能で追記した内容は、プログラム処理から除外されます。一般的には注釈をソースコードに入れたり、デバッグコードをコメント化する際に行います。

次の例は、通常のJavaScriptです。デバッグ用にconsole.log()で”Hello World”を表示させています。

```
process.stdin.resume();
process.stdin.setEncoding('utf8');
// コメントアウトしていない状態
console.log("Hello World");```

もしデバッグ用コードが不要になった場合は、コメントアウトによってコメント化することができます。書き方はシンプルでコメントアウトの前に”\/\/”を追加し、コメント化を行うことができます。

```
process.stdin.resume();
process.stdin.setEncoding('utf8');
// コメントアウトした状態
// console.log("Hello World");```

このコメントアウトにより、console.log()は無効化され”Hello World”は表示されなくなります。JavaScriptライブラリのjQueryでも、同様の考え方でコメントアウトが利用できます。

【参考】：[jQuery](https://jquery.com/)

コメントアウトは、コードを無効化したりソースコードに注釈をいれたりすることを指します。JavaScriptにおいても、注釈を入れることで保全性が高まります。

*後日コードを見直したり、プロジェクトメンバーでメンテナンスしたりする場合に、誰がどのような意図で変更したのかがすぐに分かるため、コードの品質を高めることができます。*

統合開発環境（IDE）やエディタでは、コメントアウトを簡素化するためにショートカットキーを設定している場合があります。詳しくは利用中の編集ツールの機能を確認しましょう。

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

### JavaScriptのコメントアウトとコードの保全

JavaScriptのコメントアウトは、ソースコードに保存されています。したがってウェブブラウザに表示しない場合も、ソースコードを表示するとコメント内容が確認できます。*そのためにソースコードの流出が気になる場合は、コードを見せないために別の手を講じる必要があります。*

このソースコードの記載内容を利用者に見せたくない場合は、JavaScriptのコードを分離して、外部ファイルから読み込んだり難読化したりするなどを別途検討する必要があります。

*JavaScriptのコメント機能はいくつかあります。*仕様はECMAScript言語仕様書で定義されています。最新の言語仕様書は、「ECMAScript 2023 Language Specification」です。ここからは、この最新の言語仕様書で定義されている、コメント機能を解説していきます。

【参考】：[ECMAScript® 2023 Language Specification](https://262.ecma-international.org/14.0/?_gl=1*jnya98*_ga*MTIyMjAzNTkwMS4xNzA5NjExMjY5*_ga_TDCK4DWEPP*MTcwOTYxMTI2OS4xLjEuMTcwOTYxMTY1Ni4wLjAuMA..)

*SingleLineComment（シングルライン・コメント機能）とは、1行で記述するコメント機能です。*行単位で”\/\/”を挿入し、それ以降はコメントとして扱われます。使い方はシンプルで、次のように用います。

```// この行はコメントです。
const a = 10; // この行は実行されます。実行ステートメントより右は、コメントです。
// 行単位でコメントを指定します。```

*MultiLineComment（マルチライン・コメント機能）とは、複数行を対象とするコメント機能です。*特定の命令ブロックを囲ったり、長い説明文を追記するのに使用します。”\/\*”でコメントが開始され、”\*\/”でコメントが終了します。

```/* この行はコメントです。
この行もコメントです。
　　：
この行までをコメントと解釈します。*/```

Hashbangとは、UnixやLinuxのシェルスクリプトで用いる手法です。ECMAScript 2023の言語仕様書で正式に追加されました。*スクリプトファイルの先頭行に、”#!”で始まる行を記述するコメント機能です。*

Node.jsなど、V8を使用してサーバーサイドJavaScriptインタープリタを実行する際にパスを指定することができます。同様に処理によって任意のインタープリタを指定することもできます。クライアントJavaScriptでは、単なるコメントと解釈されます。

```#!/v8のパス/v8-shell  // 先頭行のコメントです
// これ以降に実際のコードを記述します```

## JavaScriptの非推奨コメント機能

JavaScriptでは、互換性維持を目的とした非推奨の機能も定義しています。ECMAScriptの付随書であるAnnex Bが該当します。*これらの機能は、互換性維持を目的とするレガシー機能であり、ウェブブラウザ自体に機能を盛り込みますが、JavaScriptのコードにいれることは推奨されません。*

ここでは、メンテナンス知識を高めるために非推奨のコメント機能についても解説していきます。

*HTML-like Commentは、古いバージョンのブラウザでJavaScriptを動作させるための仕様です。*昔のブラウザでは、JavaScriptを解釈できないことから、コメント行として解釈を無効化する必要がありました。その古いブラウザでの動作を保証するために、この機能は引き続き提供されます。

*・SingleLineHTMLOpenComment*
SingleLineHTMLOpenComment（シングルラインHTMLオープンコメント）は、コメントの開始を意味します。”\<!\-\-”を指定します。

*・SingleLineHTMLCloseComment*
SingleLineHTMLCloseComment（シングルラインHTMLクローズコメント）は、コメントの終了を意味します。”\-\-\>”を指定します。

*・使い方*
次のように、JavaScriptのコードをSingleLineHTMLOpenCommentとSingleLineHTMLCloseCommentで挟みます。HTML-like Comment自体は、コメントとして処理され、間に記述した”const a = 10;”と”console.log("Hello World");”はJavaScriptコードとして処理されます。

```<script language="javascript">

</script>```

古いブラウザバージョンでJavaScriptが解釈できない場合も、HTMLのコメントアウトと同等と認識されることから、コード全体がコメントアウトされ解釈から除外されます。このコメント機能は、現在非推奨ですが、互換性維持のために残されています。

## JavaScriptのコメントアウトを活用して保全性を高めよう

JavaScriptは手軽に始められるスクリプト言語で、ウェブブラウザ搭載のエンジンで処理できるため、マルチプラットフォームで動作させることが簡単にできます。ソースコードが大規模化してくると、保全性を高めるためにもコメント機能が欠かせません。

**デバッグコードのコメントアウトや修正箇所の注釈の追加など、メンテナンス性を高めるために積極的に活用しましょう。**

JavaScriptは、1995年に開発されてからウェブベースのアプリケーション開発に欠かせないものになっています。この記事ではJavaScriptを使用したソースコードを保全するために、コメントアウトの考え方や使用方法を解説します。

JavaScriptは、ウェブプログラミングで人気のあるスクリプト言語です

コードのメンテナンス性を高めるために、コメント機能が提供されます

コメント機能はいくつか提供されるため、使い分けながらソースコードを開発します

JavaScriptのコメントアウトとは？考え方や使用方法を解説

## スマホでJavaScriptを有効/無効にする

JavaScriptはHTMLやCSSと並んで、Web技術の重要な要素であり、スマホアプリ開発でもよく使われます。特に動的なWebコンテンツやWebのインタラクティブ性を高める上では欠かせない技術と言えます。例えば、動きのあるバナー広告や写真のスライドなどのページを作成する場合は必須です。

JavaScriptが登場するまでのWebページは動きがなく、電子ブックのような姿をしていましたが、そのWebページがTVのように動きのあるものに変わったのは、JavaScriptによる功績が大きいと言えます。

しかし、一方でJavaScriptが動作することで、パフォーマンス低下やセキュリティリスクといった不都合が起きることもあります。ここでは、そのような不都合を防ぐ方法として、*スマートフォン（以下スマホ）でJavaScriptを有効化、無効化する方法を紹介します。*

【参考】：[JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

**JavaScriptは、Webサイト上で主にWebページに動きをつけるための言語です。**例えば、動きのあるバナー広告や写真のスライドなどのページ作成を可能にします。

JavaScriptが生まれたのは1990年代と古く、当時人気の高かったNetscape Navigatorブラウザ専用に開発され、当初は「LiveScript」という名称でした。その後「JavaScript」と改名され、インターネットの普及やスマホなどの発達に伴って急速に普及していきました。

【参考】：[Learn JavaScript Online - Courses for Beginners - javascript.com](https://www.javascript.com/)

JavaScriptとは？特徴・メリット・何ができるのかを解説

JavaScriptは人気の言語であり、それはJavaScriptの優れた特徴によるものが大きいと言えます。ここでは、**JavaScriptの主な特徴を5つ紹介します。**

*■ ブラウザがあれば動く*
 JavaScriptはブラウザ上で実行されます。ユーザがWebページを閲覧する際に、ブラウザがJavaScriptコードを読み込んで実行するため、特別な環境設定やインストールが不要で、ブラウザさえあればどこでもJavaScriptは動作します。

このJavaScriptの特性によって、Web開発者はクライアントサイドの動的な機能を実装でき、ユーザに対してインタラクティブな体験を提供できます。

*■ Webコンテンツに動きを与えられる*
動きの少ない静的なWebシステムは「HTML」や「CSS」から成り立っていましたが、JavaScriptを組み合わせることで、Webサイトに「動き」が加わり、より高機能なWebサイトの構築が可能になります。これがJavaScriptが好まれる理由の1つです。

*■ 非同期処理が可能*
 JavaScriptには非同期処理の機能が標準で搭載されています。非同期処理とは、1つのタスクの実行中に、他のタスクを同時に実行させる方式のことです。

つまり、同時並行で複数の処理が行えるため、ネットワーク通信やデータの読み込みなどを同時にこなせ、ユーザに待ち時間を意識させることなく、ユーザビリティの向上に寄与します。

*■ サーバサイドの開発も可能*
Webシステムはユーザ側の「フロントエンド」とサーバ側「サーバサイド」の2つの要素で成り立っています。

基本的にJavaScriptはブラウザ上で動作するフロントエンドの開発言語ですが、「Node.js」というプラットフォームを活用することで、JavaScriptでサーバサイドのプログラミングが可能になります。このように、スマホからサーバまで一気通貫のWeb開発ができる便利さは特徴の1つです。

【参考】：[Node.js](https://nodejs.org/en)

*■ ライブラリが豊富*
JavaScriptには、jQueryやReact.js、Node.jsといったライブラリが豊富にあります。またフレームワークも充実しており、これらを利用することで、時間を掛けずに質の高いWebアプリやサーバサイドの開発が行えるのもJavaScriptの特徴です。

【参考】：[jQuery](https://jquery.com/)
【参考】：[React](https://react.dev/)

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

JavaScriptライブラリで何ができる？特徴やメリット・おすすめを解説！

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

## スマホでJavaScriptを使うメリットとデメリット

スマホでJavaScriptを使う（有効化する）メリット、デメリットについて見ていきましょう。JavaScriptの実行を有効にするか、無効にするかは、メリットとデメリットのどちらを重視するかによって判断が分かれます。

JavaScriptはWebアプリケーションの開発では欠かせない言語であり、エンジニアに大変人気の高い言語です。**Webを利用すると以下のようなメリットを得られます。**

*■ 動的なWebコンテンツの実現*
JavaScriptを有効にすると、Webページに動きを加えることができます。例えば、アニメーション、ポップアップウィンドウ、フォームのバリデーション（入力チェック）などが実現できます。

*■ インタラクティブ性の向上*
JavaScriptを使用することで、ユーザとの対話を強化できます。フォームの入力チェックやリアルタイムの検索結果表示などがあります。

*■ ユーザエクスペリエンスの向上*
動的なコンテンツやインタラクティブな要素を追加することで、ユーザ体験が向上します。

以上で挙げたように、エンジニアとユーザの双方にメリットがあるJavaScriptですが、一方で下に挙げるようなデメリットもあります。デメリットが大きいと感じる場合には、JavaScriptの無効化も1つの対策です。

*■ セキュリティリスク*
不適切なJavaScriptコードが含まれており、セキュリティ対策が施されていないデバイスでは、XSS（クロスサイトスクリプティング）などの攻撃を受けるリスクがあります。

*■ パフォーマンスの低下*
JavaScriptはクライアント側（スマホなど）で実行されるため、プログラムの処理が重たい場合にはブラウザの応答が遅くなることがあります。

*■ バッテリー消耗*
JavaScriptが多用されているページを頻繁に閲覧していると、バッテリーの消耗が早まる可能性があります。

その他にJavaScriptを扱う上で注意したいこととして、以下の3つが挙げられます。

①JavaScriptをパソコンのみ、あるいはスマホのみで実行させたい場合は、コーディングの際に動かしたい、動かしたくないデバイスを記述することでコントロールできますので、パソコンやスマホ側でJavaScriptの有効化/無効化を意識する必要はありません。

②スマホ側でJavaScriptを有効にしているのに処理が動かない場合には、ソース側でJavaScriptが無効化されていることがあります。

③Webサイトを閲覧した際に、「JavaScript を有効にしてご利用下さい」といったエラーが表示されることがあります。これはJavaScriptが無効化されているためであり、安全を確認して有効化を行いましょう。

## iPhoneのSafariでJavaScriptを有効化/無効化する

ここから、スマホで有効化/無効化することで、JavaScriptを動かないようにする、あるいは動くようにする方法について紹介します。

スマホは大別すると、Apple社が開発・提供するiPhoneと、Google社が開発したOSを搭載したAndoroidスマホがあります。最初に、*iPhoneの標準ブラウザであるSafariでJavaScriptを有効化/無効化する手順を見ていきましょう。*

### 1. 設定アプリよりSafariアイコン選択

iPhoneのホーム画面で「設定」アプリをタップして開きます。「設定」画面が開いたら、Safariのアイコンを見つけ、開きます。

~~ 【図】：iPhone 設定メニュー　Safariアイコン選択　~~

Safariの画面が開いたら、画面下に進み、「詳細」を見つけてクリックして開きます。

~~ 【図】：iPhoneのSafariのメニューから「詳細」を選択　~~

Safariの「詳細Jページが開いたら、画面下の「JavaScript」右画にある［トグルスイッチ］をタップして操作します。スイッチが緑色の場合はオン状態ですので、JavaScriptが有効になっています。無効にしたい場合には、トグルスイッチを左に動かし、背景がグレーになればオフです。

~~ 【図】：SafariのJavaScript のトグルスイッチの操作画面　~~

## AndroidスマホでChromeのJavaScriptを有効化/無効化する

ここでは、Androidスマホのデフォルトブラウザ、*Google ChromeのJavaScriptの有効化/無効化の手順について見ていきましょう。*

Google Chromeのアイコンをクリックし、開いた最初の画面で、右上隅の「メニュー」（・が縦に3つ並んでいる）アイコンをタップします。表示されたドロップダウンメニューから［設定］をタップします。

~~ 【図】：Androidスマホ Chromeの初画面　~~

Chromeの「設定」画面が表示されたら、画面下にある［サイトの設定］をタップします。

~~ 【図】：Androidスマホ Chromeの設定画面よりサイトの設定を選択　~~

［サイトの設定］画面が開いたら、メニューから［JavaScript］を選択します。［JavaScript］の直下にステイタスが表示されていますが、「許可」と表示されていたら、JavaScriptは有効になっていることを意味します。無効になっている場合は、「ブロック」と表示されています。

~~ 【図】：Androidスマホ Chromeのサイトの設定画面から［JavaScript］を選択　~~

JavaScriptのスイッチ操作画面が表示されたら、右にある［トグルスイッチ］をタップします。スイッチが紺色の場合はオン状態ですので、JavaScriptが有効であり、ステイタス欄には「サイトにJavaScriptの操作を許可する（推奨）」と表示されます。

無効にしたい場合には、トグルスイッチを左に動かし、背景がグレーになればオフとなり、ステイタスは「ブロック」と表示されます。

~~ 【図】：Androidスマホ Chromeの［JavaScript］トグルスイッチの操作画面　~~

## JavaScriptのスマホを活用しよう

ここまで、JavaScriptの特徴、スマホでJavaScriptを使うメリットとデメリット、スマホでJavaScriptを有効化/無効化する手順について紹介しました。JavaScriptは大変優れた言語であり、その利用には様々なメリットがある反面、利用方法によってはデメリットもあります。

常用では、設定を変えずにそのまま利用しても特に問題はありません。*ただし、よく利用するWebサイトの閲覧に支障が生じたり、新手のコンピュータウィルスの出現に対応したりする目的で、JavaScriptの無効化が必要になる場合があります。*

この機会に、実際にJavaScriptの有効化/無効化の操作を行ってみて、ブラウザの動きがどうなるのかを確認しておきましょう。

【JavaScript学習ロードマップ】勉強する上で重要なポイントも紹介

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

JavaScriptのおすすめ開発環境ツール9選！おすすめのエディタや必要な準備も紹介

JavaScriptはWebページに動きをつける言語ですが、スマホで使う場合はどのようなメリットやデメリットがあるのでしょうか。この記事では、JavaScriptの特徴やスマホでの有効化、無効化の手順や方法について解説します。ぜひ参考にしてください。

JavaScriptはブラウザがあれば動き、動的でインタラクティブなWebサイトを実現する人気の言語である

JavaScriptの有効/無効化で、Webの動作を軽くする、セキュリティを高めるといったメリットがある

iPhoneやAndroidでJavaScriptを有効化/無効化の方法や手順が分かる

JavaScriptをスマホで有効化/無効化？意味と方法を解説

*[【マイナビITエージェント】あなたの転職活動を無料でサポートいたします](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=banner&utm_campaign=acv01)*

IT初心者の方がJavaScriptを学んでいる際に「Node.js」という単語を目にすることがあると思いますが、JavaScriptとどういった関係性があるのでしょうか。

Node.jsは2009年にリリースされた実行環境のことですが、具体的にどういう場面で使われるのか分からない方も多いかも知れません。

ここでは、Node.jsとはどういうものなのかを解説します。

### サーバサイドで動くJavaScriptの実行環境

**Node.jsはプログラミング言語ではなく、JavaScriptの実行環境を指します。**Node.jsをインストールすると、JavaScriptをサーバサイドでも使うことが可能です。また、スマホアプリ開発やIoT開発にも利用することができます。

Node.jsを使うことで、フロントエンドとサーバサイドで使う言語をJavaScriptで統一できるため、プログラマーの負担を減らすことが可能です。

プログラマーなどのNode.jsを扱えるITエンジニアの需要は多く、様々な企業が募集をかけています。気になる場合は、求人を確認してみましょう。

<center>[エンジニア転職を成功させるため<br/>ぜひ*『マイナビIT エージェント』*をご活用ください！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)</center>

Node.jsはサーバサイドで動くJavaScriptの実行環境のことですが、ここでは、そもそもサーバサイドやフロントエンドとはどういったものなのか、おさらいしてみましょう。また、ReactやJavaScriptとの違いについてもまとめました。

**サーバサイドとは、Webサイトの裏側の処理を指し、サーバ側で動くプログラムのことです。**Webページはブラウザとサーバが通信を行うことによって表示されます。

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

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

サーバーサイド言語とは？種類や特徴、最近のトレンドも紹介

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

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

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

JavaScriptの記事（2ページ目）