カテゴリー

  • プログラミング
  • 英語学習
  • 海外
  • キャリア
  • Kredo
Kredoオンラインキャンプ
スタッフ募集中
Kredoオンラインキャンプ体験談
無料カウンセリングはこちら

セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」

無料カウンセリング予約
  • プログラミング
    • Web・プログラミング(学習)

    • Web・プログラミング(知識)

    • AI・テクノロジー

    • デザイン

  • 英語学習
    • 英語学習法

    • 英語フレーズ

  • 海外
    • 海外移住

    • 海外留学

    • 海外就職

  • キャリア
    • 転職情報

    • キャリアデザイン

  • Kredo
    • ニュース・キャンペーン情報

    • セブ島情報

    • インタビュー

  • 無料ウェビナーに予約する >
5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • プログラミング
  • Web・プログラミング(知識)
  • JavaScriptのインストールは不要?!動かすために知るべきたった1つのこと

JavaScriptのインストールは不要?!動かすために知るべきたった1つのこと

アバター画像
太田 ヨウタ
公開日:2023.03.10
更新日:2023.03.10
Web・プログラミング(知識) |
  • ツイート
  • シェア
  • はてな
  • ポケット
 decoding
少女

JavaScriptが動かない。インストールする必要がある?

少年

JavaScriptの開発環境をインストールしたい

このような疑問・要望をお持ちの方に向けた記事です。

この記事では、JavaScriptを動かすための環境について、次の順番でお話ししていきます。

  • 一般的にJavaScriptのインストールが不要である理由
  • JavaScriptの有効化手順
  • JavaScriptの開発環境について
  • Web上で動作するJavaScriptの開発環境の紹介

JavaScriptのインストール方法を調べている、または、JavaScriptの開発環境について知りたい、というあなたに向けた記事ですので、ぜひご覧ください。

記事のもくじ

  • 一般的にJavaScriptはインストールする必要なし
  • JavaScriptをインストール不要で動かす方法(有効化)
  • JavaScriptの開発環境をインストールする必要がある場合
    • JavaScriptの開発環境とは?
    • WindowsやMacなどのローカル環境
    • サーバー環境
    • スマートフォン環境
  • Web上でもJavaScriptの開発環境を用意できる
    • Runstant
    • Web Maker
    • JSFiddle
  • まとめ:原則JavaScriptはインストール不要

一般的にJavaScriptはインストールする必要なし

はじめに、JavaScriptを動かすだけであれば、インストールは不要です。

なぜなら、JavaScriptはブラウザ上で動作するスクリプト言語であるからです。

JavaScriptはPHPなどと異なり、クライアント側で動作します。

私たちがWebページを見るときに使うブラウザ上で動作するものです。

たとえば、PHPはJavaScriptと同じスクリプト言語ですが、サーバー側で動作します。

そのため、サーバー側でPHPのソースコードを解釈しなければならず、サーバー側にPHPをインストールする必要があります。

しかし、JavaScriptのソースコードは、ブラウザが解釈して実行してくれるため、別途インストールする必要がないのです。

ブラウザで「JavaScriptが無効になっています。」などのメッセージが表示される場合は、次に紹介する手順でJavaScriptを有効化しなければなりません。

パソコンで利用するブラウザだけでなく、スマートフォンで利用するブラウザも該当します。

JavaScriptを動かすために知るべきたった1つのことは「JavaScriptはブラウザさえあれば、別途インストールする必要はない」ということ。

必要なことは、有効化です。

JavaScriptをインストール不要で動かす方法(有効化)

JavaScriptは、ブラウザを利用していれば別途インストールは不要です。

しかし、ブラウザの設定で無効化されている場合は、有効化しなければ動作しません。

ここでは、Google Chromeを使ったJavaScriptの有効化手順を紹介します。

1.右上の「…」ボタンから、「設定」を選択

2.画面左の「詳細設定」から「プライバシーとセキュリティ」を選択

3.「サイトの設定」を選択

4.「Javascript」を選択

5.「許可(推奨)」に変更(クリックする)

 

ほかのブラウザや、スマートフォンでの有効化手順が知りたい方は、こちらの記事をご参照ください。

JavaScriptを有効にする手順をブラウザごとに詳細解説
JavaScriptを有効にする手順をブラウザごとに詳細解説
2023-03-10

JavaScriptの開発環境をインストールする必要がある場合

一般的にJavaScriptはブラウザ上で動作するものです。

しかし、現在では用途が広がっており、IoT開発やスマートフォンアプリ開発でも利用できるようになっています。

ここでは、JavaScriptの開発環境の概要と合わせて、さまざまな開発環境を用意する方法を紹介します。

JavaScriptの開発環境とは?

JavaScriptの開発環境とは、JavaScriptの開発を行うための環境です。

また、開発中のプログラムを実行するための環境でもあります。

いまや、JavaScriptはブラウザ上で動作させるだけでなく、IoT開発やスマートフォンアプリ開発で利用され、サーバー上でも動作させることが可能です。

その場合は、Node.jsと呼ばれるプラットフォームを利用しますが、記述する言語がJavaScriptとなります。

WindowsやMacなどのローカル環境、サーバー環境、スマートフォン環境のそれぞれで開発環境を用意する方法について、一つずつ見ていきましょう。

WindowsやMacなどのローカル環境

ブラウザ上で動作させる一般的なJavaScriptであれば、実行環境はブラウザがあれば十分であり、メモ帳などのテキストエディタで開発可能です。

しかし、より効率的に開発を行うために、エディタと実行環境が同一になっているものも存在します。

それが統合開発環境(IDE)であり、エディタやコンパイラ、デバッガーなどのさまざまなツールがひとまとめになった環境です。

WindowsやMacなどのローカル環境で利用できるIDEについて、いくつか簡単に紹介します。

Visual Studio Code

Visual Studio Codeは、Microsoftから提供されているIDEです。無料で利用可能であり、構文の強調や補完などのエディタとしての機能が充実しています。

拡張機能によってデバッグ機能も追加でき、比較的軽量なエディタであるため、はじめてIDEを利用する方は、一度試してみてはいかがでしょうか。

Eclipse

EclipseはオープンソースのIDEです。

Javaの開発で利用されるイメージが強いEclipseですが、JavaScriptの開発でも利用できます。

JavaScriptの開発を行う場合は、Web Tools Platform(WTP)プラグインを導入しましょう。

基本的には英語表記となりますが、日本語パッケージを導入することで日本語化することが可能です。

Atom

Atomはオープンソースの比較的新しいエディタであり、人気の高いエディタの一つです。

非常に多くのプラグインが公開されており、プラグインを導入することで、IDEとして利用できます。

JavaScript開発用のIDEとするためには、「atom-ide-ui」「atom-ternjs」などのプラグインを導入するとよいでしょう。

サーバー環境

JavaScriptをサーバー環境上で動作させるためには、Node.jsを利用します。

Node.jsは、サーバーサイドJavaScriptとも呼ばれるプラットフォームです。

そもそも、JavaScriptはクライアント側で動作するスクリプト言語ですが、なぜサーバー環境で動作させる必要があるのでしょうか。

その背景には、「クライアント側もサーバー側も同じ言語が使えたほうが楽なのでは?」という思いがあります。

通常、JavaScriptでサーバー側の処理を行うことは難しく、PHPなどを利用します。

しかし、JavaScriptとPHPの2つの言語を習得する必要があり、習得コストが非常にかかることに。

そこで、JavaScriptを使ってサーバー側の処理を行えるNode.jsが注目されているのです。

実際に、MicrosoftやYahoo!などでは、Node.jsの利用が推奨されています。

Node.jsを利用する場合は、Node.jsをインストールしなければなりません。

サーバーだけでなく、WindowsやMacなどのローカル環境でも利用できますので、Node.jsの公式サイトからダウンロードしてご利用ください。

スマートフォン環境

スマートフォンの進化は凄まじく、いまではスマートフォン上でJavaScriptの開発を行うためのアプリも複数公開されています。

スマートフォンでJavaScriptの開発を行うためのアプリについて、いくつか簡単に紹介します。

JavaScript Anywhere JSAnywhere

iOSのみのアプリですが、JavaScriptだけでなく、HTMLやCSSとあわせて開発・実行できる環境が用意されています。

アプリ内のブラウザで実行できるため、すぐに実行状況を確認可能です。

また、作成したプロジェクトは、メールやDropbox経由で書き出すこともできます。

JavaScript Anywhere JSAnywhere

JavaScript Anywhere JSAnywhere
開発元:Tatsuya Tobioka
無料
posted withアプリーチ

Dcoder

JavaScriptだけでなく、PHP・Python・Rubyなどの開発も行えるアプリです。

対応しているプログラミング言語は、2020年2月時点で31言語と非常に豊富。

構文の強調や補完もできるため、スマートフォンで効率的な開発が行えます。

さらに、アプリ内でプログラミング問題も公開されているため、学習にも使えるアプリです。

Dcoder, code compiler IDE

Dcoder, code compiler IDE
開発元:Paprbit INC
無料
posted withアプリーチ

Code Editor by Panic

こちらもiOSのみであり、有料となりますが、非常に高性能でスマートフォン上の開発環境としては、最も使いやすいアプリといえるでしょう。

JavaScriptだけでなく、複数のプログラミング言語に対応しており、外部サーバーと接続することでNode.jsを使った高度な開発も可能です。

Code Editor by Panic

Code Editor by Panic
開発元:Panic, Inc.
¥3,060
posted withアプリーチ

Web上でもJavaScriptの開発環境を用意できる

ここまで、さまざまな環境でインストールして利用できるJavaScriptの開発環境の例を紹介しましたが、実はWeb上でも開発環境は用意できます。

ここでは、開発環境をインストールせずに、Web上でJavaScriptを実行できるサービスを紹介します。

Runstant

Runstantは、ログイン不要で使える国産のWeb開発環境です。

HTML/CSS/JavaScriptのほかにも、MarkdownやTypeScriptなどが利用できます。

Ctrl + Sで保存するとすぐに実行結果が確認でき、簡単な動作検証であれば、ローカル環境にファイルを作成するよりも早く確認できます。

作成したコードは、TwitterやFacebookなどで簡単に共有することも可能です。

Web Maker

Web Makerは、Web上で使える開発環境ですが、オフラインでも利用可能です。

JavaScriptのライブラリも検索するだけで簡単に追加できます。

画面レイアウトも自由に変更することができるため、集中して開発したい場合におすすめです。

コンソール画面も同時に出せるため、デバッグしながら開発を進めることができます。

Google Chromeの拡張アドオンも用意されていますので、一度使ってみてはいかがでしょうか。

JSFiddle

JSFiddleもログイン不要で使えるWeb開発環境です。

JavaScriptのライブラリやフレームワークは、選択式で簡単に利用できます。

記述したコードは簡単に共有することができ、URLを教えるだけで共有可能です。

埋め込み用のコードも生成できるため、ブログなどで公開したい場合は、そちらを利用しましょう。

また、JSFiddleでも、画面レイアウトをいくつか変更することができるため、開発しやすいようにカスタマイズ可能です。

まとめ:原則JavaScriptはインストール不要

JavaScriptを動かすために、知るべきたった1つのこととして、「JavaScriptはブラウザさえあれば、別途インストールする必要はない」ということを覚えておいてください。

JavaScriptはクライアント側で動作するスクリプト言語であるため、ブラウザさえあれば動かすことが可能です。

もし、動かないのであれば、JavaScriptをブラウザで有効化しましょう。

JavaScriptの開発を行うのであれば、ローカル環境の場合は統合開発環境(IDE)を用意すると効率的に開発ができます。

サーバー側で動作させたり、IoT開発、スマートフォンアプリ開発を行いたいのであれば、JavaScriptで記述するNode.jsをインストールしましょう。

今回は、Web上でJavaScriptを動かす方法もご紹介しましたので、興味のある方はぜひ試してみてはいかがでしょうか。

英語でプログラミングが学べるKredoオンラインキャンプ

プログラミング×英語を身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoでは、プログラミング×英語が学べるオンラインスクール「Kredoオンラインキャンプ」を運営中です。プログラミング×英語を身につけた当校の卒業生はグローバルIT企業、外資系企業、海外就職、フリーランスへのキャリアチェンジを実現しています。これからの時代に必要な「英語×IT」のスキルを身につけてグローバルに活躍しませんか?

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
アバター画像
太田 ヨウタ

IT関連企業にてインフラエンジニア(SE)として官公庁や銀行などのシステム更改をメインに約10年従事。基本情報技術者・ネットワークスペシャリスト・情報セキュリティスペシャリストなどの資格も取得。その後、IT・Web専門ライターとして、プログラミング、ネットワーク、セキュリティ、AIなどの解説記事を中心に執筆している。「専門知識を初心者でも理解できるようにわかりやすく書く」ことを心がけている。

関連記事

  •  decoding
    Web・プログラミング(知識)

    CSSの基礎とよく使うプロパティを解説【初心者向け】

  •  decoding
    Web・プログラミング(知識)

    CSSの記号の意味「#」「>」「$」など〜使い方とあわせて完全網羅〜

  •  decoding
    Web・プログラミング(知識)

    Rubyで作られたWebサービス・アプリ12選!Rubyの可能性に迫る

  • プログラミングのイメージ画像
    Web・プログラミング(知識)

    プログラミングって何?初歩的な概要や需要の高い言語を徹底解説

よく読まれている記事

  •  decoding

    【無料オンラインセミナー】インターン型実践プログラムー未経験から7ヶ月で即戦力 グローバルIT人材を目指す方法:3/27(月) 〜 3/29(水), 4/3(月) 〜 4/5(水) 20:30 ~

  •  decoding

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  •  decoding

    【メディア掲載】Kredoオンラインキャンプを紹介していただいた生徒様、企業様の紹介

  •  decoding

    卒業生インタビュー

  •  decoding

    おすすめ記事

IT留学オンライン
新規CTA
@KREDO JAPAN Inc. 2023 All rights reserved.
Kredo オンラインキャンプ なぜ、プログラミング×英語なのか 英語が苦手な方へ 体験談 Webデザインコース Webデベロップコース インターン型実践プログラム IT英語コース カウンセリング予約 資料請求
Kredo ラーニング サービスサイト (準備中) KredoIT 留学 (現在Kredoオンラインキャンプに変更) 運営メディア Kredo Blog
運営会社 会社概要 採用情報 利用規約 プライバシーポリシー 特定商取引に基づく表示 お問い合わせ