基本的にプログラムは単純な方が良いです。
作るのが簡単で、保守性が良いからです。
とはいえ、ブログラム技術に熟達しようとすると、徐々に複雑なプログラムにも挑戦していくということが大事ではないでしょうか。
そうすることで、今まで複雑に思っていたプログラムも、単純に見えたりするものです。
今回は、私流ですが、複雑なWEBのプログラム(ここではHTML, PHP, JQueryを使います)を書く上で、なかなか良い手法ではないかと思うことを書くこととしました。
書くことによって私も頭の整理をしたいと思います。
- foreachやeachを使う
- inputのhiddenを使って情報の受け渡しをする
- 文字列に情報を詰め込む
- クォーテーションをうまく使う
foreachやeachを使う
これは基本的なことですが、初心者の方は、ループは始点と終点を決めて行うものと思い込んではいないでしょうか。
初心者レベルを超える第一歩がこのforeachのような気がします。(※こんなことは知っているという人は読み飛ばしてください。)
この方式を使うと、配列変数の全ての要素についてループを回すことができます。
幾つの要素があるかということは心配しなくて済むわけです。
PHPの場合、これには二種類の構文があります。
foreach ($abc as $value){ }
foreach ($abc as $key => $value){ }
(※$abcは配列変数)
の二つです。
前者は配列の値のみを取り出し、後者は配列のキーと値の両方を取り出します。
例えば。。。
$abc=['りんご','みかん','いちご'];
foreach($abc as $key => $value){
echo $key.'---'.$value.'<br>';
}
こうすると、
0—りんご
1—みかん
2—いちご
のように表示されます。
これは基本ですが、JQueryではeachメソッドがあります。
$(‘.クラス名’).each(function(index, element){ }
とすれば、同じクラス名を持った要素全てについて、{ }内の処理をすることができます。
配列などには、
$.each(対象のオブジェクト, function(index, val) { });
という方法があります。
このように全ての要素について順に処理するforeachやeachは、知らない場合より、ループ操作をかなり簡単に済ますことができるようになると思いますので、ぜひ活用ようしてください。
inputのhiddenを使って情報の受け渡しをする
formの情報を送信する際、nameが付けられたinput要素などの値が送信されますが、画面に表示していなくても送信したい場合があります。
また、PHPで使った変数の値をJavaScriptでも使いたい場合があります。
このような場合に、input要素のtypeをhiddenとして書き込んでおくと便利です。
<input id="mydata1" type="hidden" name="mydata1" value="20953">
これがformタグの中に書かれていれば、submitにより送信できます。
また、JQueryで、次のように値を簡単に取得することができます。
var mydata1=$('#mydata1').val();
これでデータのやり取りが簡単にできるようになります。
画面に目に見えない情報ボックスを作る感じです。
文字列に情報を詰め込む
情報をいかにやり取りするかがプログラムの一番肝心なところです。
次のような場合は、文字列に圧縮して送るのが良いと思います。
- 配列変数で送るのが難しかったりする場合
- データベースのテーブルで、普通に格納しようとするとフィールドの数がものすごく多くなって扱いにくいというような場合
- idにいろんな情報をくっつけておきたい場合
データベースのテーブルを使う場合で、それぞれのフィールドは空欄が多いけれども、全部合わせるとそれなりの量になるというような場合、文字列として圧縮して、一つのフィールドに押し込めてしまえば、すっきりしたりすることがあります。
最後の例は、他にもっと賢いやり方があるかもしれませんが、id名を長くすれば、いろんな情報を伝えることができます。
文字列に圧縮するにはいくつか方法があるでしょう。
- 数珠つなぎにする
- (配列の場合)implodeとexplodeを使う
- (配列の場合)serialize,unserializeを使う
各データを特定の区切り文字で区切るので、implode関数、explode関数が基本とすると、数珠つなぎは、区切り文字がない場合に相当します。
後から、区切って意味がわかるなら数珠つなぎでも良いですが、普通は区切り文字を使用するでしょう。
「,」は配列要素などを並べる際によく使われます。
「/」はURLのパスを書く際に使われます。
他にも、好みや状況に応じて、「-」「@」など何でも良いと思います。
他のデータと混乱しやすい時は、「@@@」でも何でも良いと思います。
例えば、$name=[‘田中’, ‘佐藤’, ‘中川’]という配列があるとすると、implode関数では次のようになります。
$name=['田中', '佐藤', '中川'];
$staff=implode('@',$name);
echo $staff;
これを実行すると、「田中@佐藤@中川」と表示されます。
explodeは普通の爆発で外側に向けて体積が一気に拡大しますが、implodeは「爆縮」と訳されるように、言わば内側に向けての爆発です。
explode関数は、implodeと反対に次のように使います。
$staff='田中@佐藤@中川';
$name=explode('@',$ataff);
var_dump($name);
explodeさせた後は、文字列がバラバラになりますから、出てくる値は配列の形になります。
$name[0]が「田中」、$name[1]が「佐藤」、$name[2]が「中川」になります。
serializeについては、安全性の問題もあるようですので、説明は省略します。他にも、var_export()、json_encode()、http_build_query()などがあるようですが、ご興味のある方は調べてみてください。
クォーテーションをうまく使う
複雑なプログラムになると、長い文字列のなかに変数やら何やら色んなものを詰め込みみたい要求が出てくるものです。
私の場合、次のような場合に、クォーテーションに苦労することがよくありました。
- 関数の引数に変数を使いたい場合
- DOM操作で複雑なタグを書きたい場合
- 正規表現
クォーテーションには、シングルクォーテーション( ‘ ‘)とダブルクォーテーション( ” ” )があります。
変数が中に入っていない時は、どちらでも大して違いはありません。(シングルクォーテーションの方が速度が速いそうですが)。
変数が挟まっている時は、変数展開をしてくれるダブルクォーテーションを使うということになります。
$abc="あいう"; $def="$abc"; echo $def;
これは変数展開をしてくれるので「あいう」と表示されます。
$abc="あいう"; $def='$abc'; echo $def;
一方、こちらは、変数展開をしてくれないので、「$abc」と表示されたままです。
これが基本ですが、具体例を考えてみましょう。
まず、onclickなどで引き渡す関数の引数の場合です。(※onclickはあまり使わず、scriptの方に全て書く派の人も多いと思いますが。)
<div class=”button” onclick=”funKansu(‘田中’, 36)”></div>
というようにdivタグで作ったボタンをクリックすると作動する関数に二つの引数があるとします。
そして、それらが変数とすると、
[間違った例]<div class=”button” onclick=”funKansu($name, $age) “>テスト</div>
としたいところですが、PHP変数の$nameと$ageをHTMLタグにこのようにこのまま書くことはできません。
[間違った例]<div class=”button” onclick=”funKansu(<?php echo $name. ‘ , ‘ .$age;?>) “>テスト</div>
というような形にすると答えに近づきます。
しかし、これでもまだダメです。
「’田中’」のシングルコーテーションの部分が抜けていますから、これを付け足してやらせないといけません。
したがって、正しい例は、次のようになるかと思います。
<html>
<head>
<style>
.button {margin:20px; width: 200px; height: 40px; border: 1px #333 solid;}
</style>
</head>
<?php
$name="田中";
$age=36;
?>
<div class="button" onclick="funKansu(<?php echo $name.','.$age;?>) ">反応しないボタン</div>
<div class="button" onclick="funKansu('<?php echo $name;?>', <?php echo $age;?>)">正しいボタン1</div>
<div class="button" onclick="funKansu(<?php echo '\''.$name.'\', '.$age;?>) ">正しいボタン2</div>
</html>
<script>
function funKansu(str, age){
alert(str+' '+age);
}
</script>
「正しいボタン1」の方の書き方は少し冗長ですが、わかりやすいですね。
<?php ?>の両側にシングルクォーテーションをつけているだけです。
「正しいボタン2」の方は、知らない人には不可解に見えるかもしれません。
$nameの両脇にシングルクォーテーションを付けたいですが、それをまたシングルで囲わないといけない(onclick=” “というようにダブルが使われていますので、ダブルだとうまくいかないと思います。)ので、「’ ‘ ‘」と3つシングルを並べたいところですが、これだとコンピュータが認識できないので、二つ目のシングルの手前にバックスラッシュをつける必要があります(エスケープ処理)。
これをすると、「’ \ ‘という形になります。」
今度は、jQueryでwrapというクラス名の要素の最後に付け足すコードを考えます。
コードは次のようになります。
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script>
<style>
p, .button {margin:20px; width: 200px; height: 40px; border: 1px #333 solid;}
</style>
</head>
<p onclick="Add()">ボタンを追加します。</p>
<div class="wrap"></div>
</html>
<script>
function Add(){
var name='田中';
var age=36;
/*ここが肝心のところです*/
$('.wrap').append('<div class="button" onclick="funKansu(\''+name+'\','+age+')">正しいボタン1</div>');
}
function funKansu(str, age){
alert(str+' '+age);
}
</script>
「ここが肝心のところです」と書いてある次の行で、wrapという要素の最後に<div>のタグを付け足しています。
funKansu(name, age)としたいところですが、nameもageも変数ですから、文字列を区切って、足し算しないといけません。
[間違った例]‘<div class=”button” onclick=”funKansu(‘ + name + ‘ , ‘ + age + ’ ) “>正しいボタン1</div>’
というような足し算になりますが、これに更にテキストデータの場合はシングルで囲う必要があり、それをエスケープ処理しないといけませんから、次のようになります。
‘<div class=”button” onclick=”funKansu(\ ‘ ‘ + name + ‘ \ ‘, ‘ + age + ’ ) “>正しいボタン1</div>’
こんな風に、クォーテーションの意味を一つ一つ考えながら、単純な形から初めて、必要なクォーテーションを付け足していくという手順でやるとうまくいくと思います。
まとめ
参考になりましたでしょうか。
4つのうち後の3つは情報の受け渡しについてです。
プログラミングを学んでいる初期の段階で、受け渡し方法が分からなくて苦労することがよくあります。
色々な方法があるので、ここに書いた方法がベストかどうかはわかりませんが、私自身が慣れ親しんできた方法ばかりですので、問題なく使っていただけると思います。
プログラムは、工夫をすることで、より簡単に、よりスピーディーなものとすることができると思います。
参考にしていただいて、より高度なシステム作りに挑んでみてください。