WebAPI使用時の設計的な切り分け。データ取得＆表示ならJavaScript側で！

あとで読むスポンサーリンク

JSON形式

現在作っている最中のWebサイトで、初めてWebAPIを呼んで動作させる事に挑戦中です。
特定のURLを叩くとJSON形式でデータを返してくれます。
それを受け取ってWebサイトに表示させるというもの。

ただWebAPIってPHPなどのサーバー処理側でも呼び出せますし、JavaScriptなどのクライアント側でも呼び出せるので、どの様に使うのが正解なのかいまいちピンと来なくて、

詳しい方教えて下さい<(_ _)>

と記事を書かせて頂きました(^-^;

今回私が組んだ物は、JavaScript側で呼んでみたりPHP側で呼んでみたりと、方針がごちゃ混ぜの状態(>_<)
きちんと設計的に考えて

「この処理は遅くなってでも必要だからサーバー側で、この処理は後で表示で良いからJavaScriptで～」

とかって切り分けて対応しなければいけないのが本筋のところ。
ですが現状は

「とりあえず自分が組めるのはPHPだからPHPで実装してみるか！」

という安易な理由で組んだだけの状態(-_-;
どうにかしたいな～、と。

photo by Dmitry Baranovskiy

頂いたアドバイス！

そんなまだ分かっていない私に優しく手を差し伸べてくれた方々のアドバイスを紹介させて頂きます(^-^)/

id:emijaさん
「正解」なんてないんじゃないでしょうか。何かの操作に対して素早いレスポンスが必要ならJSで書くべきでしょうけど。

「正解はない！」ですか～(^o^;
いや、確かに用途用途で違うんでしょうけどね～。
セオリー（？）的な切り分けはWeb開発者の方達は自然とやっているのかな～、と思ったりしたもので(^^;

「何かの操作に対して素早いレスポンスが必要ならJSで書くべき」

なるほど。
操作に対してのWebAPI呼び出しなんて高度な事はまだ考えていませんでした(^-^;
表示時のロードの時に呼ぶ程度しかまだ考えていませんでしたorz

確かにブラウザ上でのユーザーの操作に対してすぐに反応が欲しい場合にはJavaScriptで書くのが正義な気がしますね！
JavaScriptってほとんど書いた事がないので勉強しますφ(.. )

関係ないですがJavaScriptの事をJSって書くの格好良いですね(^^)v

キャッシュとCRON

続いて頂いたアドバイスをば。

id:megazalrockさん
認証とかならPHPでAPI呼ぶのも良いが単なるデータの取得なら自前でDBに貯めこむとかしない限りPHPでやる意味はない。どうしてもPHPでやりたければキャッシュ噛まして別にcronなりで更新かけるとか（自分なら）する。

なるほど！
認証とかは時間が掛かっても安全に確認出来る様にした方が良いですもんね！
認証のWebAPI呼び出しはサーバー側で処理したいと思います(^^)/

でもデータ取得の場合はPHPでやるのは間違いだ、と。
今回の私のWebAPI呼び出しはデータ取得なだけなので、思いっきり間違いなんですね(-_-;
やっぱりですか～orz

どうしてもPHPでデータ取得をする場合には、取得したデータをDBに貯め込んで使うとか、2回目以降はキャッシュを読み込んで素早く表示できる様にするなどの対応がいるんですね！

でもPHPでキャッシュ使った事ないですorz
もう少し勉強します(^o^;

さらにキャッシュ使う時には、１度目のアクセスをユーザーにやらせるんではなくて、CRONで夜間とかに定時バッチ的に呼び出してキャッシュさせておく、と。
そんな技があるんですね！

ページ数が少ない時には、こうして先読みさせておくのは良いかもしれないですね！

PHPキャッシュ周りをしっかり勉強しておきたいと思いますφ(.. )

同期処理とAJAX

続いて設計的な切り分けを的確に指摘して頂いたアドバイスをご紹介！

id:C_Lさん
PHPの中でJSON返すWebAPI使うと同期処理なのでWebAPIとの通信時間や処理時間が自サイトの遅さに直結する詰まるサイトが出来上がる DOMLoad後のブラウザJavaScriptのAJAXで使って経験つもう

ふむふむ。
PHPの中でJSON返すWebAPI使って表示させているのですが、確かに読み込みが遅いです(>_<)
詰まるサイトって呼んだりするんですね！
まさに私の作ったサイトは詰まるサイトになっています(;_;)

すみません不勉強なので「DOMLoad後」の意味が分からないのですが、サーバー側の処理が終わってブラウザにデータが戻ってきた後くらいの理解で良いでしょうかね？
処理がブラウザ側に戻ってきてからJavaScriptのAJAXでWebAPIを呼び出すと。

AJAXも名前は聞いた事がありますが、いまいちどんな技術を指すのか理解できていません(T_T)
ちょっと調べてみると・・・

Ajax（エイジャックス、アジャックス、アヤックス）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行う手法である。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。

Ajax - Wikipedia

なるほど！
Ajaxってブラウザ内での非同期通信をさせながら、随時返ってきた処理を表示していく手法の事なんですね！
動的にページの一部を書き換える、と。
もちろんこんな事やった事ないです(T_T)

もう少し色々と勉強しながら取り組みたいと思います(^-^)/

アドバイスを頂いたWeb開発者の皆さん、本当にどうもありがとうございました(*^-^*)/