[自分用] macOS 初心者のゼロからのWebsite開発 動作環境配置
前書き
この記事は，主に自分の記録・共有の為，作りました。
「分からないところがあっても進める」の感覚でいきましょう。
まだ完成していないから，新しいものを順次追加します!
質問など気軽に聞いてください!
具体的に何を勉強しますか?
初めの第一歩: 概念(最小限)を覚えよう
Terminal (ターミナル，制御端末): 設定画面の文字版! 文字を入力するだけで，いろんなことができる強力なもの。command + space で，terminalを入力で呼び出し。
三種の神器 (Web開発において)
HTML, CSS, 及びJavaScript/TypeScript (JS/TS)，よく聞こえる単語ですが，一体Web開発にてどんな役割を持っていますか?
簡単に説明すると，
- HTML: 「何がある」を記録する。例えば，どんな文字，どんな画像。
- CSS: 「どのような見た目」を記録する。例えば，書体(font)、大きさ、色とか。
- JS/TS: 「どんな動き」を記録する。例えば，押鈕(button)を押すと，どんなことが起こりますか? 新しい文字が現れますか? それども今編集しているものを保存しますか?
気になる人はこちらの文章を見てみよう。
必要なものを一気に装入 (install)
順番に進んでください。
1. XCode Command Line
これは，macOS開発に使える殆どのsoftwareの基盤になっています。
install手順: Terminalでgitを実行。何かが出たらあれをclickして，あれの指示に従ってinstallします。
成功したかどうかが分かりません
Terminalでgit --versionを執行。git version xxxのようなものが出たらもう大丈夫。
「今の状況が分からない」と思ったら，command + qで一旦Terminalを終了してから，もう一回立ち直しましょう。
今後も，この--versionをつける方法で，装入成功かどうかを確かめよう。Terminalの挙動が変だと思ったら再起動しよう。
そもそも`git`は何?
一言で言えば，書いたcodeをこまめに記録するもの。できるものとしては，万が一bugがありましたら，前の記録まで戻れることですね。もっと詳細な仕組みを興味がありましたらどうぞ:
2. brew
これは所謂Package manager. 新しいものをinstallする時結構使えますからお勧めします。
install手順: https://brew.sh/ に参照。
Package・Package Managerはなんですか?
参照 (全部読まなくても大丈夫，むしろ全部読むと混乱するかもしれません😨):
3. nodejs
これは，Websiteを作るときに必要不可欠です。
install手順: Terminalでbrew install node.
4. pnpm
これは，NodeのPackage Managerです。
Node Packageは，websiteを作るときに使うものです。
pnpmはbrewと違っています。
install手順: npm install -g pnpm (-gはglobalの意味で，つまり「commandとして使えるように用意します」ということです)。
よく`npm`を見かけますが，これと`pnpm`は何ですか?
一言で言えば，同じことをやらせる時，pnpmはnpmよりもっと安心，もっと速く、使う空間(storage)がもっと少ない，という利点がありますね。
-
npmは，Node Package Managerというものです。 -
pnpmは，Performant NPMで，あるべき機能はもちろん，性能を強化して，「npmあるある」問題を解決してくれる，後発のものですね。
参考になれる記事:
実績としては，「幽霊依存」(Phantom Dependency)などの，npmならではの問題を気つかない間に解決できますね。興味のある人はこちらの記事を読んでみてくださいね:
`brew`との違いは?
これもやってください
GitHub
gitには，GitHubと連動することがおすすめです。自分が書いたものをnetに保存・共有することで，自分のPCだけで作業するよりいいことがある。
開発者はほぼみんなこれを使っていますよ。
こちらから登録してみてください。
なんの利点がありますか?
例えば，他の人に共有したい時は，codeを丸ごと相手に投げることより，簡単のlink一つでできます。
他にも，もし作りたいsiteがみんなの役に立てるなら，不具合を見つかった修復してくれる人もいますよ。
「うっかりcodeを無くしました!」という時も，netから復旧できますね。
ちなみに，「GitHubにupload
Discussion