N予備校 プログラミングコース 第30回
あなたは2019年の目標って立てましたか？
どんな目標を立てたか覚えていますか？
私は2018年末に2019年の目標を立てました。
その一つにプログラミングを学び仕事として使えるようにすることをあげました。
そして、思い立ったが吉日と「N予備校のプログラミングコース」を申し込みました。
そして受講と同時に自身の振替と、これから始めようと考えている人の参考になればとブログを書き始めました。
今回ブログの移設にともない、再度そのブログを読み返しながら、今思うことを加えて記載していきたいと思います。
また私が受講したのは【2018年度】で、現在公開されている【2019年度】との違いについても書いていきたいと思います。
このブログは、初心者が学びながら書いているため、間違っている場合があります。
分かり次第修正していくつもりです。
そのあたりも含め楽しんでいただければと思います。
最後に進めていてわからなかったところや気になったところをまとめています。
プログラミング入門 webアプリコース 第30回
前回は、作成したアンケートを全世界に公開できるようにし、さらに認証機能を設定しました。今回は、この章の目的でもある秘密の匿名掲示板作成の要件とページ設計とモジュール設計について学びます。
- 今回の内容まとめ（第3章 19-20）
・匿名掲示板
・Cookieによる匿名ユーザーの特定
・UI、URI設計について
・モジュールの設計について
- 今回の目標
匿名掲示板の要件を定義し、ページの設計をします。
- 今回新しく扱っているコマンド等
・リダイレクト
匿名掲示板
匿名掲示板とは、自身の名前を名乗っても名乗らなくてもいい掲示板のことです。
さらに、限られた人だけがアクセスできる匿名掲示板のことを秘密の匿名掲示板といいます。
匿名にすることによって、立場などを気にせずに議論ができるというメリットがあります。一方で、匿名であることを利用して不適切な発言がされるというデメリットがあります。
この秘密の匿名掲示板を作成にあたって、掲示板の要件を設定します。
- 秘密の掲示板の要件
① 認証ができる
② 認証した人だけが投稿内容を閲覧できる
③ 認証した人だけが投稿できる
④ 自身の投稿内容を削除できる
⑤ 管理人機能
管理人の投稿だとわかる
管理人は全ての投稿を削除できる
管理人はどのアカウントの投稿かわかる
⑥ 匿名であるけれども同じユーザーであることを認識でき、一人で複数人が書き込んでいるような振る舞いが簡単にはできないようにできる
これらを1つずつ設定していきます。
1人で複数人が書き込んでいる振る舞いを防ぐ
初めに、要件の⑥について設定します。
- 秘密の掲示板の要件⑥
匿名であるけれども同じユーザーであることを認識でき、一人で複数人が書き込んでいるような振る舞いが簡単にはできないようにできる
Cookieによる匿名ユーザーの特定
匿名であるけれども同じユーザーであることを認識できるプログラムをCookieという機能を使用して実装します。
Cookie
Cookie（クッキー）とは、Webブラウザに情報を記録するための仕組みで、有効期限を設定することができます。
まず、最後にアクセスした時間をCookieに記録するプログラムを作成します。
今回はHTTPのリクエストヘッダの「cookie」と、レスポンスヘッダの「Set-Cookie」という項目を使用します。
リクエストヘッダとは、サーバーに対する要求（リクエスト）を構成するものの１つです。
レスポンスヘッダとは、HTTPリクエストに対する返答（レスポンス）を構成するものの１つです。
その、CookieとSet-Cookieを使用したプログラムが以下になります。
const now = Date.now();
res.setHeader(‘Set-Cookie’, ‘last_access=’ + now + ‘;’);
const last_access_time = req.headers.cookie ?
parseInt(req.headers.cookie.split(‘last_access=’)
) : now;
res.end(new Date(last_access_time).toString());
1行目で、現在時間のミリ秒で表示した数値を取得し、nowという変数に設定しています。
2行目で、レスポンスヘッダーのSet-Cookieに、last_accessという名前で先ほど取得したミリ秒の数値を設定しています。
3-4行目で、リクエストヘッダーのCookieが取得出来た際に、last_access=now(現在の時間のミリ秒）をnowに当たる部分だけを抜き出し（この段階では単なる文字列）、それをparseInt関数で数値に変換し、それをlast_access_timeという変数に設定しています。もし、Cookieが取得できなかった場合は、その時の時間をミリ秒で表示した数値をlast_access_timeに設定します。
5行目で、last_access_timeをnewDate関数によりミリ秒から日付に変換し、toStringによりその結果を文字列に変更しています。
これにより、あるパソコンや環境から最後にアクセスした時間を取得することで、匿名ユーザーが以前にアクセスしたユーザーであるかを確認できるようになります。
続いて、ページの設定を行います。
UI、URI、モジュールの設計
匿名の掲示板のページを作成するにあたって、UI, URI, モジュールを設計します。
UI設計
UIとは、ユーザーインターフェースのことで、利用者が情報を受け取ったり入力するための仕組みです。このUIを構成するために必要なURIを設定します。
URI設計
URIとは、Uniform Resource Identifierの略で、インターネット上の情報やデータがどこにどんなものがあるかを特定する方式です。
URIには、インターネットの住所にあたるURL（Uniform Resource Locator)と、データなどの固有の名称を指定するURN（Uniform Resource Name)があります。
今回は、URIの構成を以下のように設定します。
- (1) 投稿一覧表示処理（/posts）：GET
投稿された内容の一覧を表示する処理には、/postsをパスに設定します。 - (2) 投稿とリダイレクト処理（ /posts）：POST
「投稿」と「投稿が完了したあとに投稿一覧へのリダイレクト」する処理には、/postsをパスに設定します。 - (3) 削除処理（ /posts?delete=1）：POST
投稿の削除処理には、/post?delete=1をパスに設定します。ここで、HTMLの
<
form>タグの機能だけではDELETEメソッドを使用することができずGETとPOSTしか使用できません。そこで、パスにはクエリを付けて/post?delete=1のようにPOSTを利用する
* (4) ログアウト処理（/logout）：POST
ログアウト処理には、/logoutをパスに設定します。このパスにアクセスることでBAしｃ認証が解除されログアウトされます。そのとき、401のステータスコードが表示されます。
* (5) ファビコン処理（/favicon.ico)：GET
ファビコン処理には、/favicon.icoのパスを設定します。
ファビコン
ファビコンとは、ブラウザのタブやブックマークのアイコンとして利用されるアイコン画像のことで、/favicon.icoのパスに保存されています。
投稿後に投稿一覧を表示させる（リダイレクトの設計）
まず投稿後に投稿一覧を表示するように設定します。
- (2) 投稿とリダイレクト処理（ /posts）：POST
「投稿」と「投稿が完了したあとに投稿一覧へのリダイレクト」する処理には、/postsをパスに設定します。
リダイレクトとは、サイトにアクセスしたユーザーをアクセスしたURIとは別のURIに移動させること。
今回は、POSTでのアクセスをGETへのアクセスへリダイレクトします。
これにより投稿が終わったあとに、投稿一覧を表示させます。
このリダイレクトには、300番台のステータスコードを利用します。
以下のコードでリダイレクトを実行します。
res.writeHead(302, {
‘Location’: ‘http://×××’
});
1-3行目で、レスポンスヘッダのLocationに別のページURLを設定し、アクセスされた時にLocationに設定されたページに移動します。
その際にステータスコード302を使用します。
302番（Found)は転送を表すステータスコートで、Locationヘッダで指定された別のサイトを発見したと言うことを表します。
今回の設定では、http://×××というサイトに転送されます。
モジュール設計
今回は、以下の構成でモジュールを設計します。モジュールとは部品のことで、今回行うのはどのファイル（どこにあるのかを含めて）でどの動作を行うかの設計だと思います。
HTTP サーバーを起動する
JavaScriptを実行すると最初に実行されるコードで、HTTPサーバーを起動したりBasic認証の設定などを設定するファイルを作成します。
リクエストを処理を行うハンドラに振り分ける
リクエストを具体的な処理に振り分けしていくファイルを作成します。
リクエストを具体的な処理に振り分けることをルーティングといい、リクエストに対し具体的な処理をする関数を リクエストハンドラ といいます。
/posts のリクエスト、その他のリクエストを処理する
ルーティングされたリクエストに対して具体的な処理を実行するファイルを作成します。今回は、/posts に来たリクエストと、そうではないリクエストでファイルを分けました。
投稿を追加、取得、削除する
投稿の永続化に関わる具体的な処理を設定するファイルを作成します。その中で、追加と取得と削除の機能を実現できるようにます。
今回は、秘密の匿名掲示板を作成するにあたりページ設計（UR要件の設定）とモジュール設計を行いました。
次回以降でそれぞれの要件を満たすプログラムを実装していきます。
