教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
本パートは、マークダウンエディタを開発するための環境構築を行います。
本教材では Google Chrome の最新版を動作環境にしています。
それ以外のブラウザは差異が出る可能性ありますので、Google Chrome を使用して開発を進めてください。
公式サイトにアクセスし、インストーラーをダウンロードします。
googlechrome.dmg
というファイルがダウンロードされているので、ダブルクリックして開きます。
Chrome アイコンを Application ディレクトリにドラッグ&ドロップすればインストール完了です。
Node.js は(ブラウザではなく)PC環境で動く JavaScript 環境です。
※本教材ではそれ以上の知識は必要ありませんが、より詳しく知りたい方は
Wikipedia
を読みながら、知らない言葉を深堀りしていきながら深めていくと良いです。
Node.js は最新版と推奨版の2種類があります。
基本的に推奨版を使用するとトラブルが少ないです。
本教材でも推奨版を使います。
インストール方法はいくつかあります(※1)が、今回は公式サイトからインストーラーをダウンロードする方法を紹介します。
公式サイトにアクセスし、インストーラーをダウンロードします。(※2)
node-v14.16.1.pkg
(バージョンによって少しファイル名は変わります)というファイルがダウンロードされているので、ダブルクリックして開きます。
インストーラーに従ってインストールします。
正しくインストールできているか、ターミナルを開きコマンドで確認します。バージョン番号が正しく表示されれば完了です。
(インストールするバージョンによって多少異なりますが 12.X.X
の形式で表示されれば問題ありません)
bash1 Copied!$ node --version
text1 Copied!v14.16.1
bash1 Copied!$ npm --version
text1 Copied! 6.14.12
bash1 Copied!$ npm i -g npm
text1234567891011121314 Copied!/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
/usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
+ npm@7.11.2
added 60 packages from 23 contributors, removed 241 packages and updated 194 packages in 5.258s
╭────────────────────────────────────────────────────────────────╮
│ │
│ New major version of npm available! 6.14.12 → 7.11.2 │
│ Changelog: https://github.com/npm/cli/releases/tag/v7.11.2 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
bash1 Copied!$ npm --version
text1 Copied!7.11.2
Mac はデフォルトで Git が入っています。(/usr/bin/git
にあります)
以下のコマンドで、Git が使えることを確認しましょう。
(バージョンは多少違う可能性があります。またご自身で別途インストールされている方はそちらを使っていただいて大丈夫です)
bash1 Copied!$ git --version
text1 Copied!git version 2.24.1 (Apple Git-126)
Gitで操作する際はユーザー名とメールアドレスの設定が必要になるので、以下の2つのコマンドで設定しておきましょう。
(特にコマンド実行後に表示はありません)
bash12 Copied!$ git config --global user.name "あなたのユーザー名"
$ git config --global user.email "あなたのメールアドレス"
最後に以下のコマンドで、設定が正しく反映されているか確認しましょう。
以下の2行が正しく表示されていれば設定完了です。
bash1 Copied!$ git config --global --list
bash1234 Copied!$ git config --global --list
user.name=(あなたのユーザー名)
user.email=(あなたのメールアドレス)
(略)
以上で Mac で開発を行うための環境は完了です。
次では、GitHub の設定をし、これから作るマークダウンエディタを静的な Web サイトを手軽に公開する方法を解説します。
お疲れさまでした!