ブログを作ってみよう

課題を通じて以下のブログを作成していきます。

サンプルブログ

このブログは以下の機能を持っています。

ブログの機能

• 投稿一覧ページ
• ページネーション
• 投稿内容ページ
• タグ内投稿一覧ページ

本課題で学習できること

• データ処理
• ページ遷移
• クエリストリングの処理

課題01

データのダウロード

以下のURLのdata.jsファイルをダウンロードしてください。

data.jsには、ブログのデータが入っています。

data.jsのダウンロード

https://blackruffy.github.io/frontend_exercise/apps/display-blog-data/data.js

右クリックで「名前をつけて保存」を選択してください。

課題02

HTMLの作成

index.htmlを作成し、scriptタグでdata.jsを読み込んでください。

こうすることでdata.jsに定義されているBlogDataオブジェクトが他のJSファイルから使えるようになります。

課題03

全ての投稿の一覧ページを表示

BlogDataオブジェクトの構造は以下です。

const BlogData = {
  // `posts`は各投稿の配列
  posts: Array<{
      id: number, // 投稿のID
      title: string, // 投稿のタイトル
      date: string, // ISO 8601 形式の投稿日時
      body: string[], // 投稿内容に含まれる文の配列
      tags: string[] // 投稿に紐づいたタグの配列
  }>,
};

JSファイルを作成し、全ての投稿をページに表示してみましょう。

表示項目は、投稿のタイトルと日付です。

課題04

最初の１０投稿の一覧ページを表示

最初の１０投稿だけ表示するように修正してください。

課題05

クエリストリングをパース

このブログアプリは、クエリストリングによって表示するページを切り替えます。

以下の`クエリストリングが与えられます。

名前	説明	値
page	ページの種類。pageがない場合はblog-listとする。	blog-list, blog-list-by-tag, blog-post
offset	投稿一覧の投稿の開始位置。pageがblog-listの時のみ。	number
size	投稿一覧の数。pageがblog-listの時のみ。	number
tag	タグ。pageがblog-list-by-tagの時のみ。	string
id	投稿のID。pageがblog-postの時のみ。	number

pageのそれぞれの値の意味は以下です。

名前	説明
blog-list	投稿一覧ページ
blog-list-by-tag	タグ内投稿一覧ページ
blog-post	投稿内容表示ページ

pageがblog-listだと仮定して、クエリストリングをパースしてpage、offset、sizeの値を取得しましょう。

課題06

クエリストリングで指定されたページを表示

課題05で取得した`offset`と`size`に従った投稿一覧ページを表示しましょう。

課題07

ページネーション

投稿一覧ページに次のページと前のページリンクを追加し、次のページをクリックした場合は次の１０投稿、前のページをクリックした場合は前の１０投稿を表示する一覧ページに遷移するように修正しましょう。

課題08

投稿内容を表示

投稿一覧ページのタイトルをクリックすると、投稿内容表示ページに遷移するようにしましょう。

投稿内容を表示する場合のクエリストリングは、pageがblog-postで、idが投稿のIDを指定します。

課題09

タグを表示

投稿内容表示ページに、投稿に紐づくタグを表示しましょう。

課題10

タグ内の投稿一覧ページを表示

投稿内容表示ページで投稿に紐づくタグをクリックすると、そのタグに紐づいた投稿一覧ページが表示されるように修正しましょう。

タグ内の投稿一覧を表示する場合のクエリストリングは、pageがblog-list-by-tagで、tagがタグの名前を指定します。