AngularでSPAを作ってみる

久しぶりの投稿。。。

突然ですがAngularを使ってSPAを作成してみました。（勉強中なので機能はまだまだですが）
記録のためにブログ書きます。

画面（UI）とロジックは疎結合にするべきという考えを持ちながらもあまりそういう開発を学んでこれなかったため、
HTML､JavaScriptを使用して画面を作り、WebAPIを使用してサーバから画面表示に必要なデータを取ってくるSingle-page Applicationを作成しようと思いました。

構成
フロント：Angular
バック：JAX-RS
DB：MySQL

構成はいろいろと悩みましたがフロント面はいろいろ調べた結果AngularがSPAの考えを取り入れているうえに、使っている人口数も多そうでしたので選びました。
バックは簡単に作れてかつ、いままで使ってこなかった技術を使用するということでJAX-RSで開発することに決めました。
DBは触ったことある無難なMySQLです。

今回は作成したアプリケーションの紹介になります。
作りのポイント、手順や細かい構成については次回以降に書こうと思います。

アプリケーション

持ってる本管理アプリケーション
「Bookself」

経緯

上でも書いた通り「アプリを作る！」と思いアプリケーションの構成決めから初めてしまったのでどんなアプリにするかのアイディアはまったくありませんでした。
でもコンテンツとなるものは外部APIを呼んでみようかなと考えていましたのでそこからアイディア探しをしました。

外部APIには本データがとれるAPIもあり、そういえば「マンガを買うときに何巻まで買ったっけ？」と困ったことがあったことから、
買う前に本を検索して持っているかどうかがわかるアプリがあればいいなという考えで作成をはじめました。

紹介

検索フォームから確認したい本を検索できます。
検索方法は（APIの）キーワード検索になっています。

検索結果としてAPIから取得した本の画像とタイトルと著者がでます。（ゲームで検索した場合）

検索結果はページングで次の検索結果を表示できます。

BookMarkアイコンをクリックして持っている本を登録できます。
登録した本はアイコンの色が変わるので、どの本がもっているのかすぐにわかるようになっています。
登録した本は再度アイコンをクリックで解除できます。

機能はこれだけですが、本さえ検索できれ目的のどの本を持っているかはわかります。
今後は持ってる本の一覧や検索機能がないとなーと機能追加を考えています。