elm

elmでwebアプリ作成 1 〜 モックDB

elm tutorialをやったけどあまり理解していないので、ほぼ同じ要領で少し違うものを作って見ます。

施設の情報をまとめるようなサイトを作って見ます。

各種ライブラリのバージョン

はじめの時点で、npmとyarnが入っている前提です。webpackは途中でインストールします。

  • npm: 3.10.10
  • yarn: 1.5.1
  • webpack: 4.17.1

準備

# プロジェクトディレクトリ作成
$ mkdir shisetsu-0.0.1
$ cd shisetsu-0.0.1

# package.json作成(yarn v1.5.1)
# とりあえず全部デフォルト
$ yarn init

# json-serverをインストール
$ yarn add json-server@0.9.5

api.jsとやらを作る

さっきのjson-serverを使って簡易的なDBサーバーを作れるようです。プロジェクトルート直下(shisetsu-0.0.1/)に作ります。

api.js

var jsonServer = require('json-server')

var server = jsonServer.create()
server.use(jsonServer.defaults())

var router = jsonServer.router('db.json')
server.use(router)

console.log('Listning at 4000')
server.listen(4000)

db.json

id, name, opening(開館、閉館時間), address, postcode, web_site, descriptionを入れておきます。

{
    "facilities": [
        { "id": "1", "name": "東京タワー", "opening": ["9:00", "22:30"], "address": "東京都港区芝公園4丁目2−8", "postcode": "105-0011", "web_site": "https://www.tokyotower.co.jp", "description": "東京都港区芝公園にある総合電波塔の愛称である。正式名称は日本電波塔(にっぽんでんぱとう)。1958年12月23日竣工。東京のシンボル・観光名所として知られる。(出典:wikipedia)"},
        { "id": "2", "name": "東京スカイツリー", "opening": ["8:00", "21:00"], "address": "東京都墨田区押上1丁目1−2", "postcode": "131-0045", "web_site": "http://www.tokyo-skytree.jp", "description": "東京都墨田区押上一丁目にある電波塔(送信所)である。観光・商業施設やオフィスビルが併設されており、ツリーを含め周辺施設は「東京スカイツリータウン」と呼ばれる。2012年(平成24年)5月に電波塔・観光施設として開業した。(出典:wikipedia)"},
        { "id": "3", "name": "東京ドーム", "opening": ["", ""], "address": "東京都文京区後楽1-3-61", "postcode": "112-0004", "web_site": "https://www.tokyo-dome.co.jp", "description": "東京都文京区後楽一丁目にあるドーム型野球場。プロ野球・セントラル・リーグ(セ・リーグ)の読売ジャイアンツ(読売巨人軍)が専用球場(本拠地)としている。(出典:wikipedia)"},
        { "id": "4", "name": "日本武道館", "opening": ["", ""], "address": "東京都千代田区北の丸公園2番3号", "postcode": "102-8321", "web_site": "http://www.nipponbudokan.or.jp", "description": "東京都千代田区北の丸公園にある武道館。日本伝統の武道を普及奨励し、心身錬磨の大道場としての役割を担うことを設立趣旨とする。日本武道協議会加盟。武道以外の屋内競技場、多目的ホールとしても利用される。管理運営者は公益財団法人日本武道館。(出典:wikipedia)"},
        { "id": "5", "name": "東京ディズニーリゾート", "opening": ["", ""], "address": "千葉県浦安市舞浜1-1", "postcode": "279-0031", "web_site": "https://www.tokyodisneyresort.jp", "description": "日本千葉県浦安市舞浜にあるウォルト・ディズニー作品の世界観を表現したテーマパーク群である。東京ディズニーランドと東京ディズニーシーから構成され、京成グループのオリエンタルランドがフランチャイズ経営している。(出典:wikipedia)"},
    ]
}

以上で、モックサーバーを立てる準備ができました。

node api.js

で、http://localhost:4000/facilitiesへアクセスすると、以下のように確認できます。

http://localhost:4000/facilities/1などとすれば、特定のidの情報を取得するとこともできます。

elm tutorialと同様、webpackを使うので、次はpackage.jsonなどを書いていきます。
次 elmでwebアプリ 2

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です