こんにちは。 tomita@atuwebです。
2017/5/15にIT系技術書のレビューサイト(予定)を公開いたしました。
技術書Yome(スモールスタート中)
現在はびっくりするくらいスモールスタート中です。
というのは、会員登録もレビュー機能も現時点で未実装であるためです。
いろいろと、おおらかな気持ちでご覧になってくださいますと幸いです。
実装について
環境
- macOS Sierra
- php 7.0.x
- Laravel 5.4
- Node.js 7.x
- npm 4.4.x
- Vue.js 2.2.x
- Bootstrap
バックエンド
今回はVue.jsの勉強が第一で認め、バックエンドはある程度使い慣れたLaravelでした。
しかしながらプロジェクトの構成については、niiyzさんの記事をリスペクトして設計いたしました。
Laravel5を使ってドメイン駆動設計で作るサンプルアプリ。
http://qiita.com/niiyz/items/d80a9ffdfad3b431dcfd
フロントエンド
Vue.jsで組み立てており、勉強したことはだいたい当ブログの記事としてご紹介しております。
Laravel MixでVue.jsを使う
次の記事を参考に、vue-routerとaxiosを使ってSPAの下回りを構築するところまでの記事です。
LaravelからVueを使ってSPAっぽくする
http://qiita.com/acro5piano/items/712b6b84151b53d0c53b
フォームとv-model
HTMLの状態からv-modelなどを当ててVue.js化するサンプルを掲載。
現在公開している範囲にFormはありませんが、管理機能として書籍登録フォームを実装しており、その処理についてまとめております。
コンポーネントとデータの渡し方
Vue.jsはコンポーネントを複数組み合わせて1つのページを構成することができます。
Vueの実装ポリシーとして_データの流れは親から子への一方通行_というものがあり、その具体的手段としてv-bindやpropsが提供されています。
また、子で起きた変化を親に通知するためにはイベントを経由します。
この記事では簡単にその辺りの実装について触れております。
この時データの受け渡しについてしっかり考慮しておかなければ簡単に実装が破綻してしまいますので、規模が大きくなると難しくなってくるところですね。
Mixin
Mixinは共通処理を外部に切り出すための仕組みです。
「サーバにデータを問い合わせている間はローディング画像を出しておく」サンプルを掲載しております。
トランジション
トランジションとは「 画面の演出効果 」です。
最も簡単なトランジションとして、フェードイン、フェードアウトのサンプルを掲載しております。
もっと早くできると思った
2017年3月に開発を思いつき、リリースまで2ヶ月程度を要しました。
1日みっちコワーキングスペースにこもって もくもく すれば、初期リリース状態まで持っていけるかと思いましたが、無理でした。
己の能力を過信しすぎていましたねー。
機能的な実装に当てた時間は、おおよそ40時間程度かと思います。
その他、記事作成などにも割と時間がかかりました。
(いつも適当な記事を書いているように見えるかもしれませんが、記事1本1本にはそれなりに時間がかかっているのです。)
今後のバージョンアップ予定
- ユーザ登録機能
- カテゴリのバッジ表示
- レビュー投稿機能
頑張ります。
取り急ぎ、私のレビューや書籍点数そのものをもっと増やしていこうと思います。
おわりに
今までアプリをリリースしておりましたが、Web系エンジニアにもかかわらずWebサービスを手がけたことはありませんでした。
Vue.jsの勉強になればと思って何か作ろうと思ったのがきっかけです。
そう言うことで実験サイトですから、もしかしたらフロントエンドをまるっとReactに乗せかえるかもしれません。
それにしても、開発中はとても楽しかったです！