Visual Studio Codeの設定で以下を設定。
- Ediror: Format On Type：チェック
- Prettier: Jsx Single Quote：チェック
- Prettier: Semi：チェック
- Prettier: Single Quote：チェック
- Prettier: Tab Width：2
更にsetting.jsonで編集

"Emmet: Include Languages": {
  "javascript": "javascriptreact"
}

TSLint （TypeScriptの構文チェック）

vscode-spotify （VSCode内でSpotifyを使用）

VS Code ES7 React/Redux/React-Native/JS snippets

Version Lens

npmパッケージ等のバージョンについての情報を提供する。
package.jsonファイルを表示したとき、タブの並びの[V]をクリックすると、コマンド npm outdated を実行して得られるような情報が表示される。

GitLens

Svg Preview

Path Autocomplete

vscode-styled-components

styled-componentsのシンタックスハイライト

styled-components-snippets

imsc, exsc などの短縮した入力ができる。

GraphQL

GraphQLのシンタックスハイライト等

設定

[ファイル] – [自動保存]をチェックする。
Editor: Format On Saveをチェックする。
設定のterminal.integrated.shell.windowsをsetting.jsonで”C:\Program Files\PowerShell\6\pwsh.exe”に設定したPowerShell Coreに変更する。

{
     "terminal.integrated.shell.windows": "c:/Program Files/PowerShell/6/pwsh.exe"
}

Typora

マークダウンエディタ

Live Sass Compiler

Scss等をCSSにリアルタイムでコンパイルしブラウザをリロード

オンラインIDE

CodeSandbox

StackBlitz

Gitpod

6. SSHキーの設定

以下などで使用するためSSHキーを設定する。
- Bitbucket
- GitHub
- Cyberduck, FFFTPを介したXSERVERとのFTP-SSL
- GitHub Desktop
- Heroku

7. バージョン管理

以下などで使用するためSSHキーを設定する。Bitbucket
- GitHub
- Cyberduckを介したXSERVERとのFTP-SSL
- GitHub Desktop
- Heroku
同時にインストールされるGit Bushにて、SSHの鍵を作る。
- 任意のフォルダ以下に.sshフォルダを作る(“.ssh.”と入力）
- 任意のフォルダにて以下を実行し、.sshフォルダの下に2つのファイルを生成させる。パスフレーズはXSERVERを考慮して、なしではなく、半角英数字、半角スペース、その他一部記号を用いて6～32文字で設定する。

ssh-keygen -t rsa  -b 4096 -C "your_email@example.com"

SSHエージェントが実行されているかのは以下のコマンドでおこなう。

 eval "$(ssh-agent -s)"

 ssh-add ~/.ssh/id_rsa

新しいSSH秘密鍵ファイルをSSHエージェントに追加するには以下のコマンドでおこなう（Linux及びWindows）。

 ssh-add -K ~/.ssh/id_rsa

Git for Windows

インストールの設定は基本デフォルト。ただし、[Choosing the default editor used by Git]ページで[Use Visual Studio Code as Git’s default editor]を選択。

GithHub CLI

いくつかのインストール方法があるが、Windows用のインストーラがある。
使い方はこちら。

$ gh --version // バージョンを表示する
$ gh --help // ヘルプを表示する
$ gh auth status // 認証の状況を表示する
$ gh auth login // GitHubホストで認証する

Sough rcetree

Bitbucketのアカウント等が要求される。
GitHubのリポジトリを使用する場合は、先にGitHubにSSHを登録しておき、[ホスティングアカウントを設定]ダイアログボックスにて下記設定をした上で、[OAuthトークンを再読込]ボタンをクリックして、GitHub側で[Authorize atlassian]ボタンをクリックする。
- ホスティングサービス：GitHub
- 優先するプロトコル：HTTPS
- 認証：OAuth

GitHub Desktop

GitHubをWebサイトでなくElectroを用いたネイティブアプリで使うもの。
GitHubのアカウントとパスワードが必要。
https://github.com/settings/keys で、SSHを登録する。

8. シェル

Git Bash

Git for Windowsのインストールにより既にインストールされている。

PowerShell Core

6.2.1
バージョン確認方法

 PS> $PSVersionTable

9. デプロイメント

FTP、SFTPファイルアップロード

Cyberduck

[新規接続]ダイアログボックスでは、FTP-SSL (Explicit AUTH TLS)を選択する。SFTP(SSHによる暗号化FTP)ではない。
無料だけど$10以上払って登録しないと、毎回寄付をつのられる。

FFFTP

アプリケーション・デプロイメント・プラットフォーム

The Heroku CLI

Herokuアプリの作成と管理をターミナルから行うことができるコマンドラインインターフェース(CLI)。
これをインストールする前に、Herokuのアカウントを作成する必要がある。
インストール後に、以下でバージョン確認とログインができる。

> heroku -v
> heroku login

Firebase

npmモジュール

firebase-tools
- Firebaseプロジェクトをコマンドラインからテスト、管理、デプロイするためのコマンドラインツール(CLI)

10. コミュニケーション

Line

デスクトップアプリケーションをインストール

Slcak

mohikan
デスクトップアプリケーションをインストール

WordPress

前提：Jetpackプラグインを入れる
デスクトップアプリとモバイルアプリをインストール

Zoom

Discord

11. JavaScript関連開発

JavaScript Errors Notifier

JavaScriptのエラーをツールバーのアイコン又はポップアップにて通知する。

Node.js

Nodeのバージョン管理ツールを入れ、そこからNode.jsを入れるほうがよりよい。ツールには色々ありますが、NVM for Windows (nvm-windows)の場合はこちら。
JavaScript をブラウザ外（サーバーサイドなど）で実行できる環境。npmを含む。
推奨版と最新版があるが、推奨版をインストール。
バージョン確認は以下

node --version

TypeScript

Node.jsインストール後にnpmでインストールする。

npm install -g typescript

バージョン確認は以下

tsc --version

Yarn

> npm install -g yarn
> yarn --version // 1.21.0

React

React Devloper Tools

Chrome Developer ToolsにReactのデバッグ用の機能を追加するChrome拡張機能。
Components及びProfilerタブが追加される。

Redux DevTools

状態変更のアプリケーションのデバッグ用のChrome拡張機能。

live-server

ライブリロード機能（HTML, CSS, JavaScriptファイルが更新されると自動的にブラウザに反映される）を持った開発用のミニサーバー。

> npm install -g live-server // ローカルにインストールすると起動できないみたい

npm-check-updates

package.jsonの依存性を最新にする。
参考：npm のパッケージを最新版に更新する – ラボラジアン

babel-cli

もっと新しい @bebel/cli がある。

> npm install  babel-cli@6.24.1 
又は
> yarn add babel-cli@6.24.1

babel-core

もっと新しい @babel/core がある。

> yarn add babel-core@6.25.0

babel-loader

> yarn add babel-loader@7.1.1

babel-plugin-transform-class-properties

ES2015（ES6)静的クラスプロパティとES2016のプロパティ初期化の文法で宣言されたプロパティを変換する。

> yarn add babel-plugin-transform-class-properties

webpack

JavaScriptモジュールのコンパイルに使用される。
次のコマンドでインストールする。

> npm install webpack webpack-cli --save-dev

package.jsonに次の設定をおこなう。

 ：
  "private": true,
 ：
   "scripts": {
   ： 
    "build": "webpack --watch", 
 ：

設定ファイル webpack.config.js を配置する。例えば次。

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bandle.js',
    path: path.resolve(__dirname, 'public'),
  },
};

webpack-dev-server

ライブリロードを提供する開発用サーバー

> yarn add webpack-dev-server

例えば、webpack.config.js で次のように設定。詳細はこちら参照。

：  
  devServer: {
    contentBase: path.join(__dirname, 'public')
  } 
：

package.json で次のように設定して使用する。

   "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server" // こちら
   },

style-loader

DOMにCSSを注入する。

> yarn add style-loader

css-loader

@import および url()を解釈して、import/require()のように、それらの依存関係を解決する。
なお、@import は他のスタイルシートからスタイル規則をインポートするためのもの。url() は、画像はフォントなどのリソースへのポインターを記述するもの。

sass-loader

Sass/SCSSファイルをロードして、CSSにコンパイルする。

> yarn add sass-loader

node-sass

Node.jsをLibSassにバインドするライブラリ。
.scssファイルもコンパイル可能。
sass-loader から使われる。

> yarn add node-sass

Normalize.css

すべてのブラウザで同じように見えるようにするためのリセットCSS

> yarn add normalize.css

これを使うには、app.js に import ‘normalize.css/normalize.css’; を追加し、webpack.config.js に次のように設定する。

     }, {
      test: /\.s?css$/, // このように.scccだけでなく.css も取り込むようにする。
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },

webpack.config.js の設定例

 const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  module: {
    rules:[{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

その他コンポーネント

react-modal

Gatsby

gatsby-cli

npm i gatsby-cli

gatsby-plugin-styled-components

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

gatsby-plugin-prefetch-google-fonts

npm install --save gatsby-plugin-prefetch-google-fonts

gatsby-source-wordpress

gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

gatsby-awesome-pagination

npm install --save gatsby-awesome-pagination

Bootstrap

グリッドだけ使うためにインストールする。

npm i bootstrap

12. データベース

Mongo DB

こちらからダウンロード(Windows, 64bit, zip)
伸張したら、次のコマンドが実施できるように配置し、データを置くフォルダを作成する。

C:\Users\pitan\Documents\GitHub\node-course> /Users/pitan/mongodb/bin/mongod.exe --dbpath=/users/pitan/mongodb-data

Robo 3T

MongoDBのGUI。以前Robomongoと呼ばれていたもの。
他にStudio 3Tという製品もある。
Windows 64-bit, exe形式をダウンロード、実行してインストールする。
Mongo DB Connections
- Createをクリックする
- Name: Local MongoDB Database
- [Save]をクリックする
以下の右クリックメニューから[Open Shell]を選択し、”db.version()”と入力し、緑色のボタンをクリックするとバージョンが表示される。

MongoDB driver for Node.js

npm init -y
npm i mongodb@3.1.10

Mongoose

アプリケーションデータのモデル化と管理を容易にする。
これにはデータのサニタイズ（無毒化）やデータバリデーション他を含む。

  npm i mongoose@5.3.16

MongoDB Atlas 及び MongoDB Compass

[Conect to Cluster0]画面では[Connect with MongoDB Compass]を選択。
mongodb+srv://pitang1965:<password>@cluster0-fqzuj.mongodb.net/test　みたいなURI Conection Stringをコピーしておく。
ローカルホストのDBの接続設定
- 基本デフォルトを受け入れるが、[Connect to Host]画面の[Favorite Name]は、適当に”Localhost MongoDB Database”などと設定し、ローカルへの接続をまず最初に設定する。
- [Connect]ボタンをクリックしたときに、mongod.exeが起動していないとECONNREFUSEDエラーが出る。
本番環境のDBの接続設定
- [Connect] – [Disconnect]を選択した後に、[New Connection]を選択し、本番環境のDBへの接続設定をおこなう。
- 上記の” cluster0-fqzuj.mongodb.net”の部分の文字列を[Hostname]に設定する。
- [SRV Record]をONにする。
- [Authentication]を[Username / Password]にする。
- [Username]と[Password]を設定する。
- [Favorite Name]を”ProductionMongoDB Database”などとする。

PostgresSQL

こちらからインストール。
環境変数PATHに、”C:\Program Files\PostgreSQL\12\bin”を追加する。12は今回のバージョン。
HerokuでのNode.jsからの使い方はこちら。

13. API

Postman

HTTPリクエストを行うためのツールセットを提供することにより、REST APIのテストを簡単にする無料ツール。
Herokuでの説明はこちら。

Insomnia Core for Windows

REST及びGraphQLのデスクトップAPIクライアント
リクエストを作成し、レスポンスを確認。

14. テスト

Jest

Mocha

15. デザイン

プロトタイピング

Adobe XD

カラーピッカー

ColorZilla

ページ上の任意のピクセルの色を取得する等をおこなうChrome拡張機能

Gifアニメの作成

ScrennToGif

16. モバイルアプリ開発

React Native

expo-cli

Flutter

Flutterインストールはこちらから。

Android Studio

Version 3.5.2
プラグインのインストール
1. 起動後に[Start a new Android Studio Project]をクリックする。
2. [Add No Activity]をクリックして、[Next]をクリックして、[Finish]をクリックする。
3. [File] – [Settings…]をクリックする。
4. [Plugins]をクリックする。
5. Dart plugin を [Install]して、[Restart IDE]する（アップデートした）。
6. Flutter plugin を [Install]して、[Restart IDE]する。

Visual Studio Codeの設定

拡張機能 Flutter をインストールする。
必須でないが、拡張機能 Awesome Flutter Snippets もインストールした。

Androidデバイスの開発者向けオプションの設定

以下、Google Pixel 3 XL, Andoridバージョン10での説明
1. 設定アプリを開く。
2. デバイス情報を開く。
3. ビルド番号を7回タップする。
4. PINを再入力する。
  - これで[開発者向けオプション]が有効になり、設定アプリのシステムに[開発者向けオプション]が表示されるようになる。
5. [開発者向けオプション]の[デバッグ]オプションの[USBデバッグ]をONにする。

OEM USBドライバ

WindowsではOEM USBドライバを次の手順でインストールする。
1. ンピューターの管理] の左ペインで、[デバイスマネージャー] を選択する。
2. スマートフォンを接続し、右のペインからスマートフォンの名前を右クリックして、[ドライバーソフトウェアの更新]を選択する。
3. コンピュータを再起動する。

Android開発者登録方法

https://developer.android.com/distribute へアクセスする。
Googleのカウントでログインする。
[PLAY CONSOLEを起動]をクリックする。
$25.00支払う。
Google Play Consoleで各種設定ができるようになる。
コマンドラインから以下を実行する。
- “Review licenses that have not been accepted (y/N)?”には、yと答える。その後も全部y。

> flutter doctor --android-licenses

インストールの確認

以下のコマンドにて、No issues found!となること。
青いUSBでないとスマホを認識しなかった。また、スマホの操作でアクセスを許可する必要がある。

> flutter doctor

Android emulator

こちらを参考にセットアップする。編集中
1. Android Emulator のハードウェアアクセラレーションを設定する。
  - AVD Managerは[Welcome to Android Studio]の[Configure] – [AVD Manager]から開く。
  - [+ Create Virtual Device…]をクリックする。
  - [Select Hardware]画面でデバイス定義を選択する。各種のTV, Phone, Wear OS, Tabletがある。
  - [System Image]画面でインストールするOSのバージョンの[Download]ボタンをクリックする。
  - [Verify Configuration]画面では[Graphics]をより高速な[Hardware -GLES 2.0]を選択した。
  - Advaced Settingsは見ただけでいじらなかった。
Visual Studio Emulator for Android を実行するための要件の一つとして、Hyper-VとWindows Hypervisor Plattformの有効化が必要（下記参照）。

17. WSL

Microsoft Storeから以下をインストールし、Visual Studio Codeを再起動
- Windows Terminal (Preview)
- Ubuntu
こちらを参考に以下のコマンドを管理者として実行したPowerShellで下記コマンドを実行する。
- Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
Visual Studio Codeの次の拡張機能をインストールする
- Remote – WSL

18. サーバーレス

serverless framework

YAML + CLI でAWS, Azure, Google Cloud, Knative他の開発とデプロイを容易にする。
たくさんのサンプルがある。
詳細はこちら。

AWSコマンドラインインターフェイス

インストール結果の確認は以下。

> aws --version
aws-cli/2.0.21 Python/3.7.7 Windows/10 botocore/2.0.0dev25

Installing the AWS CLI version 2 on Windows

19. 仮想化

Docker Desktop for Windows

複数のコンテナを定義し実行する Docker アプリケーションのためのツール
YAML ファイル(docker-compose.yml)を使ってアプリケーションサービスの設定をおこなう。

// docker-compose.ymlに書いてあるコンテナをすべて起動

$ docker-compose up -d
// ※docker-compose.ymlに以下が書いてあれば自動で起動する。
restart: always

// docker-compose.ymlに書いてあるコンテナを停止
docker-compose stop

// docker-compose.ymlに書いてあるコンテナを削除
docker-compose rm

ms-azuretools.vscode-docker

Remote – Containers

20. Fitbit開発

Fitbit OS Simulator
CLIによるビルド方法についてはこちら参照。

21. Python

Python 2.7のインストール

Python2 でしか利用できない古いモジュールやアプリケーションを使用する場合、Pyton3 と Python2 の両方をインストールして、併用できます。

22. その他

Hyper-Vの有効化

PowerShellを右クリックメニューの[Run as Administrator]から実行する。
次のコマンドを実行する。詳細はこちら。
- Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All
Windowsを再起動する。

Windows Hypervisor Platformの有効化

こちらを参考に以下を実行し、WHPXを使えるようにする。
1. Windows デスクトップで、Windows アイコンを右クリックし、[アプリと機能] を選択する。
2. [関連設定] で、[プログラムと機能] をクリックする。
3. [Windows の機能の有効化または無効化] をクリックする。
4. [Windows ハイパーバイザープラットフォーム] を選択する。
5. Windowsを再起動する。

ファイルの圧縮・解凍

Lhaplus（ラプラス）

マインドマップ

XMaind

クラウドストレージ

Google One（Googleドライブ）

こちらのパーソナル（バックアップと同期）をダウンロード

Notion

All-in-one workspace

BGM

Spotify

オフィス

LibreOffice

あまり使わないからインストール時にクイック起動は外す（カスタムインストールにて）

Posted by pitang1965

開発環境のメモ

目次

1. ハードウェア

PC：GALLERIA XF

2. OS ： Windows 10 Pro

3. ブラウザ

Google Chrome

4. IME

5. エディタ

Awesome Flutter Snippets（Flutterの関数やクラスで使うスニペット及びショートカット）

DotENV （.envの文法のハイライト）

ESLint （JvavaScriptの構文チェック）

Flutter（Flutterサポート及びデバッガ）

Japanese Language Pack for VS Code（VSCodeを日本語化）

Live Server （ページを自動リロードする開発ローカルサーバー）

Mithril Emmet （HTML等の入力補完）

PlantUML （テキストファイルでUML描画）

TSLint （TypeScriptの構文チェック）

vscode-spotify （VSCode内でSpotifyを使用）

設定

オンラインIDE

6. SSHキーの設定

7. バージョン管理

8. シェル

Git Bash

9. デプロイメント

FTP、SFTPファイルアップロード

アプリケーション・デプロイメント・プラットフォーム

npmモジュール

10. コミュニケーション

WordPress

11. JavaScript関連開発

webpack.config.js の設定例

その他コンポーネント

12. データベース

MongoDB Atlas 及び MongoDB Compass

PostgresSQL

13. API

Insomnia Core for Windows

14. テスト

15. デザイン

プロトタイピング

カラーピッカー

Gifアニメの作成

16. モバイルアプリ開発

Visual Studio Codeの設定

Android開発者登録方法

インストールの確認

Android emulator

17. WSL

18. サーバーレス

19. 仮想化

20. Fitbit開発

21. Python

22. その他

Hyper-Vの有効化

Windows Hypervisor Platformの有効化

ファイルの圧縮・解凍

マインドマップ

クラウドストレージ

Google One（Googleドライブ）

BGM

オフィス