ブログを作ってみよう

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

サンプルブログ

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

ブログの機能

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

本課題で学習できること

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

課題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がタグの名前を指定します。