作为一个前端開発者、私は React Native もかなりクールなものだと思います。この記事では React Native の開発に関連しない内容についてまとめました。React Native に限らず、他のプロジェクトでも適用できるベストプラクティスです。
プロジェクト開発時には、共通のモジュールを切り出すことがよくあります。React Native の学習過程でも同じようなシナリオに遭遇しましたので、ここに記録しておきます。React Native では fetch をネットワークリクエストライブラリとして使用していますが、ほとんどのモジュールでネットワークリクエストが必要です。そのため、共通モジュールとして切り出すことは非常に重要です。
HTTP モジュールのカプセル化の利点#
- コードの再利用
多くのモジュールで HTTP リクエストが必要なため、fetch を共通モジュールとしてカプセル化することで、多くのコードを再利用できます。
- 高い凝集度と低い結合度
共通部分を抽出することで、各モジュールは自身のビジネスロジックに集中できます。
- プロジェクトの拡張と後続のメンテナンスが容易であり、責任の分離が実現されます。
具体的な手順#
まず、プロジェクトのルートディレクトリに utils ディレクトリを作成し、その中に fetch.js を作成します。
他のモジュールでこのモジュール全体を使用するためには、まず、他のモジュールで使用できるようにモジュールをエクスポートする必要があります。
export default class fetchUtils {
}
fetchUtils モジュールには、get メソッドと post メソッドの 2 つのメソッドが含まれるべきです。次に、get メソッドを作成します。
static get(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.json())
.then((result) => {
resolve(result);
})
.catch(error => {
reject(error);
})
})
}
get メソッドは静的メソッドであり、url というパラメータを受け取り、Promise を返します。Promise は resolve と reject の 2 つのパラメータを受け取り、成功と失敗の場合を処理するために使用されます。Promise 内では fetch を使用して get リクエストを送信し、チェーンされた then 関数を使用してサーバーからの結果を処理します。まず、json データを取得し、サーバーがデータを正常に返した場合は resolve を使用して結果を返します。エラーが発生した場合は、catch メソッドを使用してエラーをキャッチします。
次に、post メソッドを作成します。
static post(url, data) {
return new Promise((resolve, reject) => {
fech(url, {
method: 'POST',
header: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then((result) => {
resolve(result);
})
.catch(error => {
reject(error);
})
})
}
post メソッドは get メソッドと似ており、静的メソッドであり、url と送信するデータ data の 2 つのパラメータを受け取ります。同様に、post メソッドも Promise を返します。その後、サーバーに POST リクエストを送信するために、method を POST に設定し、リクエストヘッダーにはデータの受け入れタイプと Content-Type が含まれている必要があります。最後に、ユーザーが送信したデータを body に入れ、JSON.stringify を使用してデータをシリアライズします。その後、サーバーからのデータを受け取る必要がありますが、これは get メソッドと同じです。
以上がカプセル化された HTTP リクエストモジュールです。次に、使用方法を見てみましょう。
まず、fetchUtils をインポートします。
import fetchUtils from '../utils/fetch'
get メソッド
fetchUtils.get(url)
.then(result => {
this.setState({result: JSON.stringify(result)})
})
.catch(error => {
this.setState({result: JSON.stringify(error)})
})
post メソッド
fetchUtils.post(url, data)
.then(result => {
this.setState({result: JSON.stringify(result)})
})
.catch(error => {
this.setState({result: JSON.stringify(error)})
})
結論#
上記の fetch メソッドのカプセル化により、コードがより簡潔になり、ビジネスロジックがより明確になり、メンテナンスが容易になります。ここで React Native を例に挙げましたが、このカプセル化の考え方は他のプロジェクトでも参考になるでしょう。