カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-2

サンプルアプリの概要を理解しよう

サンプルアプリの概要を理解しよう

本教材では、以下の機能を持つSlack風のチャットアプリケーションを開発します。

  • ユーザー登録
  • 認証
  • チャンネル作成・更新・削除
  • メッセージ投稿
  • メッセージ検索

機能説明

ログイン画面

Image from Gyazo

ログイン画面では以下の機能を持ちます。

No. 機能名 説明 開発する章
1 ログインスキップ 認証せずにチャット画面に遷移します。8章で認証機能を実装するまでの間利用します。認証機能を実装した後は使用不可となります。 -
2 サインアップ 新規ユーザーを登録する機能です。認証無しの状態で利用できます。 8章
3 ログイン 登録済みのユーザーを認証する機能です。認証に成功した場合、チャット画面に遷移します。 8章

チャット画面

Image from Gyazo

チャット画面では以下の機能を持ちます。

No. 機能名 説明 開発する章
1 チャンネル作成 新規チャンネルを作成します。チャンネルの左にある+ボタンをクリックすることで利用します。 2章
2 チャンネル更新 作成済みのチャンネル名称を変更します。チャンネル名右の鉛筆マークをクリックすることで利用します。 3章
3 チャンネル削除 作成済みのチャンネルを削除します。併せて当該チャンネルのメッセージもすべて削除します。チャンネル名右の×マークをクリックすることで利用します。 7章
4 メッセージ投稿 選択中のチャンネルにメッセージを投稿します。画面下のテキストボックスおよび投稿ボタンから利用します。 5章
5 メッセージ検索 選択中のチャンネルに対してメッセージ本文の部分一致でメッセージを検索します。画面右上のテキストボックスと検索ボタンから利用します。 6章
6 ログアウト ログイン画面に戻ります。APIを利用しないため開発はありません。 -

開発範囲

本教材で受講者の方に開発していただく範囲はサーバーサイドのみです。

画面は教材の一部として提供いたします。提供された画面から受講者が開発したAPIにアクセスし、動作確認を行っていただきます。

Image from Gyazo

APIとは

APIとは、Application Programming Interfaceの略で、他のアプリケーションから実行可能な機能を表します。
Webを介して実行可能なAPIを特にWebAPIと呼びます。

WebAPIは、Web通信の仕組みであるHTTPプロトコルを介して実行します。

実行元(画面) → APIの行きの通信をリクエストと呼び、API → 実行元(画面)の帰りの通信のことをレスポンスと呼びます。

HTTPはヘッダーとボディから構成されます。
空行を挟んだ上部がヘッダー、下部がボディです。

下記は本教材で作成するメッセージ投稿機能のリクエストサンプルです。

リクエストヘッダーサンプル
123456789
Copied!
POST /spring/message HTTP/1.1 Host: localhost:8080 Content-Length: 58 Origin: https://lavulite.github.io authorization: Bearer eyJ...略 content-type: application/json ...略 {"channelId":1,"text":"こんばんは"}

上記のヘッダー1,2行目は宛先を表しており、http://localhost:8080/spring/messageのURLにPOSTで送信することを意味しています。

URLとは、インターネット上の所在地を表すものです。
[プロトコル]://[ドメイン]:[ポート]/[パス]の形式で表現されます。
それぞれの用語の意味は以下の通りです。

No. 名称 説明
1 プロトコル 通信のために定められた規格。WebAPIではHTTPS(暗号化通信)の二種類が一般的。開発時や外部公開しない環境ではHTTP(平文通信)も利用される。
2 ドメイン サーバーの宛先を表す。localhostは特別な意味を持ち、自端末を意味する。
3 ポート アプリケーションの受付窓口を表す。1サーバーで複数のアプリケーションを起動させたい場合、待ち受けポートを分けることで同居可能とする。
4 パス アプリケーションの機能を識別するために利用される。本教材で開発する各機能はパスと後述するHTTPメソッドを分けることで画面から一意に特定できるようにする。

上記例のPOSTはHTTPメソッドの一種で、サーバーに対して登録を行う際に利用されます。
API開発時のHTTPメソッドの使い分けについては2章以降で解説します。

レスポンスもリクエスト同様にヘッダーとボディから構成されます。
下記はメッセージ投稿機能のレスポンスサンプルです。

レスポンスサンプル
12345
Copied!
HTTP/1.1 200 Access-Control-Allow-Origin: https://lavulite.github.io Content-Type: application/json ...略

メッセージ投稿機能ではレスポンスボディを返却しないため、ヘッダーのみ返却しています。

上記のサンプルで注目いただきたいのは1行目の200です。
これは、HTTPステータスコードというもので、以下のような意味を持ちます。

HTTPステータスコード 説明
200番台 正常終了。
300番台 途中経過。
400番台 リクエストの問題によるエラー。
500番台 サーバー側の問題によるエラー。

HTTPステータスコードも本教材の開発の中で登場するため、頭の片隅に置きつつ開発を進めていってください。

現在のパート (0)
全パート (15)
みんなで助け合おう!
現在のパートのディスカッション 全0件