NaCl5alt / html-stations

Railwayに用いるテンプレートリポジトリです。

TechTrain HTML/CSS/JavaScript Railway について

Railway では Git で自分が取り組んだ内容を記録するときに、自動でテストが実行されます。この際、Station の内容に即した実装になっているかを最低限のラインとして確認します。 テストが通れば Station クリアとなります。 クリア後、TechTrain の画面に戻り、クリアになっているかを確認してみてください。

初期設定

必要なツール

1. Node.js( 14.* ) [ 12.* , 16.* では動作しません]
2. Yarn

上記 2 つをインストールする必要があります。

インストール済みの場合

yarn install

のコマンドを実行し、すぐに問題に取り組み始めることができます。

Station の問題は、TechTrain の画面で確認してください。

Mac における初期設定

Homebrew を使ってインストールすることを想定しています。

1. Homebrew のインストール

Terminal.app を開き、次のコマンドをコピーアンドペーストで実行してください。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)

すでにインストール済みの方は、この手順を飛ばしてください。 インストールされたかどうかを確認するには、Terminal.app を開いて

brew -v

を実行してください。インストール済みであれば次のような表示になるはずです。

何か起こった際には次の公式サイトを確認してください。

https://brew.sh/index_ja

2. Node.js のインストール

Homebrew を使って、 Node.js をインストールします。 Terminal.app を開き、次のコマンドをコピーアンドペーストで実行してください。

brew install node

インストールされたかどうかを確認するには、Terminal.app を開いて

node -v

を実行してください。インストール済みであれば次のような表示になるはずです。

v から先は、インストールしたバージョンが表示されるため、上記画像の表示と全く同じバージョンでなくても大丈夫です。 本当は Node.js のバージョン管理ツールである n や nodebrew などのツールを入れた方が実践的ですが、パスの修正などができないとトラブルが起きた時に何もわからなくなるので、わからないうちはお勧めしません。 一旦素直に Homebrew で直接 Node.js の最新版をインストールしておきましょう。

3. Yarn のインストール

Terminal.app を開き、次のコマンドをコピーアンドペーストで実行してください。

brew install yarn

インストールされたかどうかを確認するには、Terminal.app を開いて

yarn -v

を実行してください。インストール済みであれば次のような表示になるはずです。

Windows における初期設定

Windows での初期設定を行うためには、キャラクターユーザーインターフェイス（CUI）の操作を行う必要があります。

PowerShell の起動方法

Windows では、PowerShellとよばれるシェルが標準で搭載されています。シェルはキャラクターユーザーインターフェイスの 1 つで、ファイルやディレクトリの操作などに特化したものです。

PowerShell を起動するには、スタートボタン（左下にある Windows のロゴ）を右クリックするか、Win-Xキーを押して以下のメニューを表示してください。 管理者権限を必要とする場合は「Windows PowerShell (管理者)(A)」、それ以外の場合は「Windows PowerShell(I)」をクリックしましょう。

PowerShell を操作する

PowerShell を起動すると、以下のような画面が出てきます。

シェルは、上のような端末と呼ばれる画面に文字を入力することにより操作します。試しに文字を入力してみましょう。 >以下に入力した文字が現れます。>のように、入力待ちになっていることを表す記号をプロンプトと言います。

プロンプトに文字を入力しEnterキーを押すと、コンピュータはその内容（指示）に合わせて動作します。このような指示をコマンドと呼びます。コマンドにはさまざまな決まりがありますが、ここではその説明は割愛します。

つぎに、コピー＆ペーストのやり方について説明します。ブラウザ上でコピー（Ctrl-c）したものを貼り付けるには、端末上で右クリックします。また、端末上の文字をコピーしたいときには、コピーしたい部分をドラッグで選択し右クリックします。メモ帳などにペースト（Ctrl-v）して正しくコピーできるか確認するといいでしょう。

winver

では試しに、上のコマンドをコピー＆ペーストしてEnterキーを押しましょう。以下の画面が出たら成功です。

作業ディレクトリ

シェルには、作業ディレクトリというものが存在します。

ファイルやディレクトリがどこにあるかをパスと言われる文字列で表現しますが、すべて絶対パスで指定していては煩わしいです。 作業ディレクトリを決めておくと、そのディレクトリとの相対位置でパスを表現できるようになります。住所や部屋番号を言うより、お隣さんや近所の〇〇さんと言ってしまった方が簡単なのと同じです。

そのため多くのコマンドは、作業ディレクトリ上で操作を行うことを想定しています。たとえば、

mkdir {ディレクトリ名}

のようなコマンドは、{ディレクトリ名}に一致するディレクトリを作業ディレクトリ内に作成します。

作業ディレクトリを変更するには、cdコマンドを使います。

cd （ここにパスが入る）

作業ディレクトリの中身を見るには、dirコマンドを使います。

dir

シェルの起動時には、多くの場合ホームディレクトリが作業ディレクトリとして指定してあります。ホームディレクトリは頻繁に用いるものなので、~という略称が与えられています。

cd ~

でホームディレクトリに戻ることを確認しましょう。

Scoop を用いた環境構築（推奨）

パッケージ管理ツールと呼ばれる、ソフトウェアのインストールを簡単にするためのツールをインストールします。 Chocolatey など他のパッケージ管理ツールもありますが、 Scoop を用いた環境構築を推奨します。

Scoop をインストールするには、PowerShell を管理者権限で起動し、以下のコマンドを入力します：

iwr -useb get.scoop.sh | iex

インストールに失敗する際は、以下のコマンドを入力してから再度上のコマンドを入力してみましょう：

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

これらの操作を行うためには、ユーザーアカウントに管理者権限があることが前提となります。

Git、node および yarn のインストール

Railway を進めるには、Git、node、yarnのインストールが必要です。管理者権限で起動した PowerShell に以下のコマンドを入力して、Scoop を経由してインストールしましょう：

scoop install git nodejs-lts yarn

html-stationsリポジトリのクローン

"Use this template" から作成したリポジトリを作業するディレクトリにクローンしましょう。

git clone https://github.com/{ユーザー名}/html-stations.git

パッケージのインストール

クローンしたばかりのリポジトリは歯抜けの状態なので、必要なファイルをダウンロードする必要があります。 10 分程度掛かることもあるため、気長に待ちましょう。上から順番に１つずつコマンドを実行しましょう：

cd html-stations

yarn install

yarn hook:update

TechTrain へのログイン

では、最後に TechTrain にログインしましょう。画面の指示に従い入力を進めてください。

yarn login:techtrain

お疲れ様でした。

自分のリポジトリの状態を最新の TechBowl-japan/html-stations と合わせる

Forkしたリポジトリは、Fork元のリポジトリの状態を自動的に反映してくれませんので、自分で更新をする必要があります。 何かエラーが出た際には、こちらを試してみてください。

準備

# 自分が何か変更した内容があれば、 stash した後に実行してください。
git remote add upstream [e-mail]:TechBowl-japan/html-stations.git
git fetch upstream

これらのコマンドを実行後にうまくいっていれば、次のような表示が含まれています。

git branch -a ←このコマンドを実行

* master
  remotes/origin/HEAD -> origin/main
  remotes/origin/main
  remotes/upstream/main ←こちらのような upstream という文字が含まれた表示の行があれば成功です。

こちらで自分のリポジトリを TechBowl-japan/html-stations の最新の状態と合わせるための準備は終了です。

自分のリポジトリの状態を最新に更新

# 自分の変更の状態を stash した上で次のコマンドを実行してください。

# ↓main ブランチに移動するコマンド
git checkout main

# ↓ TechBowl-japan/html-stations の最新の状態をオンラインから取得
git fetch upstream

# ↓ 最新の状態を自分のリポジトリに入れてローカルの状態も最新へ
git merge upstream/main
git push
yarn install