カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-2

環境構築(Mac)

本パートは、マークダウンエディタを開発するための環境構築を行います。

Google Chrome のインストール

本教材では Google Chrome の最新版を動作環境にしています。
それ以外のブラウザは差異が出る可能性ありますので、Google Chrome を使用して開発を進めてください。

  1. 公式サイトにアクセスし、インストーラーをダウンロードします。
    Google Chrome Website

  2. googlechrome.dmg というファイルがダウンロードされているので、ダブルクリックして開きます。
    Finder

  3. Chrome アイコンを Application ディレクトリにドラッグ&ドロップすればインストール完了です。
    Drag&Drop

Node.js のインストール

Node.js は(ブラウザではなく)PC環境で動く JavaScript 環境です。
※本教材ではそれ以上の知識は必要ありませんが、より詳しく知りたい方は
Wikipedia
を読みながら、知らない言葉を深堀りしていきながら深めていくと良いです。

Node.js は最新版と推奨版の2種類があります。
基本的に推奨版を使用するとトラブルが少ないです。
本教材でも推奨版を使います。

インストール方法はいくつかあります(※1)が、今回は公式サイトからインストーラーをダウンロードする方法を紹介します。

  1. 公式サイトにアクセスし、インストーラーをダウンロードします。(※2)
    Node Website

  2. node-v14.16.1.pkg (バージョンによって少しファイル名は変わります)というファイルがダウンロードされているので、ダブルクリックして開きます。
    Finder

  3. インストーラーに従ってインストールします。
    install_1
    install_2
    install_3
    install_4
    install_5
    install_6

  4. 正しくインストールできているか、ターミナルを開きコマンドで確認します。バージョン番号が正しく表示されれば完了です。
    (インストールするバージョンによって多少異なりますが 12.X.X の形式で表示されれば問題ありません)

bash
1
Copied!
$ node --version
text
1
Copied!
v14.16.1
  1. Node.js をインストールするとパッケージマネージャーの npm も同時にインストールされています。
    以下のコマンドで確認しましょう(こちらもインストールするバージョンに多少異なりますが、バージョン番号が表示されれば問題ありません)
bash
1
Copied!
$ npm --version
text
1
Copied!
6.14.12
  1. npm コマンドを最新化しましょう。npm の最新は 7.x (2021/05時点)ですが Node.js に同梱されているバージョンは v6.x と古いです。
    以下のように npm コマンドで npm 自身を更新できます。(こちらもインストールするバージョンに多少異なりますが、正常に実行されていれば問題ありません)
bash
1
Copied!
$ npm i -g npm
text
1234567891011121314
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! │ │ │ ╰────────────────────────────────────────────────────────────────╯
  1. 最後に npm コマンドが正しくアップデートされているか確認しましょう。
bash
1
Copied!
$ npm --version
text
1
Copied!
7.11.2
  • ※1: Homebrew を使ったり、Node.js のバージョン管理ツール(nodenv, nvm など)を使う方法などがあります。
  • ※2: または、こちら (Node.js v14.16.1)のリンクから直接ダウンロードすることも可能です。

Git のセットアップ

Mac はデフォルトで Git が入っています。(/usr/bin/git にあります)
以下のコマンドで、Git が使えることを確認しましょう。
(バージョンは多少違う可能性があります。またご自身で別途インストールされている方はそちらを使っていただいて大丈夫です)

bash
1
Copied!
$ git --version
text
1
Copied!
git version 2.24.1 (Apple Git-126)

Gitで操作する際はユーザー名とメールアドレスの設定が必要になるので、以下の2つのコマンドで設定しておきましょう。
(特にコマンド実行後に表示はありません)

bash
12
Copied!
$ git config --global user.name "あなたのユーザー名" $ git config --global user.email "あなたのメールアドレス"

最後に以下のコマンドで、設定が正しく反映されているか確認しましょう。
以下の2行が正しく表示されていれば設定完了です。

bash
1
Copied!
$ git config --global --list
bash
1234
Copied!
$ git config --global --list user.name=(あなたのユーザー名) user.email=(あなたのメールアドレス) (略)

以上で Mac で開発を行うための環境は完了です。

次では、GitHub の設定をし、これから作るマークダウンエディタを静的な Web サイトを手軽に公開する方法を解説します。

お疲れさまでした!

現在のパート (0)
全パート (35)
みんなで助け合おう!
現在のパートのディスカッション 全0件