カテゴリー

  • 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の開発環境を構築する方法まとめ

【初心者向け】JavaScriptの開発環境を構築する方法まとめ

Kredo編集部
Kredo編集部
公開日:2020.02.19
更新日:2021.03.04
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット

JavaScriptはweb制作に使用できるプログラミング言語で「web制作の仕事をしたい!」と思っている方であれば、学習必須の言語です。

JavaScriptの基本的な事柄について学んだのであれば「そろそろ実際にJavaScriptのコードを書いてみたい」と思っている方もいるのではないでしょうか。

JavaScriptのコードを書くためには、あらかじめ開発環境を構築することが必要です。

今回は、JavaScriptの開発環境を構築する方法を解説します。

JavaScriptのプログラミングに必要なエディタも紹介するので、準備を整えた上でJavaScriptの開発にチャレンジしてみてください!

記事のもくじ

  • JavaScriptの開発環境構築&実行方法
    • 開発環境構築&実行方法1.オフライン上
    • 開発環境構築&実行方法2.オンライン上
    • 開発環境構築&実行方法3.スマートフォン上
  • JavaScriptを開発するなら統合開発環境(IDE)がおすすめ
    • 統合開発環境(IDE)がおすすめな理由
  • JavaScriptの開発のためのおすすめエディタ
    • おすすめエディタ1.Visual Studio Code
    • おすすめエディタ2.Eclipse
    • おすすめエディタ3.Atom
  • まとめ:JavaScriptの開発にチャレンジ!

JavaScriptの開発環境構築&実行方法

JavaScriptの開発環境または実行方法は、主に以下の3パターンです。

【JavaScriptの開発環境構築&実行方法】
  1. オフライン上で構築&実行
  2. オンライン上で構築&実行
  3. スマートフォン上で構築&実行

それぞれのやり方やメリットについて見ていきましょう。

開発環境構築&実行方法1.オフライン上

少年

セキュリティ面を気にすることなくJavaScriptを開発&実行したい

少女

Wi-Fiが使えないところでもJavaScriptのプログラミングをしたい

このように思っている方であれば、オフライン上でJavaScriptの開発環境構築&実行をするのがおすすめです。

オフライン上の開発環境を整えるのに必要なものは、テキストエディタとブラウザのみです。

まず、テキストエディタでhtmlファイルとjsファイルを作り、コーディングをします。

htmlファイルのheadタグ内には、jsファイルを読み込むためのパスを記述しておきましょう。

jsファイルを読み込むためのパス(HTML)
<script type=”text/javascript” src=”jsファイルのパス”></script>

jsファイルを作らずに、htmlファイルに直接JavaScriptのコードを書く場合、パスの記述は不要です。

コーディングを終えたら、htmlファイルを選択してブラウザで読み込みます。

すると、ブラウザ上でファイルが実行されます。

console.logを確認したい場合は、ブラウザの検証ツールを使用します。

Google Chromeの場合、検証ツールの「Console」にてconsole.logを確認しましょう。

またコードにエラーがある場合、Consoleでエラーの内容、エラーの箇所を教えてくれます。

ブラウザがあれば、どこででもJavaScriptを開発&実行できます。

オフライン上での開発&実行の特徴まとめ

どんな人におすすめ?

  • セキュリティ面が心配でローカル環境で開発&実行したい人
  • Wi-Fiがない場所でもJavaScriptを開発&実行したい人

必要なものは?

  • テキストエディタ(メモ帳など)
  • ブラウザ(Google ChromeやFirefoxなど)

どんなメリットがある?

  • ブラウザがエラーの内容と箇所を教えてくれる
  • どこででもJavaScriptを開発&実行できる

開発環境構築&実行方法2.オンライン上

少年

開発環境の構築にあまり手間をかけたくない!

少女

とにかくまずはコードを書く練習がしたい!

このようにお考えの方は、オンライン上でJavaScriptを開発&実行するのがおすすめです。

オンライン上で開発&実行する場合、ブラウザ上のテキストエディタを使うのが代表的です。

ブラウザ上のテキストエディタでおすすめなものとしては、「PlayCode」が挙げられます。

PlayCodeは、会員登録不要&無料で利用できるブラウザ上のテキストエディタです。

コードの記述欄にコードを書くと、リアルタイムでコードが反映されます。

またPlayCodeだと、エラーがある際に教えてくれます。

会員登録をすれば、自分の作ったwebページを公開することもできます。

オンライン上での開発&実行の特徴まとめ

どんな人におすすめ?

  • 開発環境の構築に時間をかけたくない人
  • すぐにJavaScriptのコーディングに挑戦してみたい人

必要なものは?

  • ブラウザ上のテキストエディタ(PlayCodeなど)

どんなメリットがある?

  • 開発環境を整えることなくプログラミングができる
  • リアルタイムでプログラミングの結果が反映される
  • 自分が作ったwebページを公開することもできる

開発環境構築&実行方法3.スマートフォン上

少年

スマホからでもJavaScriptの開発はできるのかな?

実は近年では、スマートフォン上でもJavaScriptの開発&実行ができるようになりました。

スマートフォン上であれば、PCがなくても場所を選ばずにJavaScriptを開発できます。

スマートフォンでJavaScriptの開発&実行を行う場合、アプリを使用します。

今回紹介するスマホアプリは以下の2つです。

【JavaScriptの開発&実行ができるスマホアプリ】
  1. JavaScript Anywhere JSAnywhere(iOS用)
  2. JS Run(Android用)

まずは、JavaScript Anywhere JSAnywhereです。

 

JavaScript Anywhere JSAnywhereはiOS用のアプリで、JavaScriptの他にHTML、CSSのコーディングも可能です。

コーディングの内容は内蔵ブラウザで確認できるので、シンプルなwebサイトを作ってみたい方におすすめです。

次にJS Runを紹介します。

JS RunはJavaScript専用のテキストエディタです。

コンソールやアラートの出力機能、予測入力機能、自動でスペースを生成する機能などが備わっています。

スマートフォン上での開発&実行の特徴まとめ

どんな人におすすめ?

  • スマートフォンでJavaScriptの開発を行ってみたい人
  • 場所を選ばないでコードを書いてみたい人

必要なものは?

  • JavaScript開発用のアプリ

どんなメリットがある?

  • どこでもJavaScriptのコードを書ける

JavaScriptを開発するなら統合開発環境(IDE)がおすすめ

JavaScriptの開発はテキストエディタを用いて行いますが、近年では統合開発環境の役割を果たすテキストエディタもリリースされています。

統合開発環境(Integrated Development Environment)とは、プログラミングに必要なツールをひとまとめにしたもので、具体的にはEclipseやVisual Studio Codeなどが、統合開発環境にあたります。

もしJavaScriptの開発をしたいのであれば、統合開発環境の役割があるテキストエディタで行うのがおすすめです。

統合開発環境(IDE)がおすすめな理由

何故ならば、統合開発環境はテキストエディタの機能だけでなく、コードのミスを発見&修正してくれるデバッガ機能、人間語を機械語に翻訳してくれるコンパイラ機能など、プログラミングに必要な機能が備わっているものだからです。

統合開発環境が登場する以前は、これらの機能を別々のツールで果たしながらプログラミングを行っていました。

しかし統合開発環境を用いれば、プログラミングに必要なツールや機能が一通り揃っているので、効率良くプログラミングを進められます。

近年では無料で使える統合開発環境もリリースされているので、誰でもスムーズにプログラミングができます。

JavaScriptの開発のためのおすすめエディタ

ここからは、JavaScriptの開発を行うためにおすすめなエディタを紹介します。

今回紹介するエディタは、こちらです。

【JavaScriptの開発におすすめなエディタ】
  1. Visual Studio Code
  2. Eclipse
  3. Atom

それぞれのエディタについて解説します。

おすすめエディタ1.Visual Studio Code

Visual Studio CodeはMicrosoft社が開発したテキストエディタです。

拡張機能をインストールすれば、コードの自動補完機能、デバッグ機能が使用できるので、ストレスなくコードを書けます。

JavaScript以外にもPython、SQL、C#などのあらゆる言語をサポートしているので、様々なプログラミング言語のコードを書きたい方におすすめです。

おすすめエディタ2.Eclipse

EclipseはIBM社が開発した統合開発環境で、基本的にはJavaの開発で使われることが多いですが、設定をすればJavaScriptの開発も行えます。

プラグインも豊富にリリースされており、コードの検索のスピードを向上するプラグイン、コードの整理や保管などを行ってくれるものなど、様々あります。

カスタマイズ性が高いテキストエディタですが、プラグインを導入し過ぎるとプラグイン同士で干渉することがあるので、プラグインを導入する際は注意しましょう。

おすすめエディタ3.Atom

AtomはGitHubが開発したテキストエディタです。

複数のファイルを同時に開ける機能や画面を分割できる機能などがあり、UIも高いと評判です。

そのため「テキストエディタを使いこなせるか不安」と思っている方は、Atomの導入を検討してみてはいかがでしょうか。

まとめ:JavaScriptの開発にチャレンジ!

今回はJavaScriptの開発環境の構築&実行方法について解説しました。

JavaScriptのスキルを身につけるためには、知識をインプットするだけでなく、開発環境を整えた上で実際にプログラミングをすることが必要です。

近年のテキストエディタは、通信環境があれば準備に手間がかからないものや、自動でコードを見やすくしてくれるものなどがあり、便利に使用できます。

JavaScriptの開発環境を整え、JavaScriptのスキルをどんどん高めていきましょう!

「これからの時代、プログラミングと英語が必要そう…」 それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。 そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学のKredoの「IT留学オンライン」では、プログラミングと英語のスキルをオンライン授業で習得できます!

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

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

新規CTA

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

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

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
Kredo編集部
Kredo編集部

Kredo編集部です!Tech、英語学習、キャリア、セブ島留学の情報を発信していきます。

関連記事

  • 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.