Web アプリ開発のための開発環境を構築してみた
私は今年 4 月に ESRIジャパン株式会社へ入社したばかりのアプリ開発初心者です。その私が Web アプリ開発の初めの一歩である「開発環境の構築」に取り組んでみました！本記事が「これから Web アプリ開発を始めるぞ！」という初心者の方の参考になれば幸いです。
自己紹介
2017 年 4 月に入社し、ArcGIS の開発者製品を担当しているグループの一員になりました。学生時代にはほんのすこし Python を勉強しましたが、ほぼ開発初心者です。現在、地図アプリ開発を行うためにプログラミングや Web アプリの基礎を勉強しているところです。まだまだ分からないことだらけですが、一日でも早く開発のプロになれるよう頑張ります！
Web アプリとは？
アプリには、大きく分けて 2 つの種類があります。1 つ目は Web ブラウザー上で動作し、Web ブラウザーを用いて利用する「Web アプリ」です。2 つ目は PC やスマホなどの端末にインストールして使用する「ネイティブアプリ」です。私が Web アプリ開発の勉強中ということもあり、本記事では Web アプリ開発にフォーカスします！
Web アプリは OS に依存せずに動作するため、スマートフォンやパソコンなどのプラットフォームごとにアプリを開発する手間が不要になるという開発者側のメリットに加え、利用者側にも端末にアプリをインストールする手間が不要というメリットがあります。
Web アプリ開発には何が必要？
Web アプリ開発をスタートするためにまず準備するものは以下の2つです。
- テキストエディター
- Web ブラウザー
なお、私は Windows マシンを開発に使用していますので、本記事も Windows をお使いの方向けの構成になっています。また、開発言語は JavaScript です。
準備１：テキストエディター
プログラミングといえば…上の画像のような、黒い背景にコードが書かれたものを連想しませんか？
このようなコードを入力するソフトが「テキストエディター」です。
無償で利用できるテキストエディターには 「Visual Studio Code」「Sublime Text」「Atom」 等があります。
これらのテキストエディターは各製品の HP から簡単にインストールすることができます。
私は軽量・高速だといわれている Visual Studio Code を使うことにしました！
ちなみに、Windows にデフォルトで入っているメモ帳もテキストエディターとして使用できると聞き、メモ帳でもコードを書いてみましたが、コードが色分けされないため少し見づらく、プログラミングには不向きでした。
何かひとつ、プログラミングに適したテキストエディターをインストールされることをお勧めします！
Visual Studio Code のインストール
では Visual Studio Code をインストールしてみましょう！
手順
- Visual Studio Code のダウンロードページ にアクセスします。
- Windows のボタンをクリックするとエクスプローラーが立ち上がります。（Windows の 32 ビットと 64 ビット用のインストーラーがダウンロードできます。私は 64 ビット版 Windows のマシンを使用しているので、64 ビット用のインストーラーをダウンロードします）
- 保存先を指定して保存します。
- 保存したファイルをダブルクリックすると、インストーラーが起動します。
- [次へ(N)] をクリックします。
- ライセンスの同意文書を読み、[同意する(A)] をクリックします。
- Visual Studio Code のインストール先を指定し、[次へ(N)] をクリックします。
（デフォルトのままでも構いません） - スタートメニューに表示されるプログラムグループの名前を設定し、[次へ(N)] をクリックします。
（デフォルトのままでも構いません） - 追加タスクを選択し、[次へ(N)] をクリックします。
（デフォルトのままでも構いません） - [インストール(N)] をクリックするとインストールが開始されます。
- Visual Studio Code のセットアップ ウィザードの完了画面が表示されるとインストールは完了です。「Visual Studio Code を実行する」 にチェックが入っていることを確認し、[完了] をクリックします。
- 自動的に Visual Studio Code が起動します。
デフォルトの Visual Studio Code の画面構成は、以下の画像の通りです。
- メニュー バー：「ファイル」「編集」などのメニューが表示される
- エディター：コードを書く部分
- アクティビティ バー：検索やデバッグ、ソース管理等のビューを開くことができる
- ステータス バー：編集中のコードの情報が表示される
準備２：Web ブラウザー
Web アプリは Web ブラウザー上で実行するため、 Web ブラウザーが必須です。
私は普段から使い慣れている Google Chrome を使うことにしました！（Google Chrome は Google Chrome のダウンロードページ よりダウンロードできます） 特別な設定を行う必要はありません。普段使っている Web ブラウザーをそのまま使用することができます。
簡単な Web ページの作成
早速、用意した開発環境を使用して Web ブラウザーに「Hello World」と表示される簡単な Web ページを作ってみました！
手順
- Visual Studio Code を起動します。
- メニュー バーの [ファイル(F)] をクリックし、[新規ファイル(N)] を選択します。
- ステータス バー右端のスマイル マークの隣の [プレーンテキスト] をクリックし、言語モードを HTML に変更します。
- エディターに以下の HTML と JavaScript で構成されたコードを書きます。コードは基本的にたった一文字間違えただけでも動かないのでご注意ください！
- メニュー バーの [ファイル(F)] をクリックし、[名前を付けて保存(A)] を選択、ファイルを HTML 形式で保存します。
- エクスプローラーから保存したファイルをダブルクリックして Web ブラウザーで開くと、以下のような画面になります。
Hello World が表示されない場合は、コードにタイプミスなどがあると考えられます。もう一度コードを見直してみてみましょう！ちなみに私は、「”」や「;」が抜けるミスをよくしてしまいます…。
おわりに
以上で基本的な開発環境の構築は完了です。これで Web アプリ開発を始める準備はできました。インターネット上で「JavaScript サンプル」などと検索するとサンプルコードがたくさん出てきますので、いろいろな Web アプリの作成にチャレンジしてみてください！
