カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

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

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

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

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

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

太田 ヨウタ
太田 ヨウタ
公開日:2020.02.17
更新日:2021.03.05
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット
JavaScriptのインストールは不要?!動かすために知るべきたった1つのこと
少女

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の開発環境をインストールする必要がある場合

一般的に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を動かす方法もご紹介しましたので、興味のある方はぜひ試してみてはいかがでしょうか。

「これからの時代、プログラミングと英語が必要そう…」 それは、間違いではありません。 あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。 そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか? セブ島 IT×英語留学のKredoの「IT留学オンライン」では、プログラミングと英語のスキルをオンライン授業で習得できます!

\プログラミングと英語が同時に身につく!/KredoのIT留学オンラインについて詳しくみる

[広告] Kredo オンラインキャンプなら

新規CTA

コロナ禍でこっそりプログラミング×英語を身につけて仕事獲得しませんか?

当メディアを運営しているKredoでは、プログラミング×英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でも、プログラミング×英語を身につけた卒業生は大企業や人気企業への就職実績も多く、憧れの企業を諦めかけている方にこそ受講して欲しいサービスとなっています。

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

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

関連記事

  • Web・プログラミング

    初心者必見!Pythonの詳しい導入手順を徹底解説【Windows・Mac別】

    2020.10.19
  • Web・プログラミング

    Rubyで開発?Ruby開発に向いているもの&開発に必要なことまで解説

    2020.09.26
  • 【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!
    Web・プログラミング

    【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!

    2020.09.25
  • 【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!
    Web・プログラミング

    【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!

    2020.09.11
kredo it 英語 留学

よく読まれている記事

  • 2021.04.08

    【4/26 (月)〜29 (木) 20:00~ 無料オンラインセミナー】コロナ禍でも準備できる! プログラミング × 英語習得で グローバルキャリアを目指す方法

  • Kredo CEO横田猛夫さん
    2019.06.26

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

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

  • ショッピングを楽しんでいる男女のイメージ画像
    2019.02.12

    海外就職を成功させたい人へ!経験者が教えるメリットとデメリット

  • 熱心にプログラミングを教えるフィリピン人講師と日本人留学生

    【日本語で学んでいる場合じゃない】“英語”でIT・プログラミングを学ぶメリットとは?

IT留学オンライン
kredo 留学

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.