Webアプリつくってみよう 1日目 / 全5回

こんにちは、Gaji-Labo エンジニアの山崎です。
この記事は Gaji-Labo AdventCalendar 2015 2日目の記事です。

今年は TechShare に関連する内容ということで、
Webアプリケーション を作ってみようと思います。
（完成品は Github で公開予定です）

前回の AdventCalendar は書評でしたので連載投稿はできませんでしたが、
今回はなんと5回も担当がありますので連載していきます。

私は普段 Ruby を書いているのですが、
Javascript にも手を出しているということで、
Webアプリは Ruby、UIは JavaScript で作っていきます。

開発環境

まず、私の環境ですが MacOSX で開発しています。
エディタは Vim で書いています。（信者を増やそうとかいう魂胆はありません）

Webアプリ

Ruby はせっかくなので最新版、2.2.3 を使用します。
Rails も最新版、4.2.5 を使用します。
MySQL は 5.5.20 です。（最新版を使うことに抵抗を感じます）

Webアプリ側はこの3つがあればなんとかなると思います。
足りなくなった時点で追加はしますが…

ちなみに、Rails でなくても Sinatra を使ったり、他のフレームワークでも問題ないです。
記述方法はそれぞれ変わりますがAPIとして作っていきますのでインターフェースが揃えばOKです。
データベースに関しても同様です。

JavaScript

jQuery、Backbone.js、CoffeeScript を使用します。
それぞれバージョンは最新版です。（jQueryは1系の最新版です）
また、テスト用に Mockjax を使用します。
Mockjax を使ったことが無い人は必見です！APIとの連携テストが捗ります。

作るもの

今回は 郵便番号から住所を検索するAPI を作ります。
ありきたりですが、手頃なサイズのアプリケーションだと思います。
（実用性があるかどうかは別）

要件定義

郵便番号データは 日本郵便のサイト からダウンロードできるデータを使用します。
http://www.post.japanpost.jp/zipcode/download.html

郵便番号検索API

郵便番号をURLパラメータから受け取り、合致する市区町村情報をJSONで返却します。
郵便番号は 全角・半角・ハイフン の有無を問いません。
ただし、アルファベット・ハイフン以外の記号 は受け付けません。

# JSONフォーマット
{
  address1: "都道府県名",
  address2: "市区名",
  address3: "町村名",
  error: "エラーメッセージ"
}

UI

郵便番号入力フォームを有し、下部に合致する住所を表示するエリアを設けます。
郵便番号入力フォームは input ひとつ、submit ひとつで構成されます。

郵便番号はユーザが入力したそのままのデータをURLパラメータとして、
APIにAjax通信で送信します。
返却されたJSONの内容を住所表示エリアに表示します。

エラーメッセージが含まれる場合はエラーメッセージを表示し、
住所は表示しません。

テストについて

テストをしっかり書かねばならぬ。
だがしかしそんな時間があるのか…
という日々の課題に沿って、ゆるくテストを書きます。

Webアプリ

単体テストを必須とし、Rspec を使用します。

UI

対象ブラウザは Chrome 最新版とします。

1日目まとめ

少し長くなりましたが、残りの4日をかけWebアプリ側、
UI側で作業分担して進行していく様子をご紹介できればと考えています。

それぞれが担当する箇所を分散することによりタスクの分解がしやすく、
並行して進めることが可能なのでお互いを待つ必要がありません。

この手法は Gaji-Labo で実践しているものではありませんが、
私が今後チャレンジしていきたいところなので書いていこうと思いました。

それでは、次回はWebアプリ側の実装をお見せしたいと思います。

関連リンク