読者です 読者をやめる 読者になる 読者になる

akimachoのはてなブログ

ICTとデザインのためのブログ

浅井健一『プログラミングの基礎』の読書を捗らせるためのツール作りました

プログラム

はじめに

f:id:akimacho:20150305113202j:plain

ある本を読むために以下のちょっとしたツールを作ったというお話です.

デザインレシピ入力ページ

Web上でOCamlのコードを書く

私は,ここしばらく浅井健一『プログラミングの基礎』(サイエンス社)という本を読んでいます.

プログラミングの基礎 (Computer Science Library)

プログラミングの基礎 (Computer Science Library)

この本は,OCamlという関数型プログラミング言語を使って,プログラミングの作法やコンピュータサイエンス(データ定義とアルゴリズム)について学ぼということを目的としています.

よく本書の中で「デザインレシピ」という言葉が登場します.デザインレシピとは文字通りプログラムをデザインするためのレシピであり,プログラムを作成する際に従うべき指針となるものです.本書では,以下のような手順に則ってOCamlの関数を作っていきます.進めていくとこれに他の項目が加わったりします.

  1. 目的・・・インプット,アウトプット,関数の型の決定
  2. ・・・関数の動きの具体例,テストケースの作成
  3. 本体・・・関数の実装
  4. テスト・・・期待したとおりに動いているかの確認.そうでない場合は,3にもどる

また各節の終わりにある練習問題には,「デザインレシピにしたがって」という文言が付されています.

ここからが本題なのですが.この練習問題を解くために関数の目的やテストを書くのが手間がかかる,それが本書を進めていく上でネックになります.

幸いにも,著者のサポートページ(この本を使った講義の資料ページ)にはデザインレシピに従ってコードを自動に生成するツールが用意されていました.

http://pllab.is.ocha.ac.jp/~asai/book-mov/recipe.html

途中までこれを使っていたのですが,次の2点だけ不満がありました..

  1. テスト数を3つに固定されていて,変更することができない
  2. コードをWeb上で編集できない

以上の2点はいずれも,自分自身で書くことで解決してしまいます.

しかし,文字コードの都合か,Vimでコードを編集するときに文字化けが生じてしまうので,こちらも面倒です.GUIのエディタを使うにしてもOCamlシンタックスハイライトをサポートしてるエディタはありませんでした..

結局,総合するとvimの文字化けを治すよりもWebツールを改良して,web上ですべて完結させてしまうのがおいおいラクだと思いました.

そんなこんなで,デザインレシピによるコード生成ツールを作りました.

デザインレシピ入力ページ

Github上のコードは,こちらです.

akimacho/design_recipe · GitHub

開発話

開発の方針としては,先にあげた不満点のうち,

1つ目はJavascriptJQueryを使ってDOM操作

2つ目はコードをtextarea上に生成

することで解決します.

JavascriptjQueryは,多少いじったことがあり,また去年以下のような卒業に必要な単位を調べるツールを作ったことがあるので,最低限動くものを作る自身はありました.

単位足りてる?

一方,textarea上でコードを生成することも難しくありません.ですが,CodeMIrrorというtextareaをコードエディタみたくしてくれるJavascriptライブラリがあったので,こちらを使ってみました.あとで紹介したいと思っています.

また,本家との仕様の違いとして,フォームの値を保存していないということがあります.なので,テストを書いたあと,「引数の数」を変更したりするとテストの値は消えてしまします.マゾい仕様です.ごめんなさい.

おわりに

これで読書の進捗が向上すると思います.浅井健一『プログラミングの基礎』を読んでいる方がおりましたら,ぜひ使ってみてください!

プログラミングの基礎 (Computer Science Library)

プログラミングの基礎 (Computer Science Library)