二つのサイトは何が違う？の回答結果
サーチマン佐藤です。
こんにちは。
前回、こんなクイズを出しましたね。
その回答結果を発表します。
━━━━━━━━━━━━━━━━━━━━━
【質問】
以下、2つのサイトがあります。
クリックで開いて、
「Green!」「Blue!」のボタンを押してみましょう。
・ソックス１
http://www.searchman.info/example/socks1/
・ソックス２
http://www.searchman.info/example/socks2/
緑と青、色が変わりますね。
表面上、同じ動きをします。
しかし、実は、この２つのサイト、
技術的には、全然違うのですが、
わかりますか？
━━━━━━━━━━━━━━━━━━━━━
【回答結果】
・わからない
260票(19.9%)
・わかるようで、わからない
121票(9.3%)
・たぶん、わかった
428票(32.8%)
・ほぼ、わかった
430票(32.9%)
・質問の意味がわからない
36票(2.8%)
・そのほか
31票(2.4%)
━━━━━━━━━━━━━━━━━━━━━
「たぶん、わかった」
「ほぼ、わかった」
合わせると、65%くらい。
正答率65%って感じですが、
感想を見ると、
「わかった」と言いつつ、
間違っている方も多いので（笑）、
たぶん、本当は50%くらいの正答率かな。
では、解説しましょう。
簡単に言えば、
この読者のお便りが、答え。
【読者Ａさんから】
==========================
うーん、、、わからないのですが、
ソックス1のほうは、
ページを入れ替えていて、
ソックス2のほうは、
１つのページ内で画像のみ
入れ替えているとかでしょうか。
==========================
はい、そのとおりですね。
わからない方は、
もう一度、ソックス1のURLから、
ボタンを押してみてください。
ページ全体が、
リロードされていることが、
わかると思います。
片や、ソックス2は、
ボタンを押しても、
画像だけが入れ替わって、
ページ全体は、
リロードされていません。
つまり、
クリック（タップ）がある度に、
ソックス1は、画面全体を、
サーバから読み込んでいる。
しかし、変更したいのは、
ソックスの画像だけですよね。
ソックスの画像だけ変更したいのに、
画面全体を再読み込みするのは、
非効率なわけで、
そこで、画像だけ入れ替えたのが、
ソックス2になります。
よろしいでしょうか。
（よろしくない方、またお便りください）
まあ、用語的には、
ソックス1が「サーバーサイド」
ソックス2が「フロントエンド」
の技術です。
気をつけたいのは、
私は、かねがね、
思い込みの危険性を指摘していますが、
「サーバーサイド」ばかりやっていると、
画面を作る場合に、
その自分の技術を前提にして、
思い込んでしまうこと。
その思い込みで、現場では、
「サーバーサイド」の方は、
「フロントエンド」がわかってない、
って愚痴も、
チラホラ聞きます（笑）。
よかったら、是非、
このクイズを転送してあげて、
少しでも、勘を養いましょう。
あと、
「わかった」とクリックしたけど、
ちと違うんでない？
というお便りも掲載します。
【読者Cさんから】
==========================
たぶん、わかった
１は画像を都度読み込み
２は読み込み済の画像を画面で切り替え
==========================
1はページ全体を都度読み込みですね。
【読者Ｄさんから】
==========================
たぶん、わかった
答えは、セッションを一つで行うか、
クリックごとにセッションを開くかではないですか？
==========================
ん、どういうことでしょうか？
すみません。
【読者Ｅさんから】
==========================
たぶん、わかった
1は、サーバサイドの処理（Servlet）、
2は、クライアントサイドの処理（jsp）
==========================
WEBに表示する部分のJavaを、
jspと呼ぶのであって、
処理はサーバサイドですよ。
以上ですが、
今回は、他にも
沢山のお便り頂きました。
勉強になります。
本当にありがとうございました。
「サーバーサイド」と、
「フロントエンド」、
この違いに限らず、
今後も勉強していければと。
ではでは、
またお会いしましょう。
●追伸
じゃあ、画像だけ入れ替える、
「フロントエンド」の技術は、
具体的に、何があるの？と。
今回は、
「フロントエンド」の技術として、
Vue.js（JavaScript）使いました。
その講習も開講しました。
https://www.searchman.info/moushi/vuejs.html
↑受講せずとも、読むだけで役立つので、
読んでみてくださいね。