# インターンシップ開発体験：上 v3.5

ようこそ。この開発体験では、架空世界の銀行「もねた銀行」のインターネットバンキングシステム「moneta」を題材に、実際の開発における様々な局面を体験します。

システム開発の仕事では、いきなりプログラムを書き始めるわけではありません。最初に要件定義や設計などの事前準備を行い、プログラムを書き、テストを実施してバグを発見します。一連の決まった手続きに沿って、バグの少ない、品質の高いシステムを作り上げていくのです。

大変短い時間ですが、これらの手続きを一通り体験して、実感を持ってもらうことがこの開発体験の目的です。

- 開発体験のWEBアプリケーションの構成の理解
- バグの発見と修正方法の検討
- 新機能の要件定義、設計と実装
- テストと動作確認

## 1. 「moneta」の操作
monetaは「もねた開発」が開発中のシステムですが、スケジュールが大きく遅延しており、しかもバグが沢山残っています。遅れを取り戻し、品質を向上させるための特別チームとして、皆様は開発プロジェクトに途中から参加しました。

これから一通り機能を操作してもらいますが、発見したバグは後ほど報告するため手元にメモを残しておきましょう。また、不親切な操作や、改善すべき点、セキュリティ上の懸念などがあれば、それもバグとして報告していきましょう。

### 端末へのログイン
まずは手元の端末にログインしましょう。 ログイン画面で5963と入力します。

### Chromeの起動
デスクトップが表示されたら、画面下のタスクバーから、chromeのアイコンを選び、クリックして起動します。

### URLの入力
Google Chromeが立ち上がったらアドレス欄に、ホワイトボードに記載されたURLを入力してEnterキーを押して下さい

### トップページ
トップページが表示されます。

右上のLogonをクリックして下さい

画面の見た目は変わりませんがURLに/topと付いた様です。
（まだユーザーIDを持っていないためと思われますが、何か一言案内が欲しくなりますね）

では、「新規ユーザー」ボタンを押して下さい。

### 新規ユーザー画面
新規ユーザー画面が表示されます

ユーザーID、パスワード、かな氏名は必須入力となっています。
入力したら「ユーザー登録」ボタンを押して下さい

### エラー画面
入力した内容が正しくない場合エラーメッセージが表示されます。

修正して再度「ユーザー登録」ボタンを押して下さい。

### 登録結果画面
無事に登録された様ですね。
（ただ、URLの番号が気になりますね。気になる点はメモを取っておきましょう）
「ログインページへ」ボタンをクリックします。

### ログイン画面
ログイン画面が表示されます。

先ほど登録したユーザーID、パスワードを入力して、「ログイン」ボタンを押して下さい。

### メニュー（マイページ）
メニューのページが表示されました。「入出金明細」「口座開設」「振込」「ローン」の4つのメニューがあるようです。

色々ボタンを押して画面を変更させてみましょう。 左上の「もねた銀行」のボタンを押すと、いつでもメニューに戻れるようです。
URLからすると、ここはマイページと呼ばれているようです。

### 入出金明細
マイページの「入出金明細」ボタンを押してみましょう。残高一覧のページが表示されました。まだ預金は無いですね。

### 口座開設
マイページに戻って「口座開設」ボタンを押してみましょう。
普通預金の開設のようです。好きな支店を選んでみましょう。

入力したら「開設する」ボタンを押して下さい。

### 口座開設結果
無事に開設されたようです。
一つ前の画面で貸越利息の説明はありましたね。

### 振込
隣の人に振込してみましょう。マイページから、振込ボタンをクリックします。
まずは振込元口座を選ぶようです。先ほど作成した口座を選びます。

### 振込先銀行
次に振込先銀行を選びます。

今回は隣の人に振り込みますから「もねた銀行」を選択します。

### 振込先支店
次に振込先支店を選びます。
隣の人に、先ほど作成した口座の支店を聞いて、その支店をクリックしましょう。

### 口座一覧、、、？
この支店のお客様の口座の一覧のように見えるものが表示されていますね。
これは便利ではあるかもしれませんが、果たして何も問題はないのでしょうか？
取り敢えず、画面ツアーとしては、このまま進んでみましょう。
隣の人に口座番号を聞いて選択しましょう。

### 振込金額
振込金額を入力する画面が表示されました。額は借越可能金額の範囲で好きな数字を入れましょう。

「振込実行」ボタンをクリックします。

### エラー画面
無効な入力が合った場合は、エラーメッセージが表示されます。エラーチェックは十分でしょうか。色々入力して試してみましょう。バグを発見したらメモしましょう。

### 振込確認画面
振込実行の確認画面に遷移します。振込先や金額の記載は正しく行われているでしょうか。
では、「振込実行」ボタンをクリックします。
（さっき同じ名前のボタンをクリックしたような気もしますね、、）

### 振込完了画面
振込を受け付けたという画面に遷移しました。
「口座一覧へ」をクリックし、状況を確認してみましょう。
（画面ツアーでは試しませんでしたが、
「キャンセル」をクリックしたらちゃんと機能していたのでしょうか？
あとで確認してみましょう。）

### 残高一覧
残高一覧画面に遷移します。金額の増減は正しく行われているでしょうか。
（あれ、、さっき押したボタンの名前と画面の名前が微妙に違うような、、）

口座の横の「照会」ボタンを押してみましょう。

### 取引明細
取引明細画面が表示されました。振込の入金、出金の結果が確認できます。今回は試しに1000円の振込をしてみましたが、、50円は利息取られているみたいですね。これは結構驚きますね。定額の振込手数料ではないのです。都度5%取られるのは良いのでしょうか？どこかの案件で、利率に関する法律に対応しているのを見た気がするのですが、限度に関する詳細は覚えていないですね・・・業務要件に関する確認事項もメモしておきましょう。また、結果的には残高は合っていると思うのですが、途中経過におかしな点がないでしょうか。バグとしてメモしておきましょう。

### ローン
マイページに戻って「ローン」も試してみましょう。

何ということでしょう！画面ツアーの最後というところで、まさかのエラーメッセージが表示されてしまいました。これは単純にページ遷移に失敗しているだけ、、機能としては存在している、、そう信じたいのですが、一先ずバグとしてメモしておきましょう。

## 2. 障害の調査・報告
それでは、今から1時間で先ずは個人のワークとして、バグの調査を行い、その後報告をしていきましょう。色々な操作を自由に試して、バグを発見します。

### 障害報告（レビュー準備）
先ずは手元のメモ用紙、あるいは端末上のメモ帳に書き留めて行きましょう。
報告内容は、以下の内容を意識して書いてみましょう。
- 発生：何が起こったか
- 条件：いつ何の画面のどの箇所でどうやったら起こったか
- バグ：何が問題か
- 正常：何が期待する結果、動き、振る舞いか

:::success

:bulb: **何が問題か、根拠を良く整理しましょう**

自分は問題だと思っても、他の人からは問題に見えないかも知れません。
相手に納得してもらえるような根拠を用意してみましょう。

- 類似のアプリではこうだった
- 法律的に問題
- セキュリティ的に問題。悪用される恐れがある

仕事は必要なことを必要な時間かけて行うべきで、
無駄なことと判断されると対応できません。
「そのままリリースしても誰も困らないんじゃない？」と言われると想定しましょう。
他にも色々根拠があると思うので、是非必要な仕事だと説得する準備をしましょう。

:::

### 障害報告（レビュー）
さて、発見したバグのリストアップは完了したでしょうか。現在、グループになっていますが、グループ内でお互いに自分がリストアップしたバグの報告をしましょう。その際、報告者以外のメンバーは「報告内容」に過不足がないか確認して指摘します。報告内容を更新しましょう。
（意外と、相手に伝わる、かつ端的な記載というものは難しいものです）

## 3. 開発環境の準備
それでは、発見したバグの修正や、操作性の改善を行うための準備を進めて行きましょう。

実際にシステム開発を行う際には、プログラムを作成・修正しながら都度確認を行います。単体試験と呼びますが、その際には全員で共通のサーバを利用するのではなく、各自の端末内にサーバ機能を立ち上げて試験を行います。

### ターミナルの立ち上げ
開発サーバの立ち上げは、Windowsの「ターミナル」を利用します。 タスクバーのアイコンをクリックしてターミナルを立ち上げます。

初期状態ではWindowsのPowerShellがユーザ権限で開いているかと思います。作業はUbuntuで行うため、ターミナル上部の下矢印をクリックします。

メニューからバージョン表記のない無印のUbuntuを選択します。
タブ形式で二つ目のウィンドウが開きました。二つのウィンドウはタブをクリックするか、ctrl+tabで切り替えられます。

ターミナルからは、キーボードによりコマンドを入力して操作します。
事前にダウンロードしてあるソースコードを利用して開発を進めてみましょう。

### プロジェクトホームへ移動
これから作業をするディレクトリである、プロジェクトホームに移動します。ターミナルから以下のコマンドを入力します。

moneta@localpc:~$ cd
moneta@localpc:~$ pwd
/home/moneta
moneta@localpc:~$ cd project/rails/moneta3.5/
moneta@localpc:~/project/rails/moneta3.5$ pwd
/home/moneta/project/rails/moneta3.5
moneta@localpc:~/project/rails/moneta3.5$

### ソースコードの最新化
ソースコードはgithubで原本を管理しています。もし差分があれば更新して最新化します。

moneta@localpc:~/project/rails/moneta3.5$ git checkout .
Updated 0 paths from the index
moneta@localpc:~/project/rails/moneta3.5$ git pull
Already up to date.
moneta@localpc:~/project/rails/moneta3.5$

### rubyのバージョン指定
今回のプロジェクトが指定しているrubyのバージョンを設定しましょう。
＃プロンプトの一部や出力結果は省略しております。

$ chruby 3.2.2

### ライブラリの最新化
原本で追加したライブラリの差分があれば反映します。
＃プロンプトの一部や出力結果は省略しております。

$ bundle install --without production

### データベースの最新化
原本で追加したデータがあれば反映します。

＃プロンプトの一部や出力結果は省略しております。

$ rails db:migrate:reset
$ rails db:seed_fu

以上でサーバの起動準備は整ったはずです。

### 開発サーバの起動
以下のコマンドで開発サーバを立ち上げましょう。

moneta@localpc:~/project/rails/moneta3.5$ rails s
=> Booting Puma
=> Rails 7.0.7.2 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.7 (ruby 3.2.2-p53) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 12298
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop

sはserverの省略形です

ブラウザのURL欄にlocalhost:3000を入力して、monetaのメニュー画面が立ち上がることを確認しましょう。

ターミナルとブラウザを見比べながら動作を確認します。最初はCompilingの表示が出て少々待たされます。これは、取得したソースコードから、サーバで動作するプログラムに変換（コンパイル）しています。一度コンパイルすると、結果が保存されるので、画面を表示するたびに待たされることはありません。

下の例では、コンパイルに336msかかりました。場合（コンパイル対象のアプリケーションや利用端末スペック）によっては10秒程度かかるかも知れません。

Started GET "/" for ::1 at 2024-08-27 01:04:35 +0900
  ActiveRecord::SchemaMigration Pluck (0.6ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by UsersController#top as HTML
  Rendering layout layouts/application.html.erb
  Rendering users/top.html.erb within layouts/application
  Rendered users/top.html.erb within layouts/application (Duration: 3.3ms | Allocations: 362)
  Rendered layout layouts/application.html.erb (Duration: 289.9ms | Allocations: 52040)
Completed 200 OK in 336ms (Views: 315.2ms | ActiveRecord: 0.0ms | Allocations: 56509)

この状態で色々動作させてみましょう。この後の動作確認のため、以下の２つは実施して下さい。

1. 新規ユーザーの作成
2. 普通預金の開設

ただし、隣の人とは別々のデータベースで動作させているため、先程試したような振込はできません。そこで、自分の口座で操作するしかないですが、、、何と、不思議なことに、自分の口座から自分の口座に入金できてしまいましたね。残高と利用可能額もおかしいように見えるため、これもバグですね。

（下に続く）

:::success

:bulb: **自分の興味ある箇所を意識してみよう**

ここまでで、画面ツアー、バグ探し、ローカル開発環境の準備を行ってきましたが、どういった箇所に興味を持ったでしょうか？

- ユーザ体験（使いやすさ、見栄え、操作の親切さ、情報の整合性）
- アプリ内部仕様（計算や処理の実現方法、処理の共通化、フレームワーク仕様）
- 環境（クラウド、ローカル、NW、セキュリティ、DB、OS）

もっと細分化したり、違う切り口もあると思いますが、
例えばこんな整理が可能です。
業務はチーム開発となり、自分の配属を考える材料となるはず。
是非自分の興味を整理していってください。

:::