まずは、データの表示から！
Silicon Valley Super Ware
2020年6月7日
まずは、データの表示から！
先週は、Webサービスの起動時にJSON Placeholderから投稿、コメント、ユーザーの データを取得する部分の概要を投稿しました。 これで、表示に使う基本データは準備できた事になります。データはVUEXのstoreに保存されているので、どのモジュール（ページ）からも アクセスできるので、データの受け渡しを余り気にする必要はないので UI(ユーザーインターフェース)を作るのがシンプルになります。
まずは、データの操作の前にこのデータを表示する部分を作ってみます。
表示のスタイルを決めてHTMLを作る！
これは、特に新しい事ではありません。 表示させるスタイルを決めてHTMLの記述を書いて あとは、HTMLにデータを埋め込むためのコード（JavaScript）を書くだけです。やる事は、先月のお問合せフォームのWebサービスで作った管理ページと大差はありません。 お問合せフォームの場合は、お問合せの一覧を表示させて、メッセージが選択されたら そのメッセージを表示するという物でした。
基本的には同じような事をやれば良いわけです。
複数のデータを利用して見やすく表示！
先月と違う所はもう少し「便利」な表示をやろう！という所です。どういうことかというと、REST APIの"GET posts"でえられるデータは
- id
- userId
- title
- body
表示する場合は、「意味のある情報」を提供するのが大切！
そこで、もう少し見やすい情報に「加工」して表示する方が親切です。投稿の本文である「body」は長くなる場合があって、一覧で表示するのは 余り見やすい形にできないので、個別表示のみにして、 一覧では、タイトルと投稿者のみを表示するのが親切です。
投稿者の情報を表示するには、投稿のデータ以外にユーザーの情報を userIdを基に見つけて表示すると便利です。
もう一つは、投稿者ごとに表示を出せると便利です。
データの加工のやり方
一番シンプルなやりかたは、UI側でデータを準備する方法です。 各投稿からuserIdを抜き出して、ユーザー情報から該当するユーザーの名前を見つける処理を methodsやcomputedで処理して見つけ出して表示します。もう一つは、VUEXの「getters」でデータを取り出す処理を書いておいて、 それを呼び出して表示する方法です。
上手く使い分ける事がポイント
勿論どちらでやっても良いのですが、上手く使い分けるとコードがスッキリします。例えばユーザごとの投稿を抜き出したり、userIdからユーザー情報のエントリを見つける処理を gettersで書いてしまえば、複数のモジュールで同じようなデータが必要な場合、モジュール毎に 記述をする必要がなくなるのでコードはスッキリします。
一方である特定のモジュールでしか利用しないデータの場合、 モジュール内の、methods/computedで書いた方が必要以上にstoreの記述を増やさずに済むので 良い場合もあります。 この辺りの境界をどこで分けるかを考えて実装します。
更新をする場合はgetterで処理した方が便利
今回はデータを読み込むだけですので、処理の場所が変わっても 余り影響はありません。どこに書くかだけの問題です。更新する場合は、「getters」を上手く使った方がよい！
理由は簡単で、抜き出したデータをstoreの中で処理するのに都合がよいからです$storeのstateから更新するデータを抜き出して置いて、あとは新しいデータに 置き換える作業がstoreの中で完結しやすいからです。
今回のJSON Placeholderのデータは比較的シンプルですが、 このように、storeを作っていくと意外に大きなプログラムになります。 データ処理が集中するためですが、余り大きなプログラムになると メインテナンスが大変になります。
今回の例では、使う予定はありませんが、そんな時に利用できるのが 「modules」の考え方です。storeを階層化できるやり方です。 たとえば、REST APIの処理、Firebaseの処理などで処理するモジュールを 分けて、機能ごとに記述できるようにするという方法です。 丁度、REDUXで複数のReducerを作るようなイメージですね！
VUEXにデータ処理をまとめる
今回は、データ処理をできるだけVUEXに集めて UIはUIのイベント処理（ボタンのクリックや項目の選択など）に集中するやり方を 基本方針にしています。こうすると、後からUIの変更や置き換えも簡単になります。
UIは利用者の意向で変更される場合がかなりあります。 UIにデータ操作が多いとこうした対応が大変になります。 そうした意味でも、なるべくUIとデータ処理は簡単に分離できる形で実装するのが とても大切になってきます。
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿