フロントエンドシェアこんにちは、フロントエンドエンジニアのライダーです。Portfolio」連載のチャプター2となります。インストールし、実際に動かしながらその考え方を学んでいきました。続く今回の記事では、いよいよポートフォリオサイトのプロジェクトを作成していきます。ページの3ページとしましょう。前回作成したプロジェクトは使いまわさないので削除して問題ありません。my-portfolio上記コマンドでプロジェクトを作成します。ロゴが表示されれば問題ありません。ページ両方にヘッダーとフッターが存在しますので、ヘッダーコンポーネントと、フッターコンポーネントを作成しましょう。ディレクトリを作成しました。しましたが、これは、ページ内にひとつだけ存在するコンポーネントに使う命名です。#単一インスタンスのコンポーネント名)を読んでみてください。これらを共通パーツとしてレイアウトコンポーネントに組み込んでいきます。元あったコードはすべて削除して大丈夫です。}</script>こんな感じで、上下にヘッダー、フッターが表示されたかと思います。'~/components/common/TheFooter';コンポーネントファイルの読み込みを行なっています。ソースディレクトリを意味し、デフォルトのままだとプロジェクトルートと同じ階層を表します。中で使えるようにするために、名前付きで指定します。指定したコンポーネントはテンプレート内で使うことができるようになります。ページを新規作成するそれでは、デフォルトのままになっているコンテンツ部分を修正していきましょう。ここでは中身がどうなっているかは重要ではないので、気軽にいきましょう。こちらも、デフォルトのものは全て削除してしまいます。下記をコピー&ペーストしてください。