開発環境のメモ

2020-01-19

ハードウェア

PC:GALLERIA XF

  • ドスパラで2019年6月に購入。22.9万円
  • CPU: Intel Core i7-9700K 3.60GHz, 8コア8スレッド
  • GPU: NVIDIA GeForce RTX 2070
  • メモリ:32GB
  • SSD: 500GB
  • HDD: 2TB

OS : Windows 10 Pro

  • バージョン:10.0.17763 ビルド 17763
  • 個人用に設定
  • 回復ドライブ
    • 32GB USBメモリ(あえてUSB2.0規格)

ブラウザ

Google Chrome

Brave Browser

IME:Google 日本語入力

エディタ

Visual Studio Code

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

Bracket Pair Colorizer

DotENV (.envの文法のハイライト)

ESLint (JvavaScriptの構文チェック)

Flutter(Flutterサポート及びデバッガ)

Japanese Language Pack for VS Code(VSCodeを日本語化)

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

Mithril Emmet (HTML等の入力補完)

PlantUML (テキストファイルでUML描画)

Prettier – Code formatter

  • 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

設定

  • [ファイル] – [自動保存]をチェックする
  • 設定の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

  • マークダウンエディタ

SSHキーの設定

  • 以下などで使用するためSSHキーを設定する。
    • Bitbucket
    • GitHub
    • Cyberduckを介した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以上払って登録しないと、毎回寄付をつのられる。

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

The Heroku CLI

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

Firebase

npmモジュール

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

コミュニケーション

Line

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

Slcak

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

WordPress

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

> 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.jsLibSassにバインドするライブラリ。
  • .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')
  }
}; 

その他コンポーネント

データベース

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()”と入力し、緑色のボタンをクリックするとバージョンが表示される。
Robo 3T

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”などとする。

REST API

Postman

  • HTTPリクエストを行うためのツールセットを提供することにより、REST 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の有効化が必要(下記参照)。

その他

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

アイデア

マインドマップ

XMaind

クラウドストレージ

Google One(Googleドライブ)

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

BGM

Spotify

オフィス

LibreOffice

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

Fitbit開発

Posted by pitang1965