研修の成果~Angularを使ったルーレットアプリ~ (桂) | 介護のプロ。株式会社ケアリッツ・アンド・パートナーズ
menu

研修の成果~Angularを使ったルーレットアプリ~ (桂)

研修の成果~Angularを使ったルーレットアプリ~ (桂)

初めまして。IT事業本部の桂です。

ケアリッツ・アンド・パートナーズの特徴の1つであるIT事業本部について、「いったいどんなことをしているのか」「どんな社員がいるのか」を書いていこうと思っています。。

今回は研修で作ったルーレットについて書こうと思います。

まず、「なぜルーレットを作ろうと思ったか」「どうやって作ったか」「今後は何を作りたいか」の順で書いていきます。

まず、ルーレットを作った理由は以下の2点です。

  1. 研修に役立つ
  2. 使いたいツールがあった

ルーレットは研修で回答者を指名するときに使えます。。実際に作ったのは研修の終盤だったので実際に使われることはありませんでしたが、役立つものを作るのはモチベーションに大きく貢献しました。

2つ目の理由の使いたかったツールとはTypeScriptのフレームワークAngularです。
研修後に入るプロジェクトでAngularというフレームワークを使うと聞き、Angularに慣れておきたいと思いました。初めにAngularについて調べて、Angularを使えばより良いルーレットが作れると思い作ってみることにしました。

では次に、Angularの特徴と、Angularをルーレットにどう生かしたのかについて書いていきます。

AngularはSPA(シングルページアプリケーション)というタイプのアプリケーションを作るためのフレームワークです。SPAの特徴は画面遷移をする際にページの再読み込みを行わないことです。つまり通信にかかる時間をかけずにページを行ったり来たりできます。
一方で、最初にページを読み込む際にすべてのページを読み込むことになるので最初の読み込みに時間がかかることが欠点です。

こうしたメリット・デメリットからニュースサイトのようなたくさんのページを見て回るウェブサイトでは使われず、業務用アプリケーションのような数か所のページを何度も行き来するアプリケーションでよく使われます。

Angularのもう一つの特徴は双方向バインディングです。普通のアプリケーションはボタンを押すといった動作をきっかけに入力を読み取り出力に反映させます。しかしAngularの双方向バインディングを使えば何かを入力したらリアルタイムで出力に反映させることができます。

今回のルーレットで使った機能は主にこの双方向バインディングです。

双方向バインディングをどのように使ったかを説明する前にどのようなルーレットを作ったかの紹介をします。

つくりはシンプルでボタンを押したらランダムに名前が出てくるというものです。
工夫した点はボタンの下にあるチェックボックスです。
このチェックボックスでチェックが押された人だけがルーレットの対象になるようになっています。そして、ルーレットで選ばれた人のチェックボックスは自動で外れるようになっています。そしてここで双方向バインディングが使われています。背後で持っている配列の値とチェックボックスの情報を結びつけることでリアルタイムにチェックボックスが押されたかの情報とルーレットに選ばれたかの情報を反映させることができています。

 

このほかにも、コンポーネントという単位でソースコードをまとめて、ページの見た目と処理をまとめて部品として扱うことができるなど便利な特徴がたくさんあるのですがそれらを語るにはまだまだ理解が足りないです。

 

Angularには、このほかにも多くの機能があるので今後はAngularの利点を生かしたものを作っていきたいと思っています

 

最後に、僕自身Angularの勉強を始めてから数週間しかたっていないのでもし間違った記述があったら優しく教えてください。

そして、Angularの魅力を伝えきれたとは言えないこの記事でAngularに興味を持った方はAngularとAngularJSの違いに気を付けてください。Angularは、日本語のドキュメントやブラウザ上の開発環境などが整っていて勉強しやすいフレームワークだと思います。