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

設定

[ファイル] – [自動保存]をチェックする。
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にリアルタイムでコンパイルしブラウザをリロード

SSHキーの設定

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

Git for Windows

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

バージョン管理

以下などで使用するため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エージェントが実行されているかのは以下のコマンドでおこなう。

 ssh-add ~/.ssh/id_rsa

 eval "$(ssh-agent -s)"

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

 ssh-add -K ~/.ssh/id_rsa

Sourcetree

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

GitHub Desktop

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

シェル

Git Bash

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

PowerShell Core

6.2.1
バージョン確認方法

 PS> $PSVersionTable

デプロイメント

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)

コミュニケーション

Line

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

Slcak

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

WordPress

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

JavaScrit関連開発

Node.js

JavaScript をブラウザ外（サーバーサイドなど）で実行できる環境。npmを含む。
推奨版と最新版があるが、推奨版をインストール。
バージョン確認は以下

node --version

TypeScript

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

npm install -g typescript

バージョン確認は以下

tsc --version

Yarn

React

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

React Devloper Tools

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

Redux DevTools

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

live-server

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

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

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-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-experimental

gatsby new wordpress-gatsby https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental

gatsby-awesome-pagination

npm install --save gatsby-awesome-pagination

Bootstrap

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

npm i bootstrap

データベース

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からの使い方はこちら。

REST API

Postman

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

Insomnia Core for Windows

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

テスト

Jest

Mocha

デザイン

プロトタイピング

Adobe XD

カラーピッカー

Color Picker

スクリーンを対象としたスポイトツール HTML/RGB/HSV/Delphi形式などの色値を取得

モバイルアプリ開発

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の有効化が必要（下記参照）。

WSL関連

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

サーバーレス関連

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

仮想化

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

Python

Python 2.7のインストール

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

その他

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を再起動する。

Gifアニメの作成

ScrennToGif

ファイルの圧縮・解凍

Lhaplus（ラプラス）

アイデア

マインドマップ

XMaind

クラウドストレージ

Google One（Googleドライブ）

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

BGM

Spotify

オフィス

LibreOffice

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

Fitbit開発

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

Posted by pitang1965