前のパートに戻る 完了して次のパートへ  

  0-2 開発を進める上で必要なツール(Mac)

このパートでは開発を進める上で必要なツールを準備します。ここで紹介しているツールは筆者のおすすめであり、ご自身で慣れているツール等を既にお使いであればこのパートは読み飛ばしても構いません。

※)今回のパートは PC が Mac の方を対象としています。

今回準備するツールは次の 3 点です。

  • Chrome(ウェブブラウザ)
  • Visual Studio Code(テキストエディタ・ターミナル)
  • Sequel Pro(データベース GUI クライアント)

Chrome


Chrome は Google が開発したウェブブラウザです。

Chrome のインストール

お手持ちのウェブブラウザ(Safari・Firefox など)からChrome の公式サイトにアクセスして Chrome をダウンロードします。

Finder を開きダウンロードされた googlechrome.dmg をダブルクリックして展開します。 設定がデフォルトのままの場合、 googlechrome.dmg はダウンロードフォルダに配置されます。ダウンロードフォルダを開くには Finder 上で option + command + L のショートカットキーを押します。もしダウンロードフォルダに見つからない場合は、お使いのウェブブラウザの設定を見てダウンロードしたファイルがどこに配置されるかを確認して探します。

展開後に表示されるポップアップ上で Chrome のアイコンをドラッグ&ドロップしアプリケーションフォルダへと移動させます。

Finder を開き command + shift + A のショートカットキーを押すとアプリケーションフォルダに移動します。 Google Chrome.app を探してダブルクリックすると Chrome を起動できます。

Visual Studio Code


Visual Studio Code (以下 VSCode)は Microsoft が開発したオープンソースの無料テキストエディタです。動きが軽快で拡張性も高く人気を集めています。

VSCode のインストール

VSCode の公式サイトから VSCode をダウンロードします。

Finder を起動してダウンロードフォルダ(option + command + L)の VSCode-darwin-stable.zip をダブルクリックして展開します。

展開してアプリケーションが取り出せたら、ドラッグ&ドロップでアプリケーションフォルダに移動します。

アプリケーションフォルダから Visual Studio Code を探しダブルクリックすると VSCode を起動できます。


拡張機能のインストール

VSCode には様々な拡張機能が公開されており、上手に使えば開発を効率的に行うことができます。

今回は次の 3 つの拡張機能を導入します。

  • Japanese Language Pack for Visual Studio Code
  • Go
  • Prettier - Code formatter

拡張機能をインストールするには、まずサイドバーのアイコンをクリックして拡張機能タブを開きます。次に上部のバーに名称を入力して拡張機能を検索します。拡張機能が見つかったら Install ボタンよりインストールします。

拡張機能のインストールが終わったら VSCode の各種設定をしていきます。


日本語化

拡張機能 Japanese Language Pack for Visual Studio Code をインストールした状態で VSCode を再起動すると日本語モードになります。

再起動する際はウィンドウ左上の × ボタンではなく、ヘッダーメニュー > Code > Quit Visual Studio Code からアプリを終了して再度起動するようにします。



設定ファイルの編集

VSCode 上で command + , のショートカットキーを押すと設定タブが表示され、ここで各種設定を行うことができます。


ただし今回は設定の項目が多いので、設定内容が書き込まれたファイルを直接編集して各種設定を行います。

設定ファイルを開くには、まずは command + shift + P でコマンドパレットを表示します。次に open settings json で絞り込みをかけ、Preferences: Open Settings (JSON) を選択します。

settings.json というファイルが開かれるので、中身を次の内容に書き換えて保存(command + S)します。

{
  "editor.formatOnSave": true, // 保存時に自動でコード整形
  "editor.tabSize": 2, // タブのサイズをスペース 2 つ分
  "html.format.endWithNewline": true, // html 保存時の最終行に改行を挿入
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features" // htmlのフォーマッターを指定
  },
  "prettier.disableLanguages": ["html"], // html の場合はコード整形に prettier を使用しない
  "prettier.singleQuote": true, // JavaScript の文字列はダブルクォートではなくシングルクォート
  "prettier.printWidth": 120, // 自動改行の目安は 120 文字
  "go.buildOnSave": "off", // ファイル保存時に自動でビルドを実行しない
  "go.installDependenciesWhenBuilding": false, // ビルド時に自動で依存パッケージをインストールしない
  "go.lintOnSave": "file", // 保存時に Go ソースコードの静的解析を実行する
  "go.formatTool": "gofmt", // Go の フォーマッターに gofmt を採用
  "go.useLanguageServer": true, // 関数や構造体の定義をクイックヒントとして表示する
  "files.trimTrailingWhitespace": true // 行末尾の不要なスペースを自動で削除する
}

設定ファイルの編集が終わったら VSCode を再起動して設定を反映させます。


code コマンドのインストール

code コマンドをインストールするとコマンドラインから VSCode アプリを立ち上げられるようになります。

インストールするには、 command + shift + P でコマンドパレットを開き、shell code と入力します。絞り込み結果に Shell Command: Install 'code' commmand in PATH が表示されたらクリックしてインストールします。


Sequel Pro


Sequel Pro は MySQL 用のデータベース管理 GUI(SQL クライアント)です。

Sequel Pro のインストール

Sequel Pro 公式サイト から Sequel Pro をダウンロードします。

Finder を開き sequel-pro-x.x.x.dmg をダブルクリックしてアプリケーションを取り出します。

アプリケーションが取り出せたら、ドラッグ&ドロップでアプリケーションフォルダにコピーします。

議論

0 質問

このコースの評価は?