Windows 7 PC → Windows 10 PC へ移行する ( Git、SourceTree、IntelliJ IDEA、nodist＋Node.js＋npm、windows-build-tools のインストール＋boot-npm-geb-sample の動作確認 )

概要

記事一覧はこちらです。

以下のソフトをインストールして、boot-npm-geb-sample で動作確認します。

• Git for Windows
• SourceTree
• IntelliJ IDEA 2018.2.1
• nodist＋Node.js＋npm

参照したサイト・書籍

目次

1. Git for Windows のインストール
2. SourceTree のインストール
3. IntelliJ IDEA 2018.2.1 のインストール
4. nodist＋Node.js＋npm のインストール
5. windows-build-tools 3.1.0 のインストール
6. boot-npm-geb-sample で動作確認する

手順

Git for Windows のインストール

1. https://gitforwindows.org/ から Git-2.18.0-64-bit.exe をダウンロードします。

2. Git-2.18.0-64-bit.exe を起動します。

3. 「Git 2.18.0 Setup」ダイアログが表示されます。「Next >」ボタンをクリックします。

4. 「Select Destination Location」画面が表示されます。D:\Git に変更した後、「Next >」ボタンをクリックします。

5. 「Select Components」画面が表示されます。「Git LFS (Large File Support)」以外のチェックを外した後、「Next >」ボタンをクリックします。

6. 「Select Start Menu Folder」画面が表示されます。画面下の「Don't create a Start Menu folder」をチェックした後、「Next >」ボタンをクリックします。

7. 「Choosing the default editor used by Git」画面が表示されます。「Use Vim (the ubiquitous text editor) as Git's default editor」が選択された状態で [Next >]ボタンをクリックします。

8. 「Adjusting your PATH environment」画面が表示されます。中央の「Use Git from the Windows Command Prompt」が選択されていることを確認後、[Next >]ボタンをクリックします。

9. 「Choosing HTTPS transport backend」画面が表示されます。「Use the OpenSSL library」が選択されていることを確認後、[Next >]ボタンをクリックします。

10. 「Configuring the line ending conversions」画面が表示されます。一番上の「Checkout Windows-style, commit Unix-style line endings」が選択されていることを確認した後、[Next >]ボタンをクリックします。

11. 「Configuring the terminal emulator to use with Git Bash」画面が表示されます。「Use Windows'default console window」を選択した後、[Next >]ボタンをクリックします。

12. 「Configuring extra options」画面が表示されます。「Enable file system caching」以外のチェックを外した後、[Install]ボタンをクリックします。

13. インストールが完了すると「Completing the Git Setup Wizard」のメッセージが表示された画面が表示されます。中央の「View Release Notes」のチェックを外した後、「Finish」ボタンをクリックしてインストーラーを終了します。

14. Rapid Environment Editor を起動して環境変数 Path を見ると D:\Git\cmd だけが追加されていますので、D:\Git\usr\bin\ と D:\Git\mingw64\bin\ を追加します。

15. ConEmu を起動し、「Create new console」を開いて以下の画像の内容を入力して「Start」ボタンをクリックします。

    

    • Spring Boot で書籍の貸出状況確認・貸出申請する Web アプリケーションを作る ( 番外編 )( Git for Windows を 2.5.1 → 2.5.3 へ　その２ ) 参照。

    git-cmd.exe が起動するので、日本語の表示・入力が問題ないかを確認します。

    

16. ConEmu のコマンドプロンプトから git --version を実行し、git のバージョンが git version 2.18.0.windows.1 になっていることを確認します。

    

SourceTree のインストール

1. https://ja.atlassian.com/software/sourcetree から SourceTreeSetup-2.6.10.exe をダウンロードします。

2. SourceTreeSetup-2.6.10.exe を起動します。

3. ダイアログが表示されます。「ライセンスに同意します」をチェックした後、「次へ」ボタンをクリックします。

4. 「Regist account」画面が表示されます。「Atlassian アカウント」ボタンをクリックして以前登録したアカウントでログインした後、「次へ」ボタンをクリックします。

5. 「Pick tools to download and install」画面が表示されます。「Mercurial」のチェックを外した後、「次へ」ボタンをクリックします。

6. 「SSH キーを読み込みますか？」ダイアログが表示されます。「いいえ」ボタンをクリックします。

7. SourceTree のメイン画面が表示されるので、「オプション」ダイアログで必要そうな設定を行った後、終了します。

IntelliJ IDEA 2018.2.1 のインストール

1. https://www.jetbrains.com/idea/download/#section=windows から ideaIU-2018.2.1.exe をダウンロードします。

2. ideaIU-2018.2.1.exe を起動します。

3. 「IntelliJ IDEA Setup」ダイアログが表示されます。「Next >」ボタンをクリックします。

4. 「Choose Install Location」画面が表示されます。「Destination Folder」を D:\IntelliJ_IDEA\2018.2.1 に変更した後、「Next >」ボタンをクリックします。

5. 「Installation Options」画面が表示されます。何もチェックしていない状態で「Next >」ボタンをクリックします。

6. 「Choose Start Menu Folder」画面が表示されます。何も変更せずに「Install」ボタンをクリックします。

7. 「Installing」画面が表示されてインストールが始まりますので、完了するまで待ちます。

8. インストールが完了すると「Completing IntelliJ IDEA Setup」画面が表示されます。「Finish」ボタンをクリックしてダイアログを閉じます。

9. D:\IntelliJ_IDEA\2018.2.1\bin\idea64.exe を実行します。起動時に「Complete Installation」ダイアログが表示されるので、「Do not Import settings」が選択された状態で「OK」ボタンをクリックします。

10. 「IntelliJ IDEA User License Agreement」ダイアログが表示されます。「Accept」ボタンをクリックします。

11. 「Data Sharing」ダイアログが表示されます。「Send Usage Statistics」ボタンをクリックします。

12. 「Customize IntelliJ IDEA」画面が表示されます。「Darcula」が選択された状態で「Next Default plugins」ボタンをクリックします。

13. 「Tune IDEA to your tasks」画面が表示されます。何も変更せずに「Next Feature plugins」ボタンをクリックします。

14. 「Download feature plugins」画面が表示されます。「Scala」「NodeJS」の２つの「Install」ボタンをクリックして Install した後、「Start using IntelliJ IDEA」ボタンをクリックします。

15. 「IntelliJ IDEA License Activation」ダイアログが表示されます。JetBrains Account を入力後、「Activate」ボタンをクリックします。

16. 「Welcome to IntelliJ IDEA」画面が表示されます。画面右下の「Configure」から以下のメニューを選択し、設定します。

    • Plugins
      • 以下の Plugin をインストールします。
        • AWS CloudFormation
        • CheckStyle-IDEA
        • Doma Support
        • Grep Console
          • 今回 Plugin を見直していて見つけた Plugin です。Console に出力されるログをタイプ別に色づけしてくれます。
        • IntelliJ-Haskell
        • JRebel for InetlliJ
        • Lombok Plugin
        • Prettier
        • Rainbow Brackets
        • Request mapper
        • Spock Framework Enhancements
        • Sql Generator
          • 今回 Plugin を見直していて見つけた Plugin です。Database Tools のテーブルのコンテキストメニューに「Sql Generator」というメニューが追加されて、SQL文を自動生成してくれます（生成された SQL 文はクリップボードにコピーされます）。
        • String Manipulatin
        • ToolWindow Colorful Icons
        • .env files support
    • Settings
      • Editor - Color Scheme - General
        • 画面中央のリストで「Line Coverage」-「Full」を選択後、画面右側の「Foreground」を 485848 → 00FF00 に変更。
        • 画面中央のリストで「Line Coverage」-「Uncoverred」を選択後、画面右側の「Foreground」を 715353 → FF0000 に変更。
      • Editor - Color Scheme - Language Defaults
        • 画面中央のリストから「Semantic highlighting」を選択後、画面右側の
      • Editor - Color Scheme - Color Scheme Font
        • 「Use color scheme font instead of the default」をチェックし、「Font」を Monospaced → Source Code Pro に変更。
      • JRebel
        • Activate する
      • Other Settings - Grep Console
        • 「Highlighting & Folding」の以下の設定を変更する。
          • ERROR の 「Background」の色を 690000 へ変更。
          • WARN の「Background」の色を 696900 へ変更。
          • DEBUG の「Fourground」の色を 878787 へ変更。
          • TRACE の「Fourground」の色を 5F5F5F へ変更。
    • Edit Custom VM Options...
      • 以下の値に変更して「Save」ボタンをクリックします。
        • -Xms128m → -Xms1024m
        • -Xmx750m → -Xmx8192m
    • Project Defaults - Settings
      • Editor - Code Style - Javascript
        • 「Tabs and Indents」タブ
          • 「Tab size」「Indent」「Continuation indent」の値を 4 → 2 に変更。
      • Editor - Inspections
        • 「Serializable class without 'serialVersionUID'」をチェック。
      • Editor - File Encodings
        • 「Project Encoding」を <System Default: windows-31j> → UTF-8 に変更。
        • 「Default encoding for properties files」を <System Default: windows-31j> → UTF-8 に変更。
      • Build, Execution, Deployment - Build Tools - Gradle
        • 「Gradle VM options」に -Dfile.encoding=UTF-8 を入力。
      • Build, Execution, Deployment - Compiler - Annotation Processors
        • 「Enable annotation processing」をチェック。
      • Language & Frameworks - JavaScript
        • 「JavaScript language version」を ECMAScript 5.1 → ECMAScript 6 に変更。
    • Project Defaults - Project Structure
      • Project Settings - Project
        • 「Project SDK」に 1.8.0_181 （D:\Java\jdk1.8.0_181）を登録。
        • 「Project language level」を SDK default (8 - Lambdas, annotations, etc.) に設定。
    • Project Defaults - Run Configurations
      • Project Settings - Project
        • Templates - JUnit
          • 「VM Options」に -ea -Dfile.encoding=UTF-8 -Dspring.profiles.active=unittest -Dsun.nio.cs.map=x-windows-iso2022jp/ISO-2022-JP を入力。
        • Templates - Spring Boot
          • 「VM Options」に -ea -Dfile.encoding=UTF-8 -Dspring.profiles.active=develop -Dsun.nio.cs.map=x-windows-iso2022jp/ISO-2022-JP を入力。

17. 一旦 IntelliJ IDEA は終了させます。

nodist＋Node.js＋npm のインストール

1. https://github.com/marcelklehr/nodist/releases から NodistSetup-v0.8.8.exe をダウンロードします。

2. NodistSetup-v0.8.8.exe を実行します。

3. 「Welcome to Nodist Setup」画面が表示されます。「Next >」ボタンをクリックします。

4. 「License Agreement」画面が表示されます。「I Agree」ボタンをクリックします。

5. 「Choose Install Location」画面が表示されます。「Destination Folder」を D:\Nodist に変更した後、「Install」ボタンをクリックします。

6. インストールが実行されます。完了すると「Completing Nodist Setup」画面が表示されますので、「Finish」ボタンをクリックします。

7. コマンドプロンプトを起動し、nodist -v コマンドを実行してバージョン番号が表示されることを確認します。

   

8. Node.js をインストールします。https://nodejs.org/ja/ を見ると推奨版は 8.11.4 LTS でしたので、8.11.4 をインストールします。

   

9. npm をインストールします。https://docs.npmjs.com/ の一番下を見ると 6.4.0 と書かれていましたが、https://github.com/npm/npm/releases の Latest release は 6.1.0 でしたので 6.1.0 をインストールします。

   

10. コマンドプロンプトから npm config set scripts-prepend-node-path true コマンドを実行します。

    ※Spring Boot + npm + Geb で入力フォームを作ってテストする ( その５ )( Bootstrap, AdminLTE, Font Awesome, Ionicons のインストール ) 参照。

windows-build-tools 3.1.0 のインストール

1. npm 以外に global インストールしている windows-build-tools をインストールします。https://www.npmjs.com/package/windows-build-tools を見ると最新バージョンは 3.1.0 でしたので、管理者モードで Powershell を起動した後 npm install --global --production windows-build-tools@3.1.0 を実行します。

   

boot-npm-geb-sample で動作確認する

ここまでインストールが終われば boot-npm-geb-sample が動作するはずなので、確認します。

• IntelliJ IDEA を起動し、boot-npm-geb-sample project をオープンする。
• 「File」-「Project Structure」を選択して「Project Structure」ダイアログを表示し、「Project Settings」-「Project」の「Project SDK」「Project language level」の設定を変更する。
• Gradle Tool Window の「Refresh all Gradle projects」ボタンをクリックして更新する。
• clean タスク → Rebuild Project → build タスクを実行してエラーが出ないことを確認する。
  • エラーが出たので以下の点を変更した。
    • build.gradle に [compileJava, compileTestGroovy, compileTestJava]*.options*.encoding = "UTF-8" を追加。
    • build.gradle の bootRun、tasks.withType(Test) の jvmArgs に以下の値を追加。
      • -ea
      • -Dfile.encoding=UTF-8
      • -Dsun.nio.cs.map=x-windows-iso2022jp/ISO-2022-JP
  • BUILD SUCCESSFUL が表示された。
• コマンドプロンプトから npm install コマンドを実行してエラーが出ないことを確認する。
• コマンドプロンプトから npm test コマンドを実行してエラーが出ないことを確認する。
• コマンドプロンプトから npm run build コマンドを実行してエラーが出ないことを確認する。
• npm run springboot コマンドで Browsersync を起動し、IntelliJ IDEA から Tomcat を起動して、画面が表示されることを確認する。
• gebTest タスクを実行する前に以下のファイル内の C:\ → D:\ に変更する。
  • src/test/resources/GebConfig.groovy
  • D:/geckodriver/0.19.0/geckodriver.bat
• gebTest タスクを実行してエラーが出ないことを確認する。