第1章 WEBアプリ開発体験プロジェクト

1-1. どんなアプリを開発するのか
1-2. アプリ開発プロセス
1-3. 開発企画（どんなアプリなのか）
1-4. 要件定義（機能を決める）
1-5. 基本設計
1-6. 詳細設計
1-7. プログラミング

中高生を対象としたプログラミング教室では、データを読み書きするアプリを開発します。
アプリは、インターネットに接続されたスマホやPCで操作できます。データは、インターネットに接続されたコンピューターに保存します。
社会人や企業が実際に使っている技術を体験できるプログラミングです。

本章ではアプリ開発のプロセスについて説明します。

1-1. どんなアプリを開発するのか

利用者が文章を入力したり、読んだりできるCRUDアプリを開発します。データを読み書きするのは、会社業務で使うアプリの基本機能です。

データを読み書きするアプリの例

［つぶやき日記帳｜やることリスト（To Do List）｜備品管理｜会議室予約｜仕事タスク管理｜その他］

CRUDとは、データベースを操作する４つの機能の頭文字です。

  • Create（作成）新しいデータを追加します
  • Read（読み取り）情報を表示するためにデータを読みます
  • Update（更新）保存されているデータを変更します
  • Delete（削除）保存してあるデータを削除します

システム構成

コード（プログラム）を実行するコンピュータは、インターネットのサーバーを使います。
この構成にすると、インターネットに接続できるスマホやPCから、安全に・いつでも・どこからでも、アプリにアクセスできるようになります。
データ通信のセキュリティ対策には、必要な通信だけ許可するファイアーウォールなどを設置します。
データ通信そのものには、盗聴できないように暗号化して情報を読み取りできないようにします。
アプリ開発のセキュリティ対策には、秘密鍵をもったPCだけがサーバーにログインできるSSH鍵方式を使って、安全に開発できるようにします。

サーバー構成（アーキテクチャ）

ホストコンピューターは２台で構成します。
コンピューターとしての呼び名「サーバー」と、ミドルウェアとしての呼び名「サーバー」が同じであり、紛らわしいので、ここではサーバーを実行するコンピュータを「ホスト」や「ホストコンピュータ」と呼ぶ場合があります。
大規模になると画面を表示する役割のWEB用ホスト、プログラムを処理する役割のAPP用ホスト、データを保存する役割のDB用ホストと３台以上に分散する場合があります。

1-2. アプリ開発プロセス

アプリはソフトウェアの一種です。
ソフトウェアには、スマホのアプリ、ゲーム、文書作成ソフトなどの「アプリケーションソフトウェア」があります。
ソフトウェアを作るときは、まず設計してから作り、最後にテストして確認します。この流れを「V字モデル」と呼び、設計とテストが対応していることを表しています。

設計フェーズ

テストフェーズ

1-3. 開発企画（どんなアプリなのか）

やりたいことを記録する「ToDoアプリ」をつくりたい

1-4. 要件定義（機能を決める）

できることを列挙する

  • Create 作る： 新しい記事（やること）を登録できる　
  • Read 読む： 記事の一覧を表示できる
  • Update 更新： 記事を編集・変更できる
  • Delete 削除： 記事を消すことができる
  • スマホやPCでアプリを使うことができる
  • 毎日、外出先など、どこからでも使える。

1-5. 基本設計

要件定義で決めた機能をどうやって実現するのか考える

記事を表示する画面

表示する情報は、ID、完了フラグ、やること内容、完了実績フラグとする。

機能ボタンと画面遷移

［新規作成］ボタン、データ入力画面、［データ書き込み］ボタン、［編集］ボタン、データ編集画面、［更新］と［削除］のボタンを表示する。

アーキテクチャ設計

アーキテクチャとは、「アプリやシステムがどんな部品でできていて、どうやって動いているかを考える設計のこと」です。

  • WEBアプリは、Nginxで実現する
  • バックエンドアプリは、Node.jsで実現する
  • DBは、MySQLで実現する
  • WEB画面は、HTML/CSSで描く
  • WEBアプリの機能は、JavaScriptでコーディングする

1-6. 詳細設計

いきなりプログラムを書き始めると、うまく動かない・修正が大変、チームで作れないなどの問題が起こります。
「詳細設計」は、どんな機能が必要で、どう動くかを細かく決める作業がとても大切です。

もし、いきなりプログラミングを始めると、パーツのいくつかを作り直しすることになります。

リストビュー List View

「記事を表示するだけ」なのだが、実は難しい。例えば100件のデータがあると最初の30件だけ表示して残りはページ送りする（Pagination）機能が必要。
ページ送りは次のレベルアップ講座で実装するとして、今回は、全件表示する記事表示ビュー（ListView）と新規（NewButton）, 編集メニュー（EditButton）を完成させましょう。

アイコン

Bootstrap Icons を使う <https://icons.getbootstrap.jp/>

URL設計とDBテーブル設計

  • フロントWEBサーバー http://razpi00.local/
  • バックエンドサーバー　http://razpi00.local:3000/
  • DBサーバー http://razpi01.local:3306/

フローチャート

機能が多くて整理しづらい場合はフローチャートを書くと、理解しやすくなります。
コーディングしていくうちに、フローチャートを変更したり、処理を追加したりして複雑になります。
開発するときよりも、アプリを使っていくうちに不具合の原因を探したり、改良したりするときに便利です。

画面設計（新規作成する画面）

記事（やること・目標）をテキスト入力して［保存］してリストに戻るボタン、何もせずにリストに戻るボタン(3)

画面設計（記事を編集する画面）

テキスト更新できる。実績テキストも入力できる。完了フラグを登録できる。削除もできる。

1-7. プログラミング

いよいよ、コーディングを着手します。
でも、その前に、LinuxコマンドやSQLクエリ、そしてサーバーのインストールも体験しましょう。

次の記事に続く

コメントを残す