1. TOPTOP
  2. Webサービス
  3. JavaScript

イヌでもわかるJavaScript講座 プログラムをすべてコメントアウトしたら…

|

最近、イヌでもわかるJavaScript講座というサイトを見つけてハマってます。

どこでこのサイトを見つけてきたかと言えば、
深き海より、蒼き樹々の呟き 僕がプログラミングできない理由 — 「まずは、言葉にしてみましょう」の意味

ここです。

プログラムをするにあたって自然言語で何をしなければならないか表現することの重要性が説かれています。そういう意味では「イヌでもわかる」は非常に面倒見の良いサイトだと思います。

まずはプログラミング

100個くらいサンプルがあるので、とりあえず興味のありそうなものを
1個やってみた。Step.53 – タイピング表示

myscript.js

myMsg = "いらっしゃいませ こんにちは!";
myCnt = 0;

function myFunc(){
     myMess = myMsg.substring( 0 , myCnt ) + "_";
     myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt+1;
     document.getElementById( "typing" ).innerHTML = myMess;
}

setInterval( "myFunc()", 200 );

アップロードするとこんな画面が出ます。

「いらっしゃいませ こんにちは!」という文字が一文字ずつ表示され、最後までいったら消えて、また最初から文字が表示されるという仕様です。

(ずーっと眺めていたら目がチカチカして疲れます。適当なところでブラウザから離れてください)

次にコメントアウト

10行にも満たないコードでコメントアウトを入れるなんて、
非効率で見通しも悪いでしょう。しかし「言葉に出す」という重要性を
優先するとこんな感じになります(といってもmyscript.jsだけ)

myscript.js(コメントアウト)

// 表示するメッセージのセット
//  何個目の文字を表示しているか?最初は0をセット

// myFunc()の内容
// 表示する文字の抽出。抽出した文字に"_"を付ける
// 最後の文字まで表示していれば、myCnt に 0 をセット、最後の文字まで表示していなければ、myCnt に 1 を加算
   // index.htmlで"typing"というid属性をもつ<div>タグに変数myMsgを突っ込む

// 200ミリ秒ごとにmyFunc()を実行する

「言葉で表す」といっても、自然言語では、どこまで表現するか人によって基準がまちまちです。かえってプログラミング言語よりも複雑なような気がする…。

プログラムの流れについて「大体こんな感じ」ということで1つ2つの単語で表すのは良いかもしれませんが、すべてを文章で表すのもそれなりの技量がいるように思います。

「イヌでも分かる」とは書いていますが、「イヌ」では絶対に分かりません(笑)