アプリを作ろう(2)：環境準備

・VSCodeの導入
・VSCodeの設定
・ワークスペースの準備

全ては環境を整えてから

まず大前提としてプログラミングは環境整備に多大な時間と労力を必要とします。
「早くアプリの作り方を教えて欲しい」
「細かいことなんで飛ばしてもいい？」
こういう声をよく聞きますが、環境を疎かにすると今後の開発の効率が下がるだけでなく、想定外のバグを引き込みデバッグに多大な時間を浪費します。
パソコンの性能と環境整備はケチらずにしっかりやりましょう。

Visual Studio Codeのインストール

開発ツールはMicrosoft社製のVisual Studio Code（VSCode）を使います。
もういまや、Windowsの人も、Macの人も、なんならLinuxの人もVSCodeで開発します。

VSCodeは下記のサイトからダウンロードできます。
https://code.visualstudio.com/download

ダウンロード後は指示通りインストールしてください。WindowsもMacもLinuxも対して難しくないはずです。

VSCodeの設定

まずは必要最低限でVS Codeの設定をします。
後でプラグインの導入等を実施していきますが、まずは標準の設定のみです。

まず最初にTabの設定をします。アプリを起動して左下の歯車ボタンを押します。現れたメニューの中で上から2つ目のSettingsを選びましょう。

出てきたテキストエリアに「Tab size」と打ち込みます。

表示されたEditor: Tab Sizeに2を入れましょう。（デフォルトでは4）

これはTabを押したときに入力されるスペースの数を設定しています。
Tab Sizeが4の場合、Tabを押すとスペースが4つ入力されることになります。
今後、ソースコードの左側にはTabがたくさん挿入されることになりますが、4だとどんどん右にソースコードが寄っていくので2ぐらいにしとくことがオススメです。
また、Markdownという記法では2が推奨されています。

プロを目指すために：キーバインド設定

プログラマーとしてプロを目指したい人はキーバインドの設定を変更します。こちらは詳しい解説を別の記事で公開予定です。

ワークスペースの準備

最後にプログラミングしていくワークスペースを準備します。
Windowsならドキュメント、Macなら書類の中にでもWorkspaceのフォルダを作成しましょう。別の場所でも構いませんが、デスクトップに置く人はあまりいません。

ワークスペースを準備したらVSCodeで開いてみましょう。
Fileを選んでOpen Folderを選択、先ほど作ったフォルダを選択します。Open Workspaceではありません。

Open WorkspaceはVS Codeの機能でWorkspaceを作ることが出来る機能です。大変便利ですがまずは単純にフォルダを開くことから始めます。

フォルダを開ければひとまず環境準備は完了です。
次はVue/Nuxtの動作に必要となるNode.jsのインストールに進みます。