Tech Select 学習サイト

# 素材とプロジェクトの準備

このポートフォリオを作成するにあたり、必要な画像や動画などは、ダウンロード (opens new window) からダウンロードして展開（解凍）してください。

# 展開の手順

  1. ダウンロードした zip ファイルを右クリックして、「すべて展開」をクリックします。 image

  2. そのまま「展開」をクリックすると、同じ場所にフォルダが作成されます。 image

  3. web-front-portfolio-main のフォルダに進み、以下のファイルをご利用下さい。フォルダの構成なども参考にしてください。 具体的なコピー手順は後述します。

    • ./public/favicon.ico
    • ./public/assets/decorations/*
    • ./public/assets/icons/*
    • ./public/assets/logos/*
    • ./public/assets/photos/*
    • ./public/assets/works/*
    • ./public/assets/me.png image

# ディレクトリの場所と構成

ディレクトリの場所

このドキュメントでは、以下の場所で作成した状態で説明しています。

WIN

WSL: ~/github/{username}/web-portfolio-yumi

（実際には /home/ubuntu/github/ts-user/web-portfolio-yumi です。）

MAC

~/github/{username}/web-portfolio-yumi

（実際には /Users/tsuser/github/ts-user/web-portfolio-yumi です。）

作成するファイルの配置図

web-portfolio-yumi ディレクトリの内部は、以下のような配置となる予定です。

.
├── .prettierrc
├── .vscode
│   └── settings.json
├── README.md
└── public
    ├── assets
    │   ├── decorations
    │   │   ├── lt.svg
    │   │   └── rb.svg
    │   ├── icons
    │   │   └── email.svg
    │   ├── logos
    │   │   ├── html5.png
    │   │   ├── nodejs.svg
    │   │   └── php.png
    │   ├── main.css
    │   ├── me.png
    │   ├── photos
    │   │   ├── 1.jpg
    │   │   ├── 2.jpg
    │   │   ├── 3.jpg
    │   │   ├── 4.jpg
    │   │   ├── 5.jpg
    │   │   └── 6.jpg
    │   └── works
    │       ├── work1.png
    │       ├── work2.mp4
    │       └── work3.png
    ├── favicon.ico
    └── index.html

# GitHub リポジトリの作成

空のリポジトリを作成します。 GitHub にサインインした状態で、「＋」アイコンから 「New Repository」 を選択します。

image

リポジトリ名は 「web-portfolio-yumi」としておきます。

image

その他のオプションは変更せずに「Create Repository」をクリックしてリポジトリを作成します。

※ Private リポジトリにしても問題ありません。

image

# ローカルリポジトリのセットアップ

ターミナルでファイルを作成する場所に移動します。

コマンドの一例

image

GitHub でリポジトリを作成したときの初期画面を参考にします。「SSH」が選択されていることを確認してください。 この初期画面を参考に、コマンドを入力していきます。 慣れないうちは、一行ずつコピーして入力することをおすすめします。

image

# これはサンプルです。実際には自分で作成したリポジトリの初期画面を参考にしてください。
$ echo "# web-portfolio-yumi" >> README.md
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin git@github.com:{username}/web-portfolio-yumi.git
$ git push -u origin main
1
2
3
4
5
6
7
8

コマンドの一例

image

Push 後に、 GitHub のリポジトリページを更新すると、 README.md ファイルが反映されています。

image

# Visual Studio Code を ワークスペースで起動

Visual Studio Code を開きます。ワークスペースとするディレクトリのパスを指定して起動します。 現在のパスをワークスペースとしたい場合は、 以下のようにカレントディレクトリを表す . を用いて指定できます。

$ code .
1

コマンドの一例

image

以下のように、 起点のディレクトリ名（WEB-PORTFOLIO-YUMI) が大文字で表示されていれば 問題ありません。

image

# 改行コードの確認

README.md をクリックして、右下の改行コードの表示が LF になっていることを確認してください。

image

# GitHub Desktop に連携する

このプロジェクトを Git コマンドを簡単に扱えるようにする GitHub Desktop と連携します。

まず、プロジェクトディレクトリのパスを確認します。 以下のコマンドを、プロジェクトディレクトリで入力し、表示されたパスをコピーします。

WIN

Windows ユーザーは pwd コマンドではなく wslpath コマンドを使用します。 wslpath コマンドは、以下のように入力することで、 WSL 上のパスを Windows から参照したときの パスに変換して表示します。

$ wslpath -w .
1

コマンドの一例

image

MAC 
$ pwd
1

GitHub Desktop で File → Add local repository... を選択します。

image

コピーしたパスを貼り付けて Add repository をクリックします。

image

リポジトリの切り替え

すでに他のリポジトリがある場合は、左上の Current Repository をクリックすると切り替えることができます。

image

GitHub Desktop に関連付け後、現時点では差分はないはずです。 以降、ファイルを作成したり、ソースコードを変更するたびに適宜 Commit ・ Push を行うことをおすすめします。

image

# ファイルの作成・コピー

プロジェクトフォルダに、以下の構造となるようにセットアップします。

.
├── .prettierrc ← ダウンロード素材からコピーする
├── .vscode ← フォルダを作成する
│   └── settings.json ← ダウンロード素材からコピーする
├── README.md ← 作成済み
└── public ← フォルダを作成する
    ├── assets ← フォルダを作成する
    │   ├── main.css ← 空のファイルを作成する
    │   ├── me.png ← ダウンロード素材からコピーする
    │   ├── decorations ← フォルダを作成する
    │   │   ├── lt.svg ← ダウンロード素材からコピーする
    │   │   └── rb.svg ← ダウンロード素材からコピーする
    │   ├── icons ← フォルダを作成する
    │   │   └── email.svg ← ダウンロード素材からコピーする
    │   ├── logos ← フォルダを作成する
    │   │   ├── html5.png ← ダウンロード素材からコピーする
    │   │   ├── nodejs.svg ← ダウンロード素材からコピーする
    │   │   └── php.png ← ダウンロード素材からコピーする
    │   ├── photos ← フォルダを作成する
    │   │   ├── 1.jpg ← ダウンロード素材からコピーする
    │   │   ├── 2.jpg ← ダウンロード素材からコピーする
    │   │   ├── 3.jpg ← ダウンロード素材からコピーする
    │   │   ├── 4.jpg ← ダウンロード素材からコピーする
    │   │   ├── 5.jpg ← ダウンロード素材からコピーする
    │   │   └── 6.jpg ← ダウンロード素材からコピーする
    │   └── works ← フォルダを作成する
    │       ├── work1.png ← ダウンロード素材からコピーする
    │       ├── work2.mp4 ← ダウンロード素材からコピーする
    │       └── work3.png ← ダウンロード素材からコピーする
    ├── favicon.ico ← ダウンロード素材からコピーする
    └── index.html ← 空のファイルを作成する

予め ~~/public と ~~/public/assets ディレクトリを作成しておき、ドラッグ ＆ ドロップ でコピーすると簡単です。

Animation26

次のファイルを作成する際は、ファイル名・ファイルの配置場所は必ず同様にしてください。 これらのファイル名のファイルを検出すると、設定が自動的に読み込まれます。

  • ~~/.prettierrc コード整形ツール Prettier の設定ファイルです。80 文字目で改行する指定や JavaScript でセミコロンが自動的につくようにする設定となっています。その他の具体的な設定はファイル内の記述を確認してください。
  • ~~/.vscode/settings.json Visual Studio Code のこのプロジェクトのみに有効な設定ファイルです。 このファイルをコピーしておくと、 80 文字目に縦ラインが入り、保存時に Prettier によって自動整形されます。 その他の具体的な設定はファイル内の記述を確認してください。

次のファイルは、ダウンロードした素材の中にもありますが、今回制作するメインのファイルのため、 ご自身でコーディングします。Visual Studio Code で ファイルを新規作成してください。

  • ~~/public/assets/main.css
  • ~~/public/index.html

Animation6

# Git Commit & Push

ファイルを一通り作成しました。このタイミングで Commit をしておくと良いです。

  1. コミットするファイルにチェックを入れる（今回はすべてにチェック）
  2. コメントを書く（例: 初期ファイル作成）
  3. Commit to main をクリックしてコミットする。
  4. Push をクリックして Push する。

image

Push ができたら GitHub Repository のページを更新し、反映されていることを確認します。

image

Visual Studio Code を確認すると、Commit 前後でファイルの横にあるマークが消えていることがわかります。このように Visual Studio Code 上でも ひと目で Git の状態がわかるようになっています。緑色のマーク（U）は ファイルの新規作成という意味です。他のマーク（M:修正 等）もあります。

image

← Docker コンテナ起動・終了 →