2020/9/17
WindowsからMacに変えたため、とりあえず行った初期設定を自分のメモとして残しておく
あくまで自分用の設定でこれからプログラミングの勉強と共に更新する予定のため、参考にはならないと思います。

①初期設定
このサイトを参考
https://matome.naver.jp/odai/2138629469334511401

②vscode　のダウンロード

③vscode　のプラグイン
Auto Rename Tag
Bracket Pair Colorizer
Code Spell Checker
CSS Peek
CSSTree validator
Debugger for Chrome
Easy Sass
HTMl CSS Support
HTML Preview
HTMlHint
htmltagwarap
indent-rainbow
intelliSence for Css class names in HTML
Japanese Language Pack for Visual Studio Code
Live Server
Path intellisense
Ruby
SFTP
VSCode Ruby
zenkaku

③vscode のショートカットキーの編集
設定→キーボードショートカット
→editor.emmet.action.balanceOut→⌘＋⇧＋A（好み）

④アプリクリーナーとショートカットのインストール
https://www.kashi-mo.com/media/63051/

（１）Macのコマンドを使って
自分が作成しているアプリのファイルの場所まで進む

（２）以下を入力してEnter
「gem list --local| grep cocoapods」

Cocoapodsのバージョンやファイルの一覧がでてきます。
（写真参照願います）

（３）cocoapodsのバージョンやファイル名が確認できたら以下を入力してEnter

sudo gem uninstall 「削除したいcocoapodsのファイル名」

僕の場合は８つのファイルをuninstallしました
（写真に赤線を引っぱっておきました）

以上です。

※「青」で塗りつぶしてあるところは
自分のmacの名前と　現在作成しているアプリのファイル名になります。

①ゴミ箱へ捨てたいファイルを選択
②command+delete

cf. windowsでは①＋delete でゴミ箱へ移動できますが
Macではdeleteの他に「command」が必要になります。

リモート作業が増えて、何かと「あーVPN繋がなきゃ」とかなるんですよね。
そして作業が終わってからVPNの接続を切り忘れる...

処理中だけVPNに繋がってくれてればいいのに...
そんなシェルを作りました

vpn

#!/bin/bash -eu

if [ $# == 0 ]
then
  echo 'vpn [on|off|pass "command"]'
  exit 1
fi

NETWORK_NAME=$(networksetup -listallnetworkservices | grep VPN)

off () {
  networksetup -disconnectpppoeservice $NETWORK_NAME
}
on () {
  networksetup -connectpppoeservice $NETWORK_NAME
}

case $1 in
  'off' )
    off
    ;;

  'on' )
    on
    ;;

  'pass' )
    on
    trap off exit
    eval $2
esac

使い方

※ 名前に「VPN」と入っているネットワークが1つしかない想定で、そのネットワークに接続するシェルになっています

1. 上記のシェルを vpn と名付けて、
2. chmod 744 vpn（実行権限を付与）
3. PATHが通っている場所においてください
   （私は自作シェル置き場($HOME/binなど)を作って、
   .bash_profileや.zshrcにexport PATH=PATH:$HOME/binと書いてあります）

例えば、Web開発をしていて、フロントはローカルで起動するけど、APIはVPNを繋いだ先にある場合。
$ yarn server でローカルサーバーが起動するときは、

$ vpn pass "yarn server"

これで、サーバー終了時にVPNも自動的に切れます。

trap

シェルの trap ~ exit という行でこれを実現しています。
exit のところは err なども指定できるので、任意の終了シグナルに応じて処理を設定できるはずです。（やってみてない）

ただ、強制終了(9)は受け取れないようで、例えば、サーバーを起動しているvscodeのウインドウをそのまま閉じると、設定した処理は実行されません...

きもち

本当は、文字列としてコマンドを渡すなんてしたくない...
何か良い方法があったら教えて下さい...

create-react-app アプリ名

でアプリを作り、いざ起動。

npm start

あれ、実行できない？？

以下エラー文。

Starting the development server...

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cycle@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cycle@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-09-10T15_49_19_237Z-debug.log

まずはいかに注目。

npm ERR! code ELIFECYCLE
npm ERR! errno 1
(以下略)

Google検索にエラー文を貼り付けてみたが、解決する方法が見つからない。。。。

次にいかに注目して検索。。。

dyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node
  Expected in: flat namespace

解決できそうな記事を発見！！

でも、

記事のエラー文
  Referenced from: /Users/bunnyxt/Projects/njauiot-frontend/node_modules/fsevents/build/Release/fse.node

実際のエラー文
 Referenced from: /Users/user/Documents/cycle/node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node

と微妙に異なっていて、うまく解決しない。。。

うーん困った。。。。

node_modules/webpack-dev-server/node_modules/fsevents/build/Release/fse.node

いっそfsevents以下のディレクトリを削除すればいいのでは？　との記事を発見。

実行。

解決！！

ついでに、HOSTが固定されていたので

unset HOST

これでサーバーの指定を解除。

この状態で再度

npm start

を実行。

プレビューがうまく表示されました！！！