【初心者向け】 M1 Macでのプログラミング学習のための初期設定

「ついに念願のM1 Macを購入！これからバリバリプログラミング学習するぞー！」とお思いの皆さん。いいですね。マシンが新しくなったらサクサク動いて、きっとプログラミング学習もはかどると思いますよ。
でも、プログラミング学習に入る前にちょっと面倒くさいのが、プログラミング学習に適した環境の構築や設定ですよね。特に、初心者のうちは「どうやって環境構築をすればいいんだっけ？」って思いますよね。私も思いました。

というのも、随分前にプログラミング学習環境を整えたので、どうすればいいか、すっかり忘れていたからです。そこで、改めて調べて環境構築と初期設定をしました。ですので、その際にした初期設定を書いてみたいと思います。将来の自分のためでもあります。なお、私もプログラミング学習初心者ですので、イマイチな設定もあるかもしれませんがご容赦ください。

この記事ではPHPやRubyのようなローカル開発環境の構築までは扱いません。もっと手前の、HTMLやCSSの学習を始めようという段階の設定方法です。

Google Chromeをインストール

MacにデフォルトでインストールされているブラウザはSafariというブラウザですが、プログラミング学習にはGoogle Chromeというブラウザのほうが向いています。そこで、Google Chromeをインストールしていきます。手順は以下のとおりです。

• Safariに「グーグルクローム」などと入力して検索
• 「Google Chrome」のページへ行く
• 「Apple プロセッサ搭載の Mac」を選択
• 画面の指示に従ってダウンロード
• ダウンロードしたファイルをクリック。
• 出てきた「Google Chrome.app」を「アプリケーション」フォルダに移動。
• 「アプリケーション」フォルダ上で「Google Chrome.app」をクリック。Google Chromeが開く。

Google Chromeはいち早く Apple シリコン（Apple プロセッサ）に対応してくれました。ありがたいですね。

Visual Studio Codeをインストール

Visual Studio Code（VScode等とよく略される）をインストールします。コードエディタといって、コードを書いていくためのものです。手順は次のとおりです。

• 「vscode」などで検索
• ダウンロードページに行く
• 今は「Apple Silicon」と、下に小さく書いてあるのをダウンロード。
• ダウンロードしたZipファイルをクリック。
• 出てきたフォルダを「アプリケーション」フォルダに移動。
• 「アプリケーション」フォルダ上で「Visual Studio Code」をクリック。Visual Studio Codeが開く。

「Apple Silicon」という項目があったのでそれをダウンロードしました。こちらもApple シリコンに対応してくれているみたいですね。ありがたや。

Visual Studio Codeの設定　日本語にする

デフォルトでは英語です。教えてくださる方が英語の画面で教えてくださる、とか、英語に慣れたい、という方はこのままでいいですが、日本語にした方が楽だと思う方は日本語にしましょう。私も日本語にしました。手順は以下のとおりです。

• 左端の正方形が四つ並んでいるアイコンをクリック。
• 検索窓に「Japanese」などと入力。
• 「Japanese Language Pack for Visual Studio Code」というのが出てくるので「Install」をクリックしインストールする。
• 右下の「Restart Now」というボタンをクリック。
• 日本語になる。

Files: Auto Save を「afterDelay」にする

デフォルトでは、「Files: Auto Save」は「off」になっています。これを「afterDelay」にすると、自動で保存してくれるようになります。

これによって次のようなメリットがあります。

• 万一、途中で作業がリセットされても保存されていて安心。
• コードを変更してブラウザで確認する前に、コードを保存する手間が減って時間短縮になり、学習効率が上がる。

何秒で保存されるかというと・・・

デフォルトでは1秒（＝1000 ms＝1000ミリ秒）で保存されます。ですから、ほぼリアルタイムで保存されるってことですね。この保存されるまでの時間を変更することもできますよ。私はデフォルトの1秒で使っています。

Editor: Font Sizeを「12」から「14」にする

「Editor: Font Size」が、デフォルトでは「12」だけど、人によっては若干小さく感じる場合があるので、「14」にするのが見やすくなっておすすめです。まだ初心者だからそんなにたくさんコードを書くこともないので、これくらいの大きさでもいいんでしょうね。大きすぎると思うようになったらまた自分が使いやすいように調整したいと思います。

ちょっとの違いだけど、目の疲れが軽くなりそうです。

Editor: Tab Sizeを「4」から「2」にする

「Editor: Tab Size」は、「Tab」ボタンを押したときにどれくらい空白が入るか、という設定です。人によって好みがあるそうです。デフォルトでは「4」ですが、私は「2」にしておきました。

こうしておくと、字下げが多くなったときでも横に広くなりにくくて画面を有効に使えそうです。

Editor: Word Wrapを「off」から「on」にする

Editor: Word Wrapを「off」から「on」にしておくと、行を折り返して表示してくれます。

例えば、HTMLとCSSを横に並べて表示した場合など横幅が狭くなったときにも自動的に折り返して表示してくれるから見やすくなりそうです。

Editor: Font Familyでプログラミング用フォントに設定する

空白が半角か全角か、ひと目で分かる便利なフォントがあります。このフォントに設定すると空白の入力ミスによる失敗が少なくなるので、初心者の方に特におすすめです。

設定する手順は次のとおりです。

• Google Chromeなどのブラウザで「ricty diminished」などとと打ち込んで検索。
• 「GitHub – edihbrandon/RictyDiminished: Ricty Diminished …」のように、GitHubのサイトの中にあるRicty Diminishedのページが出てくるのでクリックしてそのページに行く
• 右側にある「Go to file」をクリック。
• 「RictyDiminished-Regular.ttf」をクリック。
• 「Download」ボタンをクリックしてダウンロード。
• クリックするとフォントが開く。
• 「フォントをインストール」をクリック。
• Visual Studio Codeへ行き、「Editor: Font Family」のデフォルトの
  「Menlo, Monaco, ‘Courier New’, monospace」を全部消して
  代わりに「Ricty Diminished」と入力。

そうすると、こんな風に、全角空白が○のような表記になってわかりやすくなります。

上の写真の例は、「全角空白5個・半角空白5個・全角空白5個・半角空白5個」を入力した画面です。全角空白の部分が○のように表記されている一方、半角空白の部分は何も表示されていません。

これにより、全角で空白を打ってしまったときも、全角で空白を打った、とわかるので、間違いを見つけやすくて便利です。

特に、コメントを日本語で付けたりした後とかにうっかりしやすいかも、と思うので助かります。

Editor: Render Whitespaceで「selection」を「all」にする

こちらは半角空白に「・」のような黒い丸ちょぼを表示するための設定です。

上の画像は、先程と同じく「全角空白5個・半角空白5個・全角空白5個・半角空白5個」を入力した画面です。半角空白にも「・」がつきましたね。これで、半角空白もわかりやすくなりました。

その他豆知識

設定画面へのショートカットを覚えておくと便利

⌘（command）+ , (カンマ）

起動時に自動的に立ち上がってくる「ようこそ」というタブのウェルカム画面を開きたくない場合は?

「起動時にウェルカム ページを表示」のチェックを外しましょう。

まとめ

いかがでしたでしょうか。せっかくM1 Macを買ったのですから、初期設定は早く済ませて早くプログラミング学習に取り組みたいですね。

ちょっと面倒くさい設定もありましたが、今回ご紹介した設定を最初にしておけば、今後のプログラミング学習でのつまづきが少しは減るのではないかと思います。

この記事が何らかの参考になれば嬉しいです。

読んでいただいてありがとうございました。