REST APIを使ったWebサービスの実装開始！
Silicon Valley Super Ware
2020年6月4日
REST APIを使ったWebサービスの実装開始！
大体概要は話したと思いますので、今日から実際にREST APIを使ったWebサービスを 実装していきます。まずは、Vue.jsのプロジェクトを作ってください！ 或いは、5月に作成した「お問合せフォーム」のWebサービスに追加する方法でもＯＫです。
まず、最初に作るのは「投稿ページ」です。 基本的に、Ｗｅｂサービスを立ち上げた時に必要なデータを取得する方針なので サービスのトップレベルのモジュール「App.vue」で、REST APIを利用してデータを読み込んで しまう事にします。
モジュールが呼ばれた時に読み込みには「created」を使います。
App.vueのファイルの「script」のセクションに、「created」を追加して データを取り込みます。実際の取り込みの処理はApp.vueでは行わずに、VUEX側で行うことで データ処理とUIを分離して作ります。
処理の流れは？
大まかの処理の流れを勘が手見ます。Webサービスが呼ばれると、トップレベルである App.vueが呼ばれて、「created」の処理が呼ばれます。ここで、VUEXに処理をまかせます。 具体的には、storeにある処理を呼び出します。VUE UIでVUEXをインストールすると基本設定に必要なファイルを自動的に作ってくれます。 便利ですよね！「store」のフォルダーの下に作られた「index.js」がVUEXのstoreの実体です。
「index.js」の中に「Store」のオブジェクトが作られていて、
- state
- mutations
- actions
- modules
stateがVUEXで管理するデータを置く部分です。
ここに、「投稿データ」「コメントのデータ」「ユーザー情報」を置いて管理する事にします。 データの初期化をこのセクションで行います。
state: {
posts:[],
comments:[],
users:[],
}
「mutations」は「state」のデータを直接更新する処理を集めた場所です。
「actions」は更新の前の前処理を集めた場所で、非同期の処理はこの場所で
必要なデータを取得したあとに、mutationsの処理を呼び出すようにします。
posts:[],
comments:[],
users:[],
}
REST APIを使って取得するデータは、Webサービスのプログラム以外のところ、 つまり、外部サービスを提供するサーバーが提供するもので、いつデータが届くかは あなたのWebサービスからは分かりません。このような処理をJavaScriptは非同期で 処理します。 簡単に一言で言えば、データのリクエストだけしておいて、データが届くまでは別の 仕事をするという事です。このような処理は、「actions」で行います。
- mutations - データの更新を行う処理
- actions - データの準備を行う処理
処理の呼び出し方
この「Store」オブジェクトの処理を呼び出すのは特別のやり方で呼び出します。- mutations - 「commit」を使って呼び出します
- actions = 「dispatch」を使って呼び出します
まずは、Storeのstateのデータをセットする処理を準備します。
これは、「mutations」に入れます。
当面必要なのは、「投稿（posts）」「コメント(comments)」「ユーザー(users)」の
データをセットする処理です。
mutations: {
setPosts(state, payload) {
state.posts = payload.posts;
},
setComments(state, payload) {
state.comments = payload.comments;
},
setUsers(state, payload) {
state.users = payload.users;
}
}
これが、確定したデータを「state」のデータにセットするための処理です。
「payload」は、書式をシンプルにするために使っています。
処理によっては複数のデータを一つの処理でセットする場合がありますが、
渡すパラメータの数が増えないように「payload」にまとめて渡すための書き方です。
「payload」は、イメージとしては荷物のパッケージのようなイメージです。
いろいろな物を一つの箱に入れて、取り扱いやすくしているという感じです。
setPosts(state, payload) {
state.posts = payload.posts;
},
setComments(state, payload) {
state.comments = payload.comments;
},
setUsers(state, payload) {
state.users = payload.users;
}
}
本命の「REST API」からのデータの取得
ここでようやく「本命」の処理、「REST API」からデータを取り込む処理です。 これは、「actions」で行います。「投稿」「コメント」「ユーザー」と3つのデータが ありますが、やり方は基本的に同じなので「投稿」を例にして説明します。この処理は、先日紹介した「Postman」を利用するとサンプルコードが使えます
先日紹介した「Postman」を使うと、どんなコードを書けば「REST API」に必要な HTTPアクセスが出来るか簡単にわかります。 このコードをカット＆ペーストして少し手直しすれば完成です！JavaScriptの場合は、以下のコードが得られます
- Fetchを使ったもの
- jQuery (ajax)を使った物
- XHRを使った物
actions: {
getPosts() {
axios.get(url + "posts").then((res) => {
this.commit("setPosts", { posts: res.data });
}).catch((error) => {
console.log(error);
this.commit("setPosts",{posts: []});
});
}
},
このようにかなりシンプルに記述できます。データ取得のアクセスはHTTP
GETメソッドで
特にデータを送る必要がないので、URLを渡すだけであとは、axiosがやってくれます。getPosts() {
axios.get(url + "posts").then((res) => {
this.commit("setPosts", { posts: res.data });
}).catch((error) => {
console.log(error);
this.commit("setPosts",{posts: []});
});
}
},
非同期の処理の部分は、「then」の後のプロミス部分でデータが届いた時に処理されます。 エラーの場合は、空の処理をします。 この処理から先ほどの「mutations」の処理を「commit」を使って呼び出して、 データを確定させているというわけです。
最後に！
VUEX側の処理が出来たところで、この処理をApp.vueから呼び出します。
export default {
created: function() {
this.$store.dispatch("getPosts");
},
};
この記述をApp.vueの「script」セクションに追加して、App.vueが呼び出された時に
データを「REST API」を使って取得するというわけです。
created: function() {
this.$store.dispatch("getPosts");
},
};
今日は意外に沢山の事を説明しましたので、一つ一つやってみてください まだ、途中ですが今回のＷｅｂサービスの実装例をＷｅｂで公開しています。 とりあえず、リストの表示と一部の他の機能が利用できるようになっています。 まだ、ＣＳＳなどは書いていないのでとりあえず表示できるだけですが、 サービスのイメージを掴むのには良いかと思います。
途中経過の実装はこちら！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿