Chapter 02

1. スキャフォールドの作成

Masumi Morishige(umi-mori)
Masumi Morishige(umi-mori)
2021.01.22に更新

スキャフォールドとは?

スキャフォールド(Scaffold)とは、一言で言うとアプリケーションの足場になります。また、その足場を自動生成する機能のことも言います。Ruby on RailsやLaravelと言われるフレームワークでは、この自動生成機能がついており、初学者のための有用な機能として有名です。

フォルダとファイルの作成

まず、足場となるフォルダとファイルを生成していきましょう。
以下のようにindex.htmlというファイルとstaticcssというフォルダを生成しましょう。
今回、私はlanding-page-tempというプロジェクト名で作成しています。

start-state.png

【余談:Terminalからフォルダとファイルを生成する方法】

もしもmacOSユーザーの場合は、Terminalというアプリを開いて、以下のコマンドを実行することで作成することもできます。

$ mkdir landing-page-temp
$ cd ./landing-page-temp
$ mkdir static
$ mkdir static/css
$ touch index.html

index.htmlの作成

以下のようなコードをindex.htmlに記述しましょう。
メモ帳やテキストエディットなどのアプリケーションでコードを編集することもできますが、コードエディターを使用することを強く推奨します。

具体的なアプリケーションとしては、Visual Sutido Codeがおすすめです。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="format-detection" content="email=no,telephone=no,address=no">
	
    <title>Landing Page Temp</title>
</head>

<body>
    <header id="hero-header">
        <!-- Header -->
        <nav>
            <h1><a href="https://github.com/Masumi-M/landing-page-temp">Landing Page Temp</a></h1>
            <ul id="header-tab">
                <li><a href="#">Top</a></li>
                <li><a href="#product-section">Product</a>
                    <ul>
                        <li><a href="#product-a-section">Product A</a></li>
                        <li><a href="#product-b-section">Product B</a></li>
                        <li><a href="#product-c-section">Product C</a></li>
                    </ul>
                </li>
                <li><a href="#member-section">Members</a></li>
            </ul>
        </nav>

        <!-- Hero-Text -->
        <h1 id="hero-text">Landing Page Temp</h1>
        <p>LPを書く際のテンプレート</p>
        <hr>
    </header>
    <main>
        <!-- Product -->
        <section id="product-section">
            <header>
                <h1>Product</h1>
                <p>プロダクトの説明</p>
            </header>
            <aside>
                <h1 id="product-a-section">Product A</h1>
                <p>プロダクトAの説明</p>
            </aside>
            <aside>
                <h1 id="product-b-section">Product B</h1>
                <p>プロダクトBの説明</p>
            </aside>
            <aside>
                <h1 id="product-c-section">Product C</h1>
                <p>プロダクトCの説明</p>
            </aside>
            </aside>
        </section>

        <!-- Members -->
        <section id="member-section">
            <header>
                <h1>Members</h1>
                <p>メンバーの説明</p>
            </header>
            <aside>
                <ol>
                    <li>メンバーA</li>
                    <li>メンバーB</li>
                    <li>メンバーC</li>
                    <li>メンバーD</li>
                    <li>メンバーE</li>
                </ol>
            </aside>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <hr>
        <p>©︎ 2020 <a href="https://www.umi-mori.jp" target="_blank">Masumi</a></p>
    </footer>
</body>
</html>

以上のようなコードを記述した後、index.htmlファイルを保存した後に、以下のようにウェブブラウザで開きます(ファイルをウェブブラウザへドラッグアンドドロップする)。

drug_and_drop.png

すると、以下のような画面が出てくると思います。

before.png

:::message:
このように文書構造を表記するのがHTML(HyperText Markup Language)になります。
:::

Githubの設定

Githubとはコードを管理するための大変便利なツールです。Gitと言われるバージョン管理システムを用いていて、コードの変更履歴をチームと共有しながら開発を行っていきます。

スキャフォールドとして、Githubの設定はされていなくても問題ないのですが、作成することをおすすめします。

1. アカウント登録

まず以下のGithubの公式サイトでアカウント登録を行いましょう。

https://github.com/

2. リポジトリ作成

リポジトリとはプロジェクトの置き場所のような物です。
以下の手順で、今回作成するプロジェクトのレポジトリを作成しましょう。
create_repository.png

3. Gitの設定

macOSの方々

Progateさんの以下の記事の1~3(環境構築の準備〜Gitの初期設定まで)を実施しましょう。

https://prog-8.com/docs/git-env

windowsの方々

Progateさんの以下の記事の1~2(Gitのインストール、Gitの初期設定)を実施しましょう。

https://prog-8.com/docs/git-env-win

4. Githubとの連携

最後に、作成したスキャフォールドのデータをGihtubのレポジトリと連携させましょう。
Terminal(Windowsの場合はコマンドプロンプト)を開き、スキャフォールドのフォルダの中で以下のようなコマンドを叩きましょう。(xxxには、先ほどコピーしたレポジトリのURLを入れましょう)

$ git init
$ git remote add origin xxx
$ git add .
$ git commit -m "First Commit"
$ git branch -M main
$ git push origin main

以下のようにレポジトリにコードがアップロードされていることを確認できたら、連携成功です。

first-commit.png