にわかプログラミングファンがお米屋さんHPを作ってみた

はじめまして。インターネットサービス事業本部1年目の大矢です。突然ですが、私は米屋の娘です。

目の前に白米を突き出され、「これは”あきたこまち”と”コシヒカリ”、さてどちらでしょうか？」と問われれば、50%くらいの確率で当てることができます。約5割の正答率！しかしこれは、2つしか選択肢がないので当然の結果です。

否！私に米の知識はなくとも、Webサイトを作る知識はあるような気がしたので、うちのお店のHPを1度作ってみました。

1番時間がかかった部分はこちらの「おすすめのお米診断」。

3つ質問をした後、ユーザーへ最適なお米を提示させていただくという内容です。簡単なJSですが、Webサイトを作る知識がある気がしただけで実際は無かったため、作るのにとても苦労しました。

これをポチポチ押していくと…

と、こんな感じでおすすめしてくれます。このお米の詳細を知りたい時は、「詳細はこちら」ボタンをポチッと…

ん？あれ？お米の種類一覧が出てきました…。先ほどおすすめされたお米の詳細は教えてくれません…。
困りましたね…先ほど表示されていた米の名前なんてもう忘れてしまいました…。

なんて惨いUIだ……ユーザーが初めて見たかもしれない文字列を覚えた前提で操作させるなんて…惨い…惨すぎる……。

できることなら、詳細ボタンをクリックした後はそのお米の詳細ページに飛びたい…でも詳細ページはHTMLファイルが1つで、ただJSを使って表示を変えているだけだし、直接リンク指定できない。にわかプログラミングファンの私にはどうすればいいか分かんないよ～～～～～😭😭

そこで私は、とても尊敬している弊社の某教官に教えを請いました。

教官「ここはクエリなどで値を渡さないといけないね。診断結果をクエリパラメータ（URLの最後に引っ付けるやつ）などで渡して、詳細ページの側でそれを解釈して対応しているお米を表示すれば良いね。」

なる…ほど……。パラメータ…はいはい……。

クエリパラメータとは
URLクエリパラメータとは､ 主にウェブページを跨いで情報を永続化するためにURLに付け加える変数のことを言います。クエスチョンマーク (?) をURLの末尾に付けて「変数＝値」の形式で色々なデータを次のページに引き渡します。

っていうことは、URLにパラメータをつけるためのプログラムを追加すればいいんだな…

教官「そうですね。まず、送る側でクエリパラメータをつけて。次に受け取る側ではそれを解釈して表示を切り替える部分を作る必要があるね。例えば、パラメータが6だった場合、配列に格納した6番目のデータを取り出して反映させるとかね」

show_panel(6);
var show_panel = function (num) {
            before.className = 'none';
            after.className = 'form1';
            name1.innerHTML = objects[num].name;
            hosi.textContent = objects[num].text;
            sen.innerHTML = objects[num].comment;
};

上記の文は教官が作ってくださいました。

ブラウザ側で更新してみると、ちゃんと6番目に格納されている”ゆめぴりか”の詳細が表示されました。show_panelの引数を変えると、その値に対応した品種の説明が表示されています。感動です。

教官「それでは次に、取得したパラメータの値をshow_panelの引数に入れる文を書いてみましょう。JavaScriptを使って取得するための文は、多分どなたかが公開しているので探してみてください」

ということで入れてみました。

function getParam(name, url) {
     if (!url) url = window.location.href;
     name = name.replace(/[[]]/g, "$&");
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
     var results = regex.exec(url);
     if (!results) return null;
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/+/g, " "));
 }
 var param = getParam("param","");
 show_panel(parseInt(param));

getParamは以下のサイトを参考にしています。

Javascript でURLのパラメータを取得する方法 | WWWクリエイターズ 
http://www-creators.com/archives/4463

ちょっとURLにパラメータを直接書いて動かしてみます。

出た！6番目に格納されているゆめぴりかが出た！とりあえずこちらのvariety.htmlは完成した模様です。

次はURLにパラメータをつける文を追加する必要があります。多分きっと恐らくですが、診断結果を表示する時にparamの値を格納してから、URLにパラメータをつける文を追加すれば良いはず。

           param =  5;
       }
       location.href = "fav.html?param="+param;
   }

いぇ～い！！簡単だったぜ～～～！！

教官「いや、location.hrefを入れる場所が違いますね。クリックした後のページのURLにパラメータをつける必要があります」

わかりません…にわかプログラミングファンにはわかりません…。

教官「先ほど作った詳細ページのプログラムは、自分のページのURLを取得して判断するようになっています。この状態だと、診断ページにパラメータを追加しただけで、詳細ページ側には反映されません。”詳細はこちら”ボタンをクリックした後に遷移するURLを指定している場所へ、paramを追加してあげましょう」

<script>
  jQuery('#target').click(function(){
      location.href = "variety.html?param="+param;
      //jQuery(this).attr('data-url');
  });
</script>

なる…ほど…。

できました。ちゃんと、診断した後に”詳細はこちら”ボタンをクリックすると、そのお米の詳細が表示されるようになりました。

振り返ってみるととても簡単なところで躓いていたようです。皆さんは、ここまで読むのに5分とかからなかったと思いますが、私はプログラミングでここまでたどり着くのに何日もかかりました。

なぜ思い通りに動かないのか、それを考える時間がにわかプログラミングファンにとってはとても楽しく有意義な時間なのですが、考え方が初心者すぎてこれをテックブログで公開するのはちょっと恥ずかしかったです。

さらなるステップアップを望むべく、現在はサーバー側プログラミングについて成長サポートで学んでいます。今でも初歩の初歩で割と躓きがちです。

いつかこのテックブログで、ガッチガチのプログラミングプロの方も唸るようなテック感溢れるコンテンツを書けたらいいなぁ…と思います。頑張ります。