HTMLのclass="クラス名"のクラス名を何らかの方法で変えることで、CSSを変える記事を先日２回に分けて書きました。
意図せずに書いてましたが、PHPで変える方法を1回目、Javascriptで変える方法を2回目と違う方法で書いていることに気が付きました。
そういえば、勉強始めた頃、がんばってJavascriptで作ったものをすべてPHPに書き直すというとんでもなく大変で無駄な思いをしたことを思い出しました。
ということで私の基準ではありますが、どうやって分けるかを今回は書いていきます。
これも以前の記事からで、しつこいですが、私の考えるサーバー世界を先にみてください。
P・ロボがPHP翻訳、JS・グリーンがJavasciptを操作します。
H・ブラックとC・レッドがHTMLとCSSでページ作品をつくりますが、この２人は過去の作品に興味がないので、１回作ったものに手を加えることをしません。
webページってPCの中のファイルを見るのと違って、このように基本は1回ずつ妖精さんが作るんです。なので、例えば「１」って数字をweb上で入力したとしても、ファイルで保持してるわけじゃないので、ページを閉じたり、移動するとすべて消えるんです。消えたように見えないのは1回ずつきれいに作ってくれる妖精さんがいるからです。この入力した値も「これは後で使うから」とページとは別のところにおいておくか(SESSION)、別にして送らない(GETとかPOST)と消えてしまいます。この例外として、現在のページのままでJavascriptを担当し、ページの仕掛けを操作するJS・グリーンがいます。
なので使い分けのポイントはページを作り直すか保持するかが大きなポイントだと思います。
私は基本PHPで書いていますが、Javascriptを使ったほうが良いポイントも多々あります。例えば
- 同じ画面でスクロール位置を保持しておきたい
- ユーザーが入力をしている途中にページを動かしたい
などです。
なので、注釈や説明文をアコーディオン表示にしたり、ウインドウのように要素を表示したりするときはJavascript。値や条件によって表示を変えるときはPHPと使い分けています。計算もほぼPHPですが、入力補助のようなタイムリーな使い方はできないので、そこはJavascriptです。
また、コード書いているとどうしてもPHPとJavascriptが同じ場所で動いていると錯覚してしまいがちですが、P・ロボとJSグリーンは住む場所が違います。日本とブラジルぐらい違います。なので、P・ロボの使っていた変数の値はJS・グリーンは知る由もなく、ちゃんとP・ロボからjsonっていう手紙を出さないと伝わりません。逆にJS・グリーンが操作している段階ではP ・ロボはもう触れられませんので、JSグリーンからP・ロボに再処理を依頼をします。過去の作品に興味のないH・ブラックとC・レッドがいますので、そうなると「ページを作り直す」（リロードする）ということになります。
どうでしょうか？逆にわかりにくくなりましたでしょうかww
私は、どうしてもモノが移動しているイメージがないと理解できないのでこんな世界を勝手に想像しています。また違う世界もまとめたら書いていこうかなと思います。
