Angularチュートリアルも終えたので、少し応用して簡単なWebアプリケーションを開発してみた

はじめに

私は、今年新卒でPOSシステムを開発する会社に入社しました。それゆえ社内研修でWebアプリケーションの言語やフレームワークについて学びました。大学の時にはプログラミングを学んではいたのですが、Web開発はしたことがなかったです。

どうせ習ったなら自分で何か作成してみようと決意し、実際に簡単なWebアプリケーションを開発したので、どのように進めてきたのか書き記そうと思います。

前提

目標

今回の目標として、Web開発におけるフロントエンドの理解があります。なので、まずはチュートリアルレベルでフレームワークの機能やどのような処理がされるのか、そして使用言語の理解を目標とします。よって、今回バッグエンドやUIデザイン等は深く考えないことにします。

使用している技術

今回使用するフレームワークは、社内研修でも用いたAngularです。Angularとは公式よりHTMLとTypeScriptでシングルページクライアントアプリケーションを開発するためのプラットフォームであり、そしてフレームワークです。今回開発に使用するソフトウェアのバージョンは以下の通りです。

Angular / 9.0
Node.js / 12.18.1
Angular Cli / 10.0.2
Typescript / 3.9.6
git / 2.27.0

基本方針

今回私が開発するアプリケーションは、欲しいものリストです。これを開発する理由は、私がその時一番あれば便利だなと思ったからです。

次にどのような機能を実装するのか考えました。欲しいものリストの機能において、以下の機能は必要だろうと思ったため、優先的に以下の機能を実装しました。

• 一覧表示
• 欲しいアイテムの登録
• 登録したアイテムの削除
• アイテムの詳細表示
• アイテムの編集

ちなみに、実装は、Angularのチュートリアル「Tour of Heroes」に即して開発しました。理由として、すでに完成されたアプリケーションがチュートリアルに用意されているため、それと比較して進めることでAngularへの理解がしやすいかなと思ったからです。

UIデザインは、先ほどの目標で説明した通り今回は深く考えないため、「Tour of Heroes」のデザインを真似ようと思います。

データ管理

登録したデータの管理をするデータサーバは、ひとまずIn-memory Web APIと呼ばれるモジュール を利用してリモートデータサーバとの通信を再現しています。
データサーバには最初から以下のデータを入れています。

/src/app/in-memory-data.service.ts

createDb() {
    const wishlist = [
      {id:1, name: 'Augularアプリケーションプログラミング', url:'https://www.amazon.co.jp/Angular%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B-ebook/dp/B074M54GM5'},
      {id:2, name: 'リーダブルコード', url:'https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655/ref=bmx_3/356-9085470-8634657?_encoding=UTF8&pd_rd_i=4873115655&pd_rd_r=73d67c8f-f95d-4e1a-8e99-80073916e6a9&pd_rd_w=pVkK6&pd_rd_wg=reKIZ&pf_rd_p=911a6ea1-c3a8-407d-a8ac-8cf6660ea77e&pf_rd_r=FZJ6F54BX9SSEPGSFAS2&psc=1&refRID=FZJ6F54BX9SSEPGSFAS2'},
      {id:3, name: 'オブジェクト指向UIデザイン', url:'https://www.amazon.co.jp/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%94%80%E2%94%80%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E5%8E%9F%E7%90%86-WEB-DB-PRESS-plus-ebook/dp/B0893RK6WC/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91+UI&qid=1598110859&s=books&sr=1-1'},
      {id:4, name: 'ゲーミングPC', url:'https://www.lenovo.com/jp/ja/jpad/desktops/legion-desktops/legion-t-series/Lenovo-Legion-T730-28ICO/p/90JF00HHJM?ef_id=EAIaIQobChMIxOie-5Ov6wIVSK6WCh35jALrEAQYAiABEgKNCfD_BwE:G:s&s_kwcid=AL!736!3!331691063463!!!u!294573402136!&cid=jp:sem:100005_TFSM1Q12YF&gclid=EAIaIQobChMIxOie-5Ov6wIVSK6WCh35jALrEAQYAiABEgKNCfD_BwE'},
      {id:5, name: 'fallguys', url:'https://store.steampowered.com/app/1097150/Fall_Guys_Ultimate_Knockout/'},
      {id:6, name: 'ザバス', url:'https://lohaco.jp/product/9596823/?int_id=search_keywordsearch'}
    ];

完成

メインページ

メインページは以下のようになりました。メインページでは、アイテムの一覧表示、アイテムの登録をする入力フォームを表示させるための「新規」ボタンを設置しました。各アイテムの横には削除ボタンを設置しました。

アイテム追加

メインページの新規ボタンを押下すると、新規ボタン位置の下に入力フォームが表示されます。この入力フォームに名前とURLを入力し、登録ボタンを押下することで、アイテムの一覧のリストの末尾に入力データが追加されます。

例えば、以下のデータを登録するとします。
登録名：GitHub実践入門
登録URL：https://www.amazon.co.jp/dp/B07JLJSDMJ/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

登録すると、リストの末尾に入力データが追加されているかと思います。

登録したアイテムの削除

登録されているアイテムの削除は、一覧の各アイテム名の横にある✕ボタンをクリックすることで、アイテムが削除されます。

アイテムの詳細

一覧のアイテムをクリックすると、詳細ページに遷移します。詳細ページでは、登録したアイテムの名前とURLを表示します。ページの最下部には、ホームボタンと編集ボタンを配置しており、編集ボタンをクリックすると、名前とURLを編集できるページに遷移します。

ちなみに、ホームボタンをクリックすると、一覧があるメインページに遷移します。

アイテムの編集

先ほど、アイテムの詳細ページにて編集ボタンがあり、クリックすることで編集ページに遷移すると説明しました。

このページでは、アイテムの名前、URLを編集できるようになります。アイテム名やURLを編集して保存ボタンをクリックすることで、再登録ができます。

メインページの一覧を確認してみるときちんと編集された情報になっているかと思います。

ちなみに、編集ページでホームボタンをクリックすると未編集でメインページに遷移します。

感想

ひとまず自分の考えた機能を実装したアプリケーションは開発できました。目標に対してTypescriptやAngularの理解が出来たのかどうか書いたのですが、コンポーネントやルーティング、Angularの機能や役割に関してチュートリアルレベルで理解はできたかなと思います。やっぱり自分で考えて開発すると理解が早いと感じました。「習うより慣れよ」ですね。

大変だったこととして以下を挙げさせてもらいます。

• 「コンポーネント」、「ルーティング」の機能や書き方

今までC++とかがメインで使ってきたため、急にコンポーネントとか言われても？状態だったのですが、やはり経験ですね、チュートリアルも見たりすることで分かってくることができました。

• リストへアイテムの追加

リストの末尾にアイテムを追加していくのですが、TypeError: Cannot read property 'push' of undefinedとエラーが出てしまい、なぜか追加されない状態が数日続き大分困りました。なんとか解決できてよかったです...

ちなみに、全部実装するのに大体2~3週間近くかかりました...。仕事終わりに少しずつ実装したり、休日も使いはしたのですが、もう少し早くできるように精進していきたいです。

最後に

今回初めて、Webアプリケーションをフロントエンドに絞って開発しました。改善点はまだまだたくさんあるので、どんどん機能やデザインを改修し記事にしていこうかと思います。そして、初めて開発する人は、まずはチュートリアルベースや、既存のアプリケーションを真似て一部自分で変えてみる方が、モチベーション維持や理解はしやすいのかなと個人的には思います。

最後まで長々と見ていただき、有難うございました。

参考

書籍
Angularアプリケーションプログラミング

Webサイト
Angularチュートリアル「Tour of Heroes」