Vue.js で実装したサイトを公開しました

2017/5/15 に IT 系技術書のレビューサイトを公開いたしました。
2018年いっぱいで閉鎖しました。

実装について

環境

• 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.js の実装ポリシーとして_データの流れは親から子への一方通行_というものがあり、その具体的手段としてv-bindやpropsが提供されています。
また、子で起きた変化を親に通知するためにはイベントを経由します。

この記事では簡単にその辺りの実装について触れております。

この時データの受け渡しについてしっかり考慮しておかなければ簡単に実装が破綻してしまいますので、規模が大きくなると難しくなってくるところですね。

Mixin

Mixinは共通処理を外部に切り出すための仕組みです。

「サーバにデータを問い合わせている間はローディング画像を出しておく」サンプルを掲載しております。

トランジション

トランジションとは「 画面の演出効果 」です。

最も簡単なトランジションとして、フェードイン、フェードアウトのサンプルを掲載しております。

もっと早くできると思った

2017年3月 に開発を思いつき、リリースまで 2ヶ月 程度を要しました。

1日 みっちコワーキングスペースにこもって もくもく すれば、初期リリース状態まで持っていけるかと思いましたが、無理でした。
己の能力を過信しすぎていましたねー。

機能的な実装に当てた時間は、おおよそ 40時間 程度かと思います。

その他、記事作成などにも割と時間がかかりました。
(いつも適当な記事を書いているように見えるかもしれませんが、記事 1本 1本にはそれなりに時間がかかっているのです。)

今後のバージョンアップ予定

• ユーザ登録機能
• カテゴリのバッジ表示
• レビュー投稿機能

頑張ります。

取り急ぎ、私のレビューや書籍点数そのものをもっと増やしていこうと思います。

おわりに

今までアプリをリリースしておりましたが、Web 系エンジニアにもかかわらず Web サービスを手がけたことはありませんでした。
Vue.js の勉強になればと思って何か作ろうと思ったのがきっかけです。

そう言うことで実験サイトですから、もしかしたらフロントエンドをまるっとReactに乗せかえるかもしれません。

それにしても、開発中はとても楽しかったです！