【エクササイズ】expressを使ってクイズアプリを作る

課題
  • expressでテンプレートファイルを使ってWebページを生成する
  • Webページの共通部分をパーシャルファイルとして作成する
  • フロントエンドで使うCSSやJavaScriptなどの静的ファイルを読み込めるようにする
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

GitHub : js_excercise_for_backend_6

今回作成する課題の完成形のイメージは以下のとおりです。(※画像をクリックすると別タブで画像が開きます)

今回の課題の完成形今回の課題の完成形

課題解決するために参考になる資料

【express】トップページとアバウトページのViewを作成する

あわせて読みたい
【express】トップページとアバウトページのViewを作成する今回はexpressでテンプレートエンジン・テンプレートファイルを使って、Webページの表示内容を返す方法を学習します。テンプレートファイルを使うことで、リクエストに対するレスポンス内容を別ファイルでHTMLのような形式で実装することができます。...

今回の課題では「トップページ」と「クイズページ」の2画面を作ります。

expressを使ってHTMLを生成するには「テンプレートファイル」というものを使うと便利です。

expressではいくつかの種類のテンプレートファイルをサポートしています。

上記記事では、テンプレートファイルに「EJS」を採用してViewの生成方法を解説しました。

expressでWebページの作り方がわからない方は上記記事を参考にすると良いでしょう。

【express】Viewの共通パーツを作成して各ページで読み込む

あわせて読みたい
【express】Viewの共通パーツを作成して各ページで読み込む今回はexpressのView作成時に、共通パーツを使う方法を学習します。共通パーツのことを「パーシャルファイル」とも呼びますが、パーシャルファイルを使うことで、ページの共通部分の修正作業が必要になったときに、修正コストが下がります。...

複数ページ存在するWebページを作る際に、headタグ周り(=ヘッダー)、bodyの閉じタグ周り(=フッター)は、どのページでも共通していることが多いです。

共通部分は、共通パーツとして別のテンプレートファイルに記述して、共通パーツを利用するテンプレートファイルから読み込むようにすると、修正作業が楽になります。

この「共通パーツのテンプレートファイル」を「パーシャルファイル」と呼ぶこともあります。

パーシャルファイルの作り方や、読み込み方は上記記事で解説しているので、わからない方は参考にしていただけたらと思います。

【express】テンプレートファイルから静的ファイルを読み込む

あわせて読みたい
【express】テンプレートファイルから静的ファイルを読み込む今回はexpressで静的ファイルを読み込む方法を学習します。expressで静的ファイルを使えるようにするには「express.static」メソッドを使う必要があります。expressのプロジェクトでどのディレクトリを「静的ファイルの保存場所」にするかを決めてexpress.staticで指定します。...

Webページを作る上で、Webページの見た目を整えるためには「CSSファイル」が、Webページに動きをつけたい場合は「JavaScriptファイル」が必要になります。

つまり、「静的ファイル」が必要になるということです。

expressで静的ファイルを使えるようにしたい場合は、「express.static」という機能を使います。

「express.static」の使い方がわからない方は上記記事を参考にしていただけたらと思います。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る