JSの綺麗な記述方法をご教授ください。

ざっくりとした質問で恐縮ですが、
以下のような、JS（例：デジタル時計）を綺麗に記述するにはどのようにしたらよろしいでしょうか。
「実行と処理を分ける」「実行処理を外に出す」などと、綺麗にかけると見たのですが、初心者なもので、理解できておりません。
ご教授お願い致します。

JavaScript
1function digitalClock() {
2	var m = moment();
3	var digital_clock = m.format('HH:mm:ss');
4
5	var firstHours = digital_clock.charAt(0);
6	var secondHours = digital_clock.charAt(1);
7
8	var firstdMinutes = digital_clock.charAt(3);
9	var secondMinutes = digital_clock.charAt(4);
10
11	var firstdSecond = digital_clock.charAt(6);
12	var secondSecond = digital_clock.charAt(7);
13
14	document.getElementById( 'firstHours' ).innerHTML = firstHours.toLocaleString();
15	document.getElementById( 'secondHours' ).innerHTML = secondHours.toLocaleString();
16	document.getElementById( 'firstdMinutes' ).innerHTML = firstdMinutes.toLocaleString();
17	document.getElementById( 'secondMinutes' ).innerHTML = secondMinutes.toLocaleString();
18	document.getElementById( 'firstdSecond' ).innerHTML = firstdSecond.toLocaleString();
19	document.getElementById( 'secondSecond' ).innerHTML = secondSecond.toLocaleString();
20
21	window.setTimeout( "digitalClock()", 60000); //60秒
22}
23window.onload = digitalClock;

HTML
1<div id="digital_clock">
2	<span id="firstHours" class="firstHours"></span>
3	<span id="secondHours" class="secondHours"></span>
4	<span>：</span>
5	<span id="firstdMinutes" class="firstdMinutes"></span>
6	<span id="secondMinutes" class="secondMinutes"></span>
7	<span>：</span>
8	<span id="firstdSecond" class="firstdSecond"></span>
9	<span id="secondSecond" class="secondSecond"></span>
10</div>

masaya_ohashi

2018/01/23 05:16

setClockという関数が使われていますが、どこにありますか？

shingosuchin

2018/01/23 06:12

すみません、setClockは不要でしたので、削除しました。

行動規範の内容に同意します

回答2件

ベストアンサー

今回の例ですとこんな感じですかね。

JavaScript
1var digitalClock = function () {
2  var now = moment().format('HHmmss');
3  var ids = ['firstHours', 'secondHours', 'firstdMinutes', 'secondMinutes', 'firstdSecond', 'secondSecond'];
4  ids.forEach(function(id, key){
5    document.getElementById(id).innerHTML = now.charAt(key).toLocaleString();
6  });
7  window.setTimeout(digitalClock, 60 * 1000);
8}
9window.onload = digitalClock;

不要なツッコミですが、
setTimeoutの間隔が60秒だと秒数を認識している意味がないので、
人間の間隔に合わせるなら100ms間隔くらいで実行した方が良いかと思います。

綺麗に記述するにはどのようにしたらよろしいでしょうか。

これを全て書き残すには私の知識も、回答欄もまるで足りてません、
なのでエッセンスだけ書き残します。

共通項を取り出して一気に処理する。これが簡素なコードの第一歩です。
今回はArray.prototype.forEachを利用しましたが、普通のfor文でも再現可能です。
その時に名前の一覧を配列として宣言しておくのは便利なやり方の一つです。

次に名付けです。
名は体を表すといいますが、良い名付けはJSに於いても重要です。
JSでは変数や関数(一連の処理)に好きな名前を与える事ができますが、今回私が書いたnow変数は結構はまってると思います。

重要な事は、小説もソースコードも登場人物(変数)は少ない方が分かりやすいということです。
逆に少なすぎて指示語だらけになるのも読者が読めなくなるので駄目。
匙加減が難しい所ですね。

digitalClockの中身で言えば、質問文のコードは変数が8個なので8人の登場人物が出てきています。
対する私は内6人を一塊の団体に閉じ込める事で、登場人物を一気に減らす事に成功しています。
この辺は書籍リーダブルコードを読めば勘所が分かると思います。

「実行と処理を分ける」「実行処理を外に出す」などと、綺麗にかけると見たのですが、初心者なもので、理解できておりません。

例題の件に関しては、「実行と処理を分ける」「実行処理を外に出す」はする必要はありません。
ですので私はそのまま共通項を取り出して5行の関数に作り直すだけにとどめています。

その理由は先程の説明とも重複しますが名前です。
「処理を分ける≒関数として宣言」と同じ事なんですね。

だから記述は減りませんし、登場人物の名前は増えます、当然ですね。
関数の行数が10行以上になってくると一息で読むには辛いですので、
行数を減らしたり、関数を分けたりといった手段を考慮に入れる事になります。

もちろん増えた分の登場人物は横並びで置いてても読者が困るだけです。
これに関してはどう整理するかはプログラマの腕の見せどころになってきます。
オブジェクト指向プログラミング、関数型プログラミング、デザインパターン…
様々なテクニックがあり、プログラミングの勉強とはすなわちコードの管理のお勉強となってきます。

先が長いのでゆっくり勉強してくださいね。

投稿2018/01/23 08:56