2nd Semester振返り③

Student Life in NUS

2nd Semesterで履修したModuleの具体的な内容を感想とともに書きます。

2nd Semester 履修科目は以下3科目です。
① IT5004 Enterprise Systems Architecture Fundamentals
② IT5006 Fundamentals of Data Analytics
③ IT5007 Software Engineering on Application Architecture

今回はSoftware Engineering on Application Architectureについて振返ります。

受講前の状態

このモジュールを受講する前の私の知識スキルです。

  • HTML, CSS, Javascriptを書いたことは一度もない
  • WordPressでブログを書くことはチャレンジ済
  • Front-end engineer, Back-end engineerがそれぞれ何をしているのかを知らない
  • サーバーの仕組みがわからない(クラウドとオンプレの違いは知っている)

以前に投稿したFundamentarls of Data Analyticsと同様にこちらも事前知識ほぼなしからスタートでした。

Software Engineering on Application Architecture

Lectureは12回

WeekLecture
1Introduction to Software Development
21. Tools and Techniques for Software Development
2. Basics of Web Programming (HTML)
3Basics of Web Programming (JavaScript)
4Web-based Front End Development: React and React components
5Cloud-based back-end Development: Express API
6Cloud-based back-end Development: MongoDB
7Advanced Topics on web development: Integration with 3rd party API
8Advanced Topics on web development: React router
9Advanced Topics on web development: React forms, React Bootstrap
10Mobile Application Front End Development: ReactNative basics
11Mobile Application Front End Development
12Advanced Topics: Performance of Applications and Design for Security and Privacy

6つの個人課題

1,Web Service Architectureに関するケースレポート(全5題)

以下は一部抜粋です。

『A社は、極めて小型で超高速なカーボンナノチューブベースのプロセッサを発表した。このプロセッサは、機械学習の演算処理も可能でより高速に実行できるとしている。これに加えて、TB(テラバイト)のデータを保存できる超小型のストレージシステムも発表した。他にも多くの企業が、これらのテクノロジーを用いてモバイル端末を作ろうとしているが、あなたが設計するソフトウェアはどう変わるのでしょうか。』

2,電車の簡易座席予約システム:HTML + CSS + Javascript

鉄道の予約オペレーター向けに座席の予約システムを開発するという設定の課題です。最低限実装する機能は新規予約、予約の変更取消、残席数表示、予約状況一覧表で、データベースは不要。

3,電車の簡易座席予約システム:React.js & Docker

上記設定と機能をReact.jsを用いて実装。React.jsとはFacebook社(現Meta)が開発したフロントエンド開発に用いられるJavascriptのライブラリのことで、FacebookやInstagram, Netflix, AirbnbなどのUI構築に使われている比較的新しい手法と言われています。

またReact.jsでUIを構築して実行するための環境としてDockerというソフトウェアを使用しました。

4,電車の簡易座席予約システム:React.js + MongoDB + GraphQL

これまでやってきた課題2と3はフロントエンド開発のみだったので、課題4ではデータを保持するためのデータベースを構築し、データベースに対する処理命令(新規、参照、変更、削除)をするところまでが範囲となります。

データベースはMongoDB、処理命令にはGraphQLというWeb APIを使用しました。

5,課題管理システム:React Native

課題5ではWebブラウザ上で動作するWebアプリケーションではなく、AndroidはiOSで動作するいわゆるスマホアプリを作成するということで、React NativeというスマホアプリのUI作成用を使用しました。

AndroidとiOSでそれぞれ別のプログラム言語を使用して開発しなければならないのですが、Facebook社(現Meta)によってReact Nativeが開発されたことによって、ひとつの言語でAndroidとiOSの両方の開発が可能になったとのことです。

6, グループプロジェクトのパフォーマンス評価

最後は少し毛色の違う内容ですが、後ほど記載するグループプロジェクトで作成したアプリのパフォーマンス診断のレポートを作成するというものです。

アプリを起動してから画面が表示されるまでに10秒もかかったらユーザーは離れていくと思いますが、この課題ではGoogle Chromeの拡張機能として使用できる「Lighthouse」を使用してスピードやセキュリティなどのパフォーマンス診断を行いました。

グループプロジェクト

2人1組で実施するプロジェクトワーク。

自分たちの周囲で不便に感じること、あったらいいなと思うことを考え、その解決策となるソフトウェアを開発するという極めて実践的な内容。原則的には授業で扱ったReactを使用すること以外は大きな制約はなく、必要に応じて3rd PartyのAPIを利用することも認められている。

2月から開始し、アイデア出し&システムデザイン→フロントエンド開発、バックエンド開発、デプロイメントまでを5月1日の最終提出日までに実施。月に1度程度担当教授から30分程度のグループフォローアップMTGにてプロジェクトの進捗報告やソリューションに関するアドバイスを受けながら実施。

私のグループは、地図上に旅行で撮った写真を地図上にプロットし、その旅行の行程を記録できるような自分だけのアルバムを作ろうというコンセプトのWebアプリケーション開発をしました。

技術的にはGoogle Map APIを使用して地図を表示し、Google Drive APIを使用してGoogle Driveに接続し、そこに保存されている写真を指定します。そして、写真が保有している緯度経度をもとにGoogle Map上に写真をプロットするのとともに、撮影時間の順番に地図上にルートが表示されるというものです。

名前は少し単純ですが、Map + Memoryで『Mapmory』

感想

大変だったがすごい達成感

初回と2回くらいの講義を受けた印象では意外についていけるかもと思ったのですが、大きな勘違いでした。

3回目の講義でさらっとCSSとJavascriptを説明したあと、「じゃあこれでみなさん、Javascript詳しくなっただろうから次からReactいきますねー」と軽いトーンで言われ、いやいやJavascriptの説明2時間くらい聞いただけで理解できないですけど。。ましてやそのあと出された個人課題2もかなり難易度高く一気に絶望モードに。

データ分析基礎のモジュールと同様、ここからUdemy, Youtubeをフル活用してまずはHTML, CSS, Javascriptをある程度スラスラ読める & 簡単な動作な\らスラスラ書けるレベルにまでトレーニングをすることにしました。

その間にReactの授業が進んでいき、いつのまにかバックエンド開発やWebAPIまで進んでいて、個人課題3以降これらをキャッチアップするのにかなり苦労しました。結局課題提出日の前3日間くらいはほとんど寝ることができず。常に個人課題の提出期限に追われながら足りない知識を吸収していくような毎日。

これに加えプロジェクトワークでは授業でカバーしていない内容もあったので、インプット過多状態に。データ分析の授業と並行してやっていたので、PythonとJavascriptでコードがごちゃごちゃになっていきました。

でもとても楽しかったし達成感がありました。

自分が書いたコードがちゃんとWebアプリケーションとして目に見えて出来上がっていく過程は、モノづくりと同じ感覚があり、金融機関で長らくお金という形のないサービスを提供してきた私にとって新鮮で興味深いものでした。

またソフトウェアというものがどのような構造になっていて、どのように構築されているのかを明確に理解できるようになったので自分の成長を感じることができることができました。

環境設定に大苦戦

このモジュールでは開発環境を構築するために様々なソフトウェアをインストールする必要があり、実際にコードを書き始める前に環境設定で何度も躓きました。

React.jsの実行環境を構築するためにDockerやアプリ開発をするためにAndroid Studioというものをインストールするなど、ただ単にソフトウェアをインストールするだけでなく、他のソフトウェアとの連携やそれに伴う設定項目も多くあり環境設定を完了するのに丸一日かかることもざらにありました。

Stack Overflowというデベロッパー向けのYahoo知恵袋みたいなサイトに解決策を探しにいきますが、自分が使っているOSの種類やバージョンが異なったりすると解決しないことも多々あり。どうやっても解決できずになかなか課題の内容に取り組めないこともありました。

やはりGoogleってすごい

プロジェクトワークではGoogleが提供するAPIをフル活用しましたが、Google Cloud Platformの提供しているサービスを知るにつれてGoogleの凄さを改めて実感することができました。

普段はユーザーとして各種サービスを使っているだけでは気づきませんが、デベロッパーとしてGoogleの提供するAPIを自分のソフトウェアに組み込む際に、ユーザーとして使っているような機能を簡単に実装することができるのです。

私みたいな初学者でも、ガイダンスに沿ってAPIを選択し、GoogleやGithub等で提供されるTutorialを読めば(なんならコピペすれば)、自分の開発しているソフトウェアが”それっぽく”なるのです。デベロッパーをサポートするインフラとしてとてつもなく重要な役割を果たしているのだなと思いました。

3rd Semester以降もソフトウェア開発系の授業かプロジェクトをやっていきたいと思っています。

反省が活かされずかなりの長文になってしまいましたが、今回は以上です。