Chapter 02

開発準備 (macOSユーザ向け)

wkb
wkb
2021.01.29に更新
このチャプターの目次
  1. macOSのバージョンについて
  2. 基本操作について
  3. ターミナルについて
    1. ターミナルの開き方
  4. MySQLについて
    1. MySQLのインストール
  5. Node.jsについて
    1. Nodebrewのインストール
    2. Node.jsのインストール
  6. Google Chromeについて
    1. Google Chromeのインストール
    2. Google Chromeの開き方
    3. デベロッパーツールの開き方
  7. Visual Studio Codeについて
    1. Visual Studio Codeのインストール
    2. Visual Studio Codeの開き方
    3. Visual Studio Codeの日本語化
    4. Visual Studio Codeの操作方法
  8. Git

本章では、本チュートリアルをmacOSで進める上で必要な開発環境の整備や、操作方法の学習を行います。

macOSのバージョンについて

本チュートリアルは以下のバージョンを対象としています。

  • macOS Catalina

上記以外については動作の保証ができかねますので予めご了承ください。

基本操作について

本チュートリアルを進める上で必要な基本操作を確認しておきましょう。

  • コピー
    コピーしたい部分をマウスで選択し、commandキーとCを同時に押す。

  • ペースト (貼り付け)
    ペーストしたい部分にカーソルを合わせ、commandキーとVを同時に押す。

  • ドラッグ&ドロップ
    対象 (ファイル等) をクリックして選択し、クリックしたままカーソルを (対象を置きたい場所に) 移動させ、クリックを離す。

ターミナルについて

PCを命令文 (コマンド) によって操作するために、macOSにはターミナルというアプリケーションが備わっています。
本章も含め、本チュートリアルではターミナルを用いた操作が多く登場します。

ターミナルの開き方

  1. 画面下部にあるDock (アプリケーションアイコンが並ぶ場所) にある「Launchpad」をクリックして開く
  2. 画面上部の検索欄に「ターミナル」と入力する
  3. ヒットしたターミナルのアイコンをクリックする

Dockにターミナルのアイコンが表示されるため、右クリック ->「オプション」->「Dockに追加」でDockに追加すると便利です。※次回からDockにあるアイコンから開けます。

通常は上記のように開きますが、本チュートリアルでは特定のフォルダをターミナルで開く場面があります。
この場合はFinder (ファイルやフォルダを管理するアプリケーション) で特定のフォルダに移動し、そこからターミナルを開きます。
cdコマンドを扱える方はそちらでも構いません。

Finderからターミナルを開くためには以下の設定が必要です。

  1. 画面左上のリンゴのマークをクリック ->「システム環境変数」->「キーボード」->「ショートカット」->「サービス」と進む
  2. 「フォルダに新規ターミナル」、「フォルダに新規ターミナルタブ」にチェックを入れる

Finderからターミナルを開く方法は次のとおりです。

  1. Dockにある「Finder」をクリックする
  2. 開きたいフォルダが表示されるところまで移動する
    例. デスクトップフォルダにあるtestフォルダをターミナルで開く場合
  3. 開きたいフォルダを右クリック ->「サービス」->「フォルダに新規ターミナルタブ」を押下する
    次のようにターミナルが開きます。

このように % の前にフォルダ名 (この例ではtest) が表示されます。

「フォルダに新規ターミナル」と「フォルダに新規ターミナルタブ」の違いは以下の違いがあります。
好きな方で開いてください。

  • 「フォルダに新規ターミナル」
    ターミナルの新規のウィンドウ(画面) が開かれる。

  • 「フォルダに新規ターミナルタブ」
    既に開いているターミナル画面がある場合、その中にタブとして開かれる。

本チュートリアルでは、ターミナルやその画面のことをコンソールやコンソール画面としています。
「コンソールで、○○フォルダを開いてください」とあれば、上記の操作を行ってください。
特にフォルダの指定がない場合は通常の開き方でターミナルを開いてください。

また、「以下のコマンドを実行してください」とあれば、以下のように、そのコマンドをターミナル画面内の % の後ろにコピー&ペーストし、enterを押下してください。

% コピーしたコマンド

コマンドによっては実行に時間がかかるものもあります。
以下のように、コマンドを実行後、ターミナル画面に再度%が表示されるとコマンドの実行が完了したことになるため、それまでは待機してください。

% コマンド
...
...
...
...
...
%

MySQLについて

4章以降で扱うMySQLについての事前準備をします。
MySQLとは、については4章を参照してください。

MySQLのインストール

  1. MySQLが入っているかを確認する
    以下のコマンドを実行する。

    mysql --version

    以下のようなメッセージが表示された場合は、次の「Homebrewが入っているか確認する」に進んでください。

    zsh: command not found: mysql

    以下のようにMySQLのバージョンが表示された場合は、「MySQLを起動する」に進んでください。

    mysql  Ver 8.0.21 for osx10.13 on x86_64 (Homebrew)

  2. Homebrewが入っているかを確認する
    ※HomebrewとはmacOSのパッケージ管理ソフトウェアのこと。
    以下のコマンドを実行する。

    brew -v

    以下のようながメッセージ表示がされた場合は、次の「Homebrewのインストール」に進んでください。

    zsh: command not found: brew

    以下のようにHomebrewのバージョンが表示された場合は、「MySQLのインストール」に進んでください。

    Homebrew 2.7.5
    • Homebrewのインストール
      1. Homebrewのインストール
        以下のコマンドを実行する。
        /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
        1. Passwordの入力を求められたら、PCのパスワードを入力する
        2. 「Press RETURN to continue or any other key to abort」が表示されたらenterを押下する
      2. Homebrewのバージョン確認
        以下のコマンドを実行する。
        brew -v
        以下のようにHomebrewのバージョンが表示されれば問題ありません。
        Homebrew 2.7.5

  3. MySQLのインストール
    以下のコマンドを実行する。

    brew install mysql

  4. MySQLのバージョン確認
    以下のコマンドを実行する。

    mysql --version

    以下のようにMySQLのバージョンが表示されれば問題ありません。

    mysql  Ver 8.0.21 for osx10.13 on x86_64 (Homebrew)

  5. MySQLを起動する
    以下のコマンドを実行する。

    mysql.server start

    以下が表示されれば問題ありません。

    Starting MySQL
 SUCCESS!

    尚、MySQLの停止は以下のコマンドで行います。(今は起動させたままにしてください)

    mysql.server stop

  6. rootユーザのパスワードを設定する
    以下のコマンドを実行する。

    mysql_secure_installation

    以降、y or n(Yes or No)の質問には全てyを押してください。

    パスワードの強度設定では0、1、2のどれかを選択します。※推奨は1のMEDIUMです。
    この次に設定するrootユーザのパスワードは、ここで設定したパスワードの強度に沿ったものにする必要があります。

    • LOW(0): 8文字以上
    • MEDIUM(1): LOWの条件+数字,アルファベットの大小文字,特殊文字をそれぞれ1つ以上
    • STRONG(2): MEDIUMの条件+辞書ファイルでの確認

    設定したrootユーザのパスワードは以降で使用するため、控えておいてください。

  7. MySQLにrootユーザでログインする
    以下のコマンドを実行する。

    mysql -u root -p

    パスワードの入力を求められるので、先ほど設定したrootユーザのパスワードを入力してください。

    以下のような表示になればログインできています。

    Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 119
Server version: 8.0.21 Homebrew

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

  8. ログアウトする
    mysql>の後ろにexitを入力して、enterを押下する。

    mysql> exit

    Byeが表示され、元のターミナル画面に戻ればログアウトできています。

Node.jsについて

2章以降で扱うNode.jsについての事前準備をします。
Node.jsとは、については2章を参照してください。

Nodebrewのインストール

  1. Nodebrewが入っているかを確認する
    以下のコマンドを実行する。

    nodebrew -v

    以下のようながメッセージ表示がされた場合は、次の「Nodebrewのインストール」に進んでください。

    nodebrew: command not found

    以下のようにNodebrewのバージョンが表示された場合は、「Node.jsのインストール」に進んでください。

    nodebrew 1.0.1

  2. Nodebrewのインストール
    以下のコマンドを実行する。

    brew install nodebrew

  3. Nodebrewのパスを設定する

    1. Nodebrewのパスを設定する
      以下のコマンドを実行する。

      echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

    2. 設定を反映する
      以下のコマンドを実行する。

      source ~/.zprofile

  4. Nodebrewのバージョン確認
    以下コマンドを実行する。

    nodebrew -v

    以下のようにNodebrewのバージョンが表示されれば問題ありません。

    nodebrew 1.0.1

Node.jsのインストール

  1. Node.jsをインストールするためのディレクトリ (フォルダ) を作成する
    以下のコマンドを実行する。

    mkdir -p ~/.nodebrew/src

  2. Node.jsのインストール ※安定版
    以下コマンドを実行する。

    nodebrew install-binary stable

  3. Node.jsのバージョン確認
    以下のコマンドを実行する。

    node -v

    以下のようにNode.jsのバージョンが表示されれば問題ありません。

    v14.15.4

Google Chromeについて

本チュートリアルで使用するWebブラウザはGoogle Chromeです。
Google Chromeの機能を用いる場面があるため、Google Chromeがインストールされていない場合はインストールを推奨します。

Google Chromeのインストール

  1. 普段使用しているWebブラウザ (Safari等) で、https://www.google.com/chrome/ にアクセスする
  2. 「Chromeをダウンロード」を押下する
  3. ダウンロードされた「googlechrome.dmg」というファイルを開く
  4. Google Chrome のアイコンを「アプリケーション」フォルダにドラッグ&ドロップする

Google Chromeの開き方

  1. Dockにある「Launchpad」をクリックして開く
  2. 画面上部の検索欄に「Google Chrome」と入力し、ヒットしたGoogle Chromeのアイコンをクリックする

DockにGoogle Chromeのアイコンが表示されるため、右クリック ->「オプション」->「Dockに追加」でDockに追加すると便利です。※次回からDockにあるアイコンから開けます。

デベロッパーツールの開き方

本チュートリアル中、Google Chromeのデベロッパーツールを利用する機会があります。
デベロッパーツールとは、表示されているWebページを構成しているデータ等を確認できるGoogle Chromeのツールです。

デベロッパーツールは以下の手順で開きます。

  1. Chromeを開く
  2. Chromeの画面内で右クリック -> 「検証」を押下する

Visual Studio Codeについて

本チュートリアルで使用するソースコードエディタはVisual Studio Codeです。
ソースコードエディタとはプログラムを書くためのソフトウェアです。
Visual Studio Code以外のソースコードエディタやIDEを使用しても全く問題ありませんが、もしこれらのソフトウェアを使ったことがない方はVisual Studio Codeをインストールしてください。

Visual Studio Codeのインストール

  1. https://code.visualstudio.com/ にアクセスする
  2. 「Download for Mac」をクリックをクリックする
  3. ダウンロードされた「VSCode-darwin-stable.zip」というファイルを開く
  4. Visual Studio Code のアイコンを「アプリケーション」フォルダにドラッグ&ドロップする

Visual Studio Codeの開き方

  1. Dockにある「Launchpad」をクリックして開く
  2. 画面上部の検索欄に「Visual Studio Code」と入力し、ヒットしたVisual Studio Codeのアイコンをクリックする

DockにVisual Studio Codeのアイコンが表示されるため、右クリック ->「オプション」->「Dockに追加」でDockに追加すると便利です。※次回からDockにあるアイコンから開けます。

Visual Studio Codeの日本語化

Visual Studio Code はデフォルトで英語表記となっています。
以下の方法で、日本語表示に切り替えることができます。

  1. Visual Studio Code の画面左側にあるサイドバーにある、□ マークで構成されているアイコン「Extensions」をクリックする
  2. 検索欄に「Japanese Language Pack for Visual Studio Code」を入力する
  3. Japanese Language Pack for Visual Studio Code の「install」をクリックする
  4. Visual Studio Code を再起動する

Visual Studio Codeの操作方法

  • フォルダ、ファイルの開き方

    1. 画面上部にある「ファイル」->「開く...」を押下する
    2. Finderが表示されるため、開きたいフォルダ、ファイルをクリックし、右下の「開く」を押下する

  • ファイルの作成方法

    1. 画面上部にある「ファイル」->「新規ファイル」を押下する

    「Untitled-...」という新規ファイルが作成されます。

  • ファイルの保存方法

    1. commandキーとSを同時に押す

    新規ファイル(Untitled-...)の場合はファイル名と保存場所を指定する必要があります。

    また、ファイルを編集した場合は保存を忘れないようにしましょう。

本チュートリアル中、「Visual Studio Codeで○○というファイルを作成し、xxフォルダに格納(保存)してください」とあった場合は以下の手順を行ってください。

  1. 画面上部にある「ファイル」->「新規ファイル」を押下する
  2. commandキーとSを同時に押す
  3. ファイル名(○○)と保存場所(xx)を指定する

また、本チュートリアル中の「ファイルを開いてください」は、Visual Studio Code (もしくはその他のソースコードエディタやIDE) で開いてくださいを意味しています。

Git

TBD