プログラミング学習で擬似コードを活用しよう！

JavaScript学習に役立つお話がありました。

「擬似コード」でロジックを書き出す練習について紹介されています。

www.webprofessional.jp

JavaScriptに限らず、プログラミングの基本を学んだら何か動くモノ（プライベートプロジェクト）を作ってみたくなります。でも実際にどうやって進めたらいいのでしょうか？

現実には、プロジェクトは完璧なコードをガンガン書くことではなく、たくさんの試行錯誤とリファレンスを幾度も参照して少しずつできあがるものなのです。

アプリ作成の進め方として、以下の手順が紹介されています。

最初に基本を身に着けよう
計画を立てる
コード無しで書いていく
小さな部分に分けて製作する
各パーツを結合する
実験とテスト
外部の助けを求める
コードのリファクタリング（再構築）

f:id:jsstudy:20170408191555j:plain

あ

擬似コードの活用

「コード無しで書いていく」って、どういうことでしょうか？

計画ができあがったら、詳細を考えます。

個人的に最良だと思う方法は、プロジェクトの各パートにおいてなにが求められるのかを具体的に書き出すことです。

このとき、まだコードを書かずに言葉だけで記述するのがカギです。

これはpseudocode（疑似コード）と呼ばれます。

pseudocodeなら構文を気にすることなく、プロジェクトの動作だけに思考を集中できます。

いったんロジックを書き出してしまえば、コードを書くのが格段に楽になります。

なぜなら、いきなり「カウントダウン時計を作れ」と言われて全コードを書くよりも、「終了時刻から現在時刻を引き算する」といった具体的な手順にしたがってコードを書くほうが簡単だからです。

擬似コード - Wikipedia

擬似コード（pseudocode）とは、アルゴリズムなどを、架空の非常に高水準なプログラミング言語（擬似言語）で記述したものである。

プログラミング言語の構文と、自然言語に近い表現を組み合わせて記述することが多い。
if クレジットカード番号が有効
    番号と注文で取引をする
else
    エラーを表示する
end if

擬似コードとは、実際のプログラミング言語の代わりに、人間の話し言葉で書いたコードのことです。

→ 買い物のメモ書きやToDoリストのように、必要なことを普通の言葉でズラズラ書いていけばOK！（意味が分かれば、書き方は自由ｗ）

プログラミングに慣れていない段階では、いったん擬似コードでロジック（処理の流れ）を書いて、それから実際のプログラミング言語に置き換えると、コードが書きやすくなります。

文芸的プログラミングの応用

擬似コードは、けっこう具体的な内容になっていますが、もう少し抽象的な（適当な？）書き方として、「文芸的プログラミング」という方法もあります。

文芸的プログラミング - Strategic Choice

「プログラマーが書くのはプログラムではなく、ドキュメントである」という単純な考え方です。

文芸的プログラムは、ほとんど物語のように書かれています。そのコードは、人間が筋道をたどりながら容易に読むことができます。

「文芸的プログラミング」の考え方が提示されたのは1980年代です。結果的に、その処理系が普及することはありませんでした。しかし、プログラムが、その作品の意図を伝え、自己説明的でなければならない、という考え方は受け継がれています。

また、折衷案的ツールとして、特別な形式で記述されているコメントをソースコードから抽出することによって、ドキュメントを生成するツールは、JavaDocに代表されるように、広く使用されています。

文芸的プログラミング (ASCII SOFTWARE SCIENCE Programming Paradigm)

作者: ドナルド・E.クヌース,Donald E. Knuth,有沢誠
出版社/メーカー: ASCII
発売日: 1994/03
メディア: 単行本
この商品を含むブログを見る

話し言葉で先にコメントを書いてから、次に具体的なコードを書いていくと、いきなりコードを書くよりは多少楽ですね？

APIドキュメントジェネレーター

各プログラミング言語には、コメントからドキュメント（仕様書、説明書）を作成するツールがたいてい用意されています。

アプリケーションプログラミングインタフェース - Wikipedia

アプリケーションプログラミングインタフェース（API、Application Programming Interface）とは、ソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様である。

APIには、サブルーチン、データ構造、オブジェクトクラス、変数などの仕様が含まれる。

ドキュメンテーションジェネレータ - Wikipedia

ドキュメンテーションジェネレータ (documentation generator)は、特別なコメントが記述されたソースコードファイルの集合、または一部の例ではバイナリファイルの集合から、プログラマ(API ドキュメンテーション)やエンドユーザ(エンドユーザーガイド)またはその両方を対象としたドキュメンテーションを生成するプログラミングツールである。

ソフトウェアドキュメンテーション - Wikipedia - ソースコードからの文書生成ツール

Doxygen - 各種言語向け（GPL）

Javadoc - Java

phpDocumentor - PHP（LGPL）

JavaScript用のAPIドキュメントジェネレーターには、JSDocなどいろいろあります。

efcl.info

dev.classmethod.jp

YUIDocとは?

JavaScriptのドキュメントを生成ツールです。

プロパティ用のコメント記述方法
/**
* My property description.(プロパティの概要・説明を記述)
* 
* @property propertyName　(プロパティ名の記述)
* @type {Object}(プロパティのタイプを記述)
* @default "foo"(デフォルト値の記述)
*/

ドキュメントコメントは、複数行（/* ～ */）でコメントアウトする。（囲む）
ドキュメントにする項目は、「@項目名＋内容」という形式で書く。
ドキュメントコメントの直下に、実際の変数や関数などを書く。
ドキュメントジェネレーターを使うと、ドキュメントコメントを拾って自動的にドキュメントを作成してくれる。

ドキュメントコメントの書き方は、どのプログラミング言語やツールでも、だいたい同じです。

JavaScriptのドキュメントコメントの記述例

/**
* MyClassの説明
*
* @class MyClass
* @constructor
*/
function MyClass() {
 
    /**
    * hogeメソッドです。
    *
    * @method hoge
    * @param {String} name
    * @param {Int} age 
    */
    this.hoge = function(name , age){
        //処理を記述
    }
 
    /**
    * fugaプロパティです。
    * 
    * @property fuga
    * @type Int
    * @default 10
    */
    this.fuga  =  10;
 
}