Q&A
まさにswitchの演習の部分でした。
ですので配列は使わなかったのですが、提示していただいたソースだと関数定義する必要もなくて見やすいですね。
ありがとうございました！
JavaScriptの教本を読みながら西暦から干支（十干と十二支）を表示するページを作りました。
表示される結果は同じなのですが私が書いたソースと教本のソースが少し違ったので質問させてください。
私のソースではfunctionは1つですが教本のソースではfunctionが3つに分かれていてswitch文の最後にreturnが入っています。
PHPを少しかじっているのでなんとなくやっていることはわかるのですが、これはどういう意図でやっているのでしょうか？
この書き方のほうがいいのか、私の書き方に問題があるとすればどこか。
よろしくお願いします。
###私が書いたソース
<html> <head> <meta charset="UTF-8"> <script> function calc() { var y = document.getElementById("year").value; var e10 = ""; switch (y % 10) { case 0: e10 = "庚";break; case 1: e10 = "辛";break; case 2: e10 = "壬";break; case 3: e10 = "癸";break; case 4: e10 = "甲";break; case 5: e10 = "乙";break; case 6: e10 = "丙";break; case 7: e10 = "丁";break; case 8: e10 = "戊";break; case 9: e10 = "己";break; } var e12 = ""; switch (y % 12) { case 0: e12 = "申";break; case 1: e12 = "酉";break; case 2: e12 = "戌";break; case 3: e12 = "亥";break; case 4: e12 = "子";break; case 5: e12 = "丑";break; case 6: e12 = "寅";break; case 7: e12 = "卯";break; case 8: e12 = "辰";break; case 9: e12 = "巳";break; case 10: e12 = "午";break; case 11: e12 = "未";break; } document.getElementById("y").textContent = y; document.getElementById("e").textContent = e10 + e12; } </script> </head> <body> <h2><span id = "y"></span>年の干支は<span id = "e"></span></h2> <p> <input id="year" value="2016" /> <button onClick="calc()">計算</button> </p> </body> </html>
###教本のソース
<html> <head> <meta charset="UTF-8"> <script> function jikkan(year) { // 十干 var r = ""; switch (year % 10) { case 0: r = "庚"; break; case 1: r = "辛"; break; case 2: r = "壬"; break; case 3: r = "癸"; break; case 4: r = "甲"; break; case 5: r = "乙"; break; case 6: r = "丙"; break; case 7: r = "丁"; break; case 8: r = "戊"; break; case 9: r = "己"; break; } return r; } function junishi(year) { // 十二支 var r = ""; switch (year % 12) { case 0: r = "申"; break; case 1: r = "酉"; break; case 2: r = "戌"; break; case 3: r = "亥"; break; case 4: r = "子"; break; case 5: r = "丑"; break; case 6: r = "寅"; break; case 7: r = "卯"; break; case 8: r = "辰"; break; case 9: r = "巳"; break; case 10: r = "午"; break; case 11: r = "未"; break; } return r; } function calc() { var y = document.getElementById("year").value; var s0 = jikkan(y); var s1 = junishi(y); document.getElementById("y").textContent = y; document.getElementById("e").textContent = s0 + s1; } </script> </head> <body> <h2><span id="y"></span>年の干支は<span id="e"></span></h2> <p> <input id="year" value="2016"/> <button onclick="calc()">計算</button> </p> </body> </html>
回答6件
0
ベストアンサー
質問に記載の仕様から変わらないのであればどちらでもいいと思います。
が、メンテナンスのし易さを考えると教本のソースのほうがいいかと思います。
「閏年かどうかも判定し表示する」機能を追加したい場合など
機能ごとにfunction化しておくとテスト済みのfunction部分に手を入れることもないのでテストを簡略化できます。(function化してないと一連の処理をすべてテストする必要があります)
また、function化した部分を別のページなどで使用したい場合にもfunctionをmylib.jsなど外部ファイル化して再利用もできます。
投稿2016/11/09 15:08
総合スコア7914
0
どちらが良いか気にする程の違いとは思えません。
多分、教本では switch または function の解説か、機能を function を使って分割する事をテーマにされている部分と思いますので、説明のためにあえてまどろっこしいコードにされているものと思います。。
関数を定義するまでもないと思えますので、私は実践では下記のように書きます。
javascript
1var jikkan = [ "庚", "辛", "壬", "癸", "甲", "乙", "丙", "丁", "戊", "己" ]; 2var junishi = [ "申", "酉", "戌", "亥", "子", "丑", "寅", "卯", "辰", "巳", "午", "未" ]; 3 4function calc() { 5 var y = document.getElementById("year").value; 6 document.getElementById("y").textContent = y; 7 document.getElementById("e").textContent = jikkan[ y % 10 ] + junishi[ y % 12 ]; 8} 9
投稿2016/11/10 01:03
総合スコア51
0
この書き方のほうがいいのか
二択なら教本の方が良いと私も思います。
ただし、もっと規模が大きくなって、たとえば数百件、数千件分のデータだと、
配列にするとか、ファイルに読み書きするとか、さらに別のやり方があるので、
この関数とスイッチ文で分割する設計が常にベストという訳ではありません。
――というよりむしろ、今回くらいなら許容範囲ですが、メンテが大変なので、
そもそも私なら2桁以上の分岐でスイッチ文は選択しません。配列とかにします。
これはどういう意図でやっているのでしょうか？
人間から見た分かりやすさのためです。
機械が見るのは最終的に機械語ですから。
たとえると、（とくに索引があるような実用的な）
本で章や節に分けていくことと同じです。
あるいは、図書館や大書店、ブックオフなどの新古書店では、
ジャンルごとに棚の本を分類していると思います。
家の本棚なら分類しないかもしれませんが、これらでは何万冊もあるので。
同様に、数十行のサンプルコードではともかく、数千行、数万行と増えてくると、
コードのどこに何があるのか探すだけでも、場合によっては書くことより時間がかかります。
ですから、今回の場合は大差ないでしょうが、数千行以上に規模が大きくなってきたとき、
コードが整理されてるかどうかだけでも、開発が続けられるかどうか違ってきます。
そこで、整理・分類が重要になります。とくに再整理を「リファクタリング」と言います。
投稿2016/11/15 10:54
総合スコア5592
今回の演習範囲ではあまり気にする必要もなさそうですが、今後の汎用性や複雑化していくソースを書くに際には気をつけておく必要がありますね。
リファクタリングという言葉を始めて聞いたので調べてみたのですがすごく納得しました。
子供の頃にBASIC（GOTOを乱用？する時代の）をやっていて最近ではUIスクリプトツールでゲーム作り等をやっているのですが、ソースの管理方法について我流で身につけていたことが書いてあったりして体系的に理解することに一歩前進できました。
こういうプラスアルファを教えてもらえるのでteratailを利用して良かったです！
ありがとうございました！
0
おそらく長い処理を分割しているのだと思います。
投稿2016/11/09 15:00
総合スコア4830
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/23 11:06