Mac Proをクリーンインストールしたので
INDEX
一番最初の記事に書きましたけど、まだまだ現役で頑張ってもらおうと7年前に購入したMac Proをクリーンインストールし直して最新OSのMacOS Montereyをインストールしました。最近はMacBook Proばっかり使っているので出番少なかったんですが、やっぱりまだまだこの子にも頑張ってもらいたい。そういうこで新たにインストールするものなどありました。
テキストエディタは長年使ってきたATOMから2年くらい前にVS Codeに乗り換えてます。これはクラウドで設定の同期できるので環境整えるのも簡単。MacBook ProのほうにはまだATOMも残しているんですけど…もうプラグインの更新もほぼ止まった状態だしサポートしなくなったものもたくさん。この際さよならです。気分的にはすごく淋しいですけど。
だいたい私はPCに向かってる間ではテキストエディタってほぼ開きっぱなし。一日をともにする時間が一番長いかも。今回はエディタじゃないけどIDEのJetBrains社製のPhpStormの話を書くことにします。
HTMLにはWebStorm WordPressやDrupalのThemeにはPHPStorm
Web用のCSSを用意するときに今ではSCSSで書くことが多くなりましたね。SCSSはご存じのようにcssにコンパイルしてからじゃないとWebに反映されません。VS Codeには拡張機能でこのコンパイルをしてくれるものがあります。実際私も使ってみたこともありますけど、実は…PHPで構築されたWordPressやDrupalのThemeを弄るためにJetBrains社製のPhpStormがすごくよくて。そしてこれでSCSSをコンパイルまでやれるんです。
その昔はEclipseを使ったりしてた時期もあります。無償でいろいろできるしありがたかったけど…重たくてまだSDDが搭載されていないマシンでは起動させるのが面倒くさかったのね。で、それでテキストエディタでチャカチャカ終えてしまうことも多かったんですよ。コンパイルのいらないCssの時代ならそれで問題なかったわけ（テキストエディタでも拡張機能でコンパイルできます）
しかし…JetBrainsさんの製品に出会ってからはすっかり虜です。そして時代はSassの時代へと変わってきています。なのでこっちのMacでもPhpStormでSCSSのコンパイル環境を整えます。
SassコンパイルはNode.jsで使えるように整えます
もともとMacBppk Proでやったことを思い出しながらお世話になるベースのNode.jpをローカル（自分のパソコンのことよ）にインストールします。
一応現行のバージョンを確認しにサイトを訪問。ターミナルのコマンドラインからインストールするつもりだけど知っておくとインストール後の確認時に便利だから。
なんか久しぶりにこのサイトを訪れたらなんだか素敵な配色！ああ、私のMacがダークモード環境だからね。今時はこういうクライアント環境に合わせたWebのデフォルト配色をするところが増えましたね。私も近いうちにこの百聞をダークモードに対応させてみようかな。
そんなことにもワクワクしながらでは実際にインストールしていきましょうか。
まずはパッケージ管理のnvmをインストールしてからね
ただコンパイルするだけなら上記のNode.jsのサイトからインストールパッケージ.pkgをダウンロードしてインストールするのが簡単。SassのコンパイルのためだけならこれでOKです。
ただ、今回MacProなのでnvmを使ってパッケージのバージョン管理をする一手間かけておきます。
なのでターミナルからのコマンドラインでインストールをしていきますよ。
先にNode.jsがインストールされていか確かめることが大切。
$ node -v
-bash: node: command not found #この表示ならインストールされていないってこと
もしバージョンが表示されてしまったら削除してからじゃないとnvmでの管理はできないのでアンインストールするかそのまま使うことにして「Node.jpに付属のnpmからSassをインストール」まで進んでくださいな。まぁ、その場合でもバージョンを確認して必要に応じてバージョンアップすれば良いかも。
Node.jsをアンインストールする手順
今回アンインストールの手順もちょっと調べたので（やったことがないから）備忘録として書いておきます。
1．まずはnpmをアンインストール
$ npm uninstall -g npm
$ rm -rf .npm \
> node_modules
2．パッケージ版でインストールした場合とコード版インストールした場合と2つ
//.pkgでのインストールの場合
$ lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \
> | while read i; do
> sudo rm /usr/local/${i}
> done
$ sudo rm -rf /usr/local/lib/node \
> /usr/local/lib/node_modules \
> /var/db/receipts/org.nodejs.*
$ which node
/usr/local/bin/node //node実行ファイルの存在場所を確認して
$ rm -rf /usr/local/bin/node \
> node_modules
nvm を使ってNode.js を Mac にインストール
nodeのバージョン管理をしてもらうために今回はnvmを使います。MacBookProはHomebrewでnodebrewからnodeという構成だったけど。実はもうMacProにもHomebrewはインストール済みですけどどうやらnvmのオフィシャルサイトを見るとHomebrewはサポート外だとか。
それからOS X 10.9以降ではXcodeの手動インストールをしていない場合失敗すとか…よってこれもXcodeもAppStoreからインストールしておきましょう。
.bash_profileがない場合はつくります。以下のように。
touch ~/.bash_profile
オフィシャルによると、nvm は更新するために .zshrc を検索するけど、.zshrc はデフォルトではインストール（作成）されていないので、 touch ~/.zshrc で作成してインストールスクリプトを実行しなさいと書いてある。
じゃぁ、その通りに…
touch ~/.zshrc
いよいよnvm をインストール。2022-06-01現在の一番新しいv0.39.1を使います。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
ターミナルの最後から数行に、ターミナルを閉じて再起動させてすぐにnvmを使うか、または…
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
これを実行しろと書いてあるので、今回はsourceコマンドを使って作成した.zshrc に反映させておきましょう。
source ~/.zshrc
以上でnvmが使えるようになるはず。本当にインストールできたかどうか確かめるためには…
command -v nvm
nvm
command -v nvm
returnしてnvmと表示されればインストール成功です。
いよいよnvmからNode.jsをインストールします
最近バージョンをリクエストしてインストールしました。
nvm install node
これでOK。確かめたいならnode -v でちゃんとバージョン表維持がされればOKですよ。
次はnpmからSassをインストール
npmはNode.jpと一緒にインストールされています。
これ、Node.jpのパッケージをを管理するツールね。そもそもNode.jpでできることってとっても多くて、たくさんのパッケージが用意されてるから。今回はここにはSassを導入してコンパイルに使うのが目的。Sassだけをグローバルにインストールさせましょう。
npm install -g sass
nvm経由でnodeを入れたからこれで大丈夫だったけど、もし単独でNode.jsを入れた場合などは権限がうるさくなったMacに叱られるので”sudo”つけて渡してやると大丈夫。Passwordを聞いてくるので自分のログイン時のPasswordで対応しましょう。
ターミナル使用時のちょこっと余談を
ターミナルを使うことを教えるときに
「Passwordの入力してね」
って言うと
「Passwordが入力できません」
って言われることがよくあります。あのね、Passwordは表示されないの。でも正しく入力してエンター（リターン）を押せば大丈夫なの。でも教える時って本当に丁寧に言わないといけませんね。誰でも初めての時は解らないことがたくさん。まぁ、でもこういうSassのコンパイル一つにしてもVS Codeの拡張機能で十分だって人も多いよね。ただ、ツールを使いやすくするのはユーザーの自分。そういう手間を惜しまずに環境を整えていきたいと思います。
ということで前半はこのベース環境まで。次回PHPStormと連携させましょう。
