フロントエンド開発Blog

オレには鈍器がある

AI , ES2015 , JavaScript , Mithril , babel , docomoAPI , webpack , チャット , 罵り

Mithril.jsの勉強を始めて5日くらいですこんにちは。

勉強がてらに何か一本、WEBアプリを作ってみようと思い立って作りましたのはこちら、「罵りAIチャット」です。

※このサービスに関するお問い合わせは twitter または facebookページ からご連絡ください。

Mithril.jsの勉強をしていく中で実践経験を詰みたくなり、そんなときにdocomo APIの「雑談API」を見てふと思いつきで作りました。

フロントエンド

バックエンド

バックエンドは至ってシンプルでクロスドメインを解決するため、中継処理をPHPスクリプトで行っています。

フロントエンドは今回メインとなるMVCフレームワークMithrilをはじめ、コンパイル環境にwebpack、記法にES2015を選択するなどモダンな開発スタイルを目指しました。以前このブログでもご紹介した「Mithrilスケルトンキット」をベースに開発しました。

手前味噌ですがMithrilキットはナイスでした。最初に開発環境をしっかり整備しておいたことで開発スピードは劇的に速くなりました。着想からプロトタイプまで1日半程度。全体で2日強でこの形になりました。しかも半分はTOPページのモーションに変にこだわったせいです。アプリ部分自体は込みこみで1日くらいですね。Mithrilの書きやすさ、習得しやすさ、スケールのしやすさの恩恵をうまく享受できた結果かなと思います。

Mithril部分は愚直にModel, ViewModel, Componentの形式に則って記述しました。controllerに何でもかんでも集約しそうになる点が自分にとって課題だと痛感させられました。また、うまく分離できていないとmochaでのテストも不可能になるため疎結合は今後も意識して設計する必要がありそうです。また、mithril-queryを使った、Mithrilならではのテスト方法も勉強になりました。

TOPページはそこまで凝るつもりはなかったのですが、思いつきでパララックスがしたくなって今のスクロールするとアニメーションが展開されていく形に落ち着きました。これは完全に趣味です。いや、このアプリや企画自体がもはや趣味以外の何者でもないんですが・・・(笑)

そんなこんなで作り上げたアプリですが、結構頻繁にdocomoAPIが503になったりするので(特に午前)気長に、気楽に罵られにきていただければと思います(何

こちらのWEBアプリではフリー写真素材を使わせていただきました。

写真素材:

写真素材ぱくたそ

モデル 河村友歌

モデル 茜さや

ページトップへ

関連ページ

ページトップへ