見出し画像

小さな渋谷の会社でゼロから作るWebアプリケーション (1) 開発環境セットアップ

AND.Lab CTO note

株式会社エー・アンド・ディのCTOの山口です。
実作業が忙しくていきなり間が空いてしまいました……。

さて、Webアプリケーションをゼロから作るにあたり、今回はまず開発環境のセットアップを行います。

なお、本マガジンで開発しているプロジェクトのソースコードはこちらで公開しています。
（開発は継続しているため、masterブランチでは本文の内容より先に進んでいる場合があります）

https://github.com/andcorp/morisoba

前提条件

本マガジンでは、Windows 10 Pro x64 環境を前提とします。

メモリは16GB程度あるのが望ましいです。ディスクもSSDを推奨します。開発効率が全然違います。

ブラウザは基本的にGoogle Chromeを使用します。

IDE

画像1

最近のWeb関連の開発では、何はともあれ統合開発環境(IDE)がなければ始まりません。

弊社では最近Visual Studio Codeをよく使用しています。そのため、本マガジンでも Visual Studio Code（略称VSCode)を使用していこうと思います。
バックエンドにJavaを使用する場合Eclipseなどが定番ですが、VSCodeにすると以下のような利点があります。

Eclipseと同じく無料
弊社のような貧乏会社にはありがたいです……。

動作が比較的軽快
※環境によります。
※個人の主観です。

TypeScriptなどフロントエンドの開発もVSCodeで一貫して行える。
Eclipseでも頑張ればできますが、あまりメジャーではないです……。

ワークスペースの仕組みで、開発環境を設定ファイルとして記述しておける。
 使用する拡張機能などを`.code-workspace`ファイルに書いて管理できます。

いろいろなプログラミング言語に対応している。
流行っているので、いろいろなプログラミング言語向けの拡張が揃っています。

情報量が多い。
流行っているので、情報が新鮮かつ多いです。

流行っている。
つまり流行っているので積極的に使っていきます。

デメリットもあります。

Java中心にやってきた人で経験者が少ない。

Javaの開発環境としては未熟でトラブルが多い。
とはいえ、開発が止まるほどのものはまだ経験していないです。

Eclipseと比較して、リファクタリングなどの機能がまだ弱い。

Java

画像2

次に、Java、つまりJDKがないと話になりません。

Javaは最近Oracle JDKが有償化されました。
個人の開発向けとしては今まで通り無償で使用できますが、Webサーバーを立ててサービスを運営する場合、きちんとお金を払ってサポートを受ける必要があります。

無料で使用したい場合はOpenJDKを使用する選択肢もあります。ただし、古いバージョンに対してのセキュリティアップデートなどが行われないため、OpenJDKのバージョンアップを常に追いかける必要があります。

無償のまま、特定バージョンのJDKを使い続けたい……そんなあなたに、Oracle以外が提供しているJDKを使用するという選択肢が残されています。

AdoptOpenJDK
Amazon Corretto
Microsoft Azure上のJavaサポート

このマガジンでは、AWS上にJavaアプリケーションをデプロイすることを想定するため、Amazon Correttoを使用します。
気になるライセンスは、OpenJDKと同様のGPLv2(クラスパス例外付き)になっています。

Amazon Correttoのライセンスについて
クラスパス例外についての原文

構築手順

さて、それではいよいよ開発環境構築です。

基本的にはGithubリポジトリのREADME.mdに書いてあります。
ここでは、構築手順の中で自然に行われることについて、何点か記載しておきます。

EditorConfigの設定

ソースコードやらテキストファイルを編集するにあたって、文字コードや改行コード・スペースやタブの設定はどうしても各個人でバラバラになりがちです。
そういった、気を抜くと統一が崩れてしまいがちな設定を一元管理するためにEditorConfigという仕組みがあります。
今回は以下のような設定でファイルを作ってみました。

* 文字コードはUTF-8
* 改行コードはLF
* インデントはスペース4つ
* 行末の空白は削除する。
* ファイル終端に改行を入れる。
* Windowsのバッチファイル(.bat)についてのみ、改行はCRLF

VSCodeでの推奨拡張の設定

先ほどのEditorConfigの設定をVSCodeで有効にするために、EditorConfigの拡張を入れます。

{
    "folders": [
        {
            "path": "."
        }
    ],
    "extensions": {
        "recommendations": [
            "EditorConfig.EditorConfig"
        ]
    }
}

上記のように.code-workspaceファイルのrecommendations(推奨拡張)に拡張機能のIDを記載しておけば、ワークスペースを開いたときに推奨拡張のメッセージが出て、1クリックで必要な拡張(ここではEditorConfig)がインストールできるようになります。

画像3

今後、VSCodeに追加する拡張は同じように推奨拡張に記載していきます。

いまインストールしてある拡張を一覧表示したい

推奨拡張を書くためにインストールしてある拡張の一覧を表示したい時があります。
その場合、コマンドプロンプト等で下記のコマンドを実行すると、インストール済みの拡張のID一覧が表示されます。

$ code --list-extensions
eamodio.gitlens
EditorConfig.EditorConfig
redhat.java
vscjava.vscode-java-debug
vscjava.vscode-java-dependency
vscjava.vscode-java-pack
vscjava.vscode-java-test
vscjava.vscode-maven

これで表示されるIDをrecommendationsに転記すれば、推奨拡張として一括インストール対象になります。

JDKのインストール

JDKのインストール手順についてもREADMEに記載しました。

工夫した点として、JDKはプロジェクトごとに別のものが使われがちのため、ワークスペース配下にJDKを格納し、そちらをJAVA_HOMEとして指定するようにしました。(設定内容は後述)
たぶんちゃんと動くと思います。

VSCodeでJavaを使用するために必要になる各種拡張機能についても、ワークスペースの推奨拡張に追加しておきました。

"extensions": {
    "recommendations": [
        "EditorConfig.EditorConfig",
        "eamodio.gitlens",
        "redhat.java",
        "vscjava.vscode-java-debug",
        "vscjava.vscode-java-pack",
        "vscjava.vscode-java-test",
        "vscjava.vscode-maven",
    ]
},

さらに、ダウンロードしたJDKをVSCode内で使用するための設定も追加しました。

"settings": {
    "java.home": "C:\\Users\\ikemen\\morisoba\\jdk\\amazon-corretto-11",
    "java.jdt.ls.vmargs": "-noverify -Dfile.encoding=utf8 -Xmx1G -XX:+UseG1GC -XX:+UseStringDeduplication",
    "java.configuration.updateBuildConfiguration": "automatic",
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true,
        "jdk/": true
    }
}

それぞれ以下のように配慮されています。

* JAVA_HOMEを、本プロジェクトのjdkディレクトリ内を指すよう設定した。
* コンソール出力等の文字化けを避けるため、JDKオプションに-Dfile.encoding=utf8を追加した。
* 他のオプションはデフォルトを引き継いでいる。
* ビルド設定変更時には自動で再ビルドが行われるようにした。
* 自動生成される各種ファイルをワークスペースに表示しないようにした。
* JDKのファイルも基本的には触らないので表示されないようにした。

課題(2019/08/21追記)

VSCodeのJava拡張について、java.homeの設定がまだ変数展開に対応していませんでした……。
下記のissueが実装されるまで、java.homeは決め打ちが必要です。

結構時間がかかりそうなので、Gradle導入後、.code-workspaceを自動生成する方法を考えようと思います。

まとめ

今回は、VSCodeをインストールし、使用するJDKをインストールし、必要なツールを揃えました。

開発ツールなどは、個人で開発する分には好き勝手にインストールすればよいのですが、業務としてチームで開発する場合は、標準的な方法を確立しておくべきです。
それも、新規メンバーの参入も考えて、ツールが何もインストールされていない素のマシンからセットアップできる手順にしておくべきです。
標準的な環境が確立していれば、問題点の共有や解決・改善をチーム全体で行っていくことができます。

次回は、いよいよプロジェクトのためのファイルを作成していきます。

免責事項・ライセンス

画像4

　この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。

　弊社の当コンテンツに掲載されている情報の正確性・安全性などについての保証はなく、弊社は何らの責任を負うものではありません。
　弊社の当コンテンツに掲載された内容によって生じた損害等の一切の責任を負いかねますので、ご了承ください。

Copyright © 2019 ANDCORP.

この記事が気に入ったらサポートをしてみませんか？