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

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

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

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

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

# 1. 「moneta」の操作

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

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

## 端末へのログイン

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

## Chromeの起動

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


## urlの入力

Google Chromeが立ち上がったら、アドレス欄に http://moneta3.sofia3dd.net:3000 と入力してEnterキーを押して下さい

## トップページ

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


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

## ログイン画面

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


まだユーザーIDを持っていませんので、新規ご利用者登録ボタンを押して下さい。

## 新規ご利用者登録画面

新規ご利用者登録画面が表示されます


- ユーザーIDは英小文字6文字で自由に決めて入力して下さい
- パスワードは数字4桁です
- クレジット番号はテスト用の1234-5678-9012を入力して下さい
- 入力したら「登録する」ボタンを押して下さい

## エラー画面

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


修正して再度「登録する」ボタンを押して下さい。

## 登録結果画面

おや、ユーザー登録を行ったあとに、なにやら見えてはいけないページが表示されました。これは**バグ**ですね。きっと動作確認用に埋め込んだ管理用ページが残ってしまったのでしょう。さっそくメモを取っておきましょう。


右上の「Login」をクリックします。

## ログイン画面

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


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

## トップメニュー

メニューページが表示されました。「口座開設」「残高・入出金明細」「振込」「お借入」「ご質問」の５つのメニューがあるようです。


色々ボタンを押して画面を変更させてみましょう。
左上の「もねた銀行」のボタンを押すと、いつでもトップメニューに戻れるようです。

## 残高照会

トップページの「残高・入出金明細」ボタンを押してみましょう。残高一覧のページが表示されました。まだ預金は無く、最初に登録したクレジットカードのみ表示されています。


## 普通預金

トップメニューに戻って「口座開設」ボタンを押してみましょう。商品は「普通預金」を選択します。


好きな支店を選んで、金額を入力します。100万円ぐらい入力してみましょう。


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

## 口座開設結果

残高一覧の画面に遷移しました。ですが、金額がおかしいですね、入金金額の2倍の残高になっています。これは**重大なバグ**ですね。メモしておきましょう。


## 外貨預金

商品として「外貨預金」を選択してみましょう。


様々な外国通貨が選択できます。好きな通貨を選択してみましょう。


選択した通貨の過去１ヶ月の為替変動がグラフで表示されます。
なるべく円高の時に買いたいですよね。（グラフの下方向が円高、上が円安です）


口座開設ボタンを押すと、口座開設フォームに移動します。
あとは、普通預金のときと同じになります。

## 振込

隣の人に振込してみましょう。トップページから、振込ボタンをクリックします。


まずは振込元口座を選ぶようです。先ほど作成した普通預金を選びます。

## 振込先銀行

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


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

## 振込先支店

次に振込先支店を選びます。


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

## 口座番号と振込金額

口座番号と振込金額を入力する画面が表示されました。隣の人に口座番号を聞いて入力しましょう。金額は残高の範囲で好きな数字を入れましょう。


振込ボタンをクリックします。

## エラー画面

口座番号の間違いや残高不足などが合った場合は、エラーメッセージが表示されます。エラーチェックは十分でしょうか。色々入力して試してみましょう。**バグ**を発見したらメモしましょう。


## 振込結果画面

残高一覧画面に遷移します。金額の増減は正しく行われているでしょうか。


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

## 振込明細

取引明細画面が表示されました。振込の入金、出金の結果が確認できます。支払い結果の入出金区分が「入金」になっています。これは「出金」が正しいのでは・・・、また、振込元、振込先が表示されないのは不便ですよね。**バグ**としてメモしておきましょう。


## モダンフロントエンド

もう少し動きのある画面を見てみましょう。


口座開設からスピードくじを選択します。

## CSSアニメーション

宝くじのアイコンが８つ表示されました。2回まで選ぶことができるようです。


一つ選んでクリックしてみましょう。

カードがくるりと回って、あたり・はずれのパネルが手前から奥に縮小しながら表示されました。


2つめを選んでみましょう。その後で３つめをクリックしてみると・・・めくれてしまいました。どうやら**バグ**ですね。2枚までしかめくれない、というロジックがうまく動いていないようです。


賞金を受取るをクリックします。URLを見ると、何等であるのか数字が見えますね。こういう数字が見えてしまって良いのでしょうか。


数字を1に書き換えてenterキーでリロードしてみましょう。


大金が手に入ってしまいました。ですが明らかに**バグ**ですね。このようなセキュリティ上問題がある部分も**バグ**として報告しましょう。

## 借入

住宅ローンなど、「お借入」も試してみましょう。本当は事前の審査などを行ってから借入が行われますが、申し込みボタンを押すと直ちに借入が行われます。利息も直ちに付与されていますね。これはバグではなく、開発途中の制限です。正式版までには審査システムとの連携や定期的な利息の計算などが行われます。

# 2. 障害の調査・報告

それでは、今から1時間で**バグ**の調査と報告をしていきましょう。色々な操作を自由に試して、**バグ**を発見します。

## 障害報告

発見した障害はバグ報告システムに登録します。
トップメニューの「お問い合わせ」をクリックします。


すると「バグ報告」のボタンが出るのでクリックしましょう。


バグ報告システムが表示されました。開発中ということで、このようなところにリンクを張っていると思われますが、正式リリースの際には忘れずにリンクを解除しなくては駄目ですね。新規バグ報告をクリックします。


バグをなるべく簡単に説明できる表題と、詳細な内容説明を入力します。


説明欄はバグや改善の観点が伝わる内容を記載しましょう。
記載したら「報告する」ボタンを押します。

- 画面
- 操作
- バグ（異常な動作）
- 想定（正常な動作）

発生報告として登録されました。


明細ボタンを押すと内容の詳細が確認できます。更新ボタンを押すと内容の修正ができます。


## 障害報告（レビュー）

さて、発見した**バグ**の登録は完了したでしょうか。現在、２〜３名の小グループになっていますが、グループ内でお互いに自分が登録したバグの報告をしましょう。その際、報告者以外のメンバーは「報告内容」に過不足がないか確認して指摘します。報告内容を更新しましょう。


# 3. 開発環境の準備

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

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

## ターミナルの立ち上げ

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


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


メニューから`Ubuntu`または`Ubuntu18.04`を選択します。


タブ形式で二つ目のウィンドウが開きました。二つのウィンドウはタブをクリックするか、`ctrl+tab`で切り替えられます。


ターミナルからは、キーボードによりコマンドを入力して操作します。

## 3.1 github IDを保有している場合

事前にgithub IDを保有している場合、monetaシステムのソースコード全体を自分の管理下にコピーして（forkして）開発を進めます。保有していない場合は、この3.1章をスキップして、3.2に進んで下さい。

## ソースコードの取得

githubにログインします。
`https://github.com/tamura2004/moneta3`の画面に移動して、右上の**Fork**ボタンを押して下さい。


自分のユーザー配下にリポジトリ`moneta3`が作成されました。下の画面の`mitcon`の部分が自分のユーザーIDになっていることを確認して下さい。


緑の`<>Code`ボタンから、ダウンロード用urlを確認して下さい。赤枠のアイコンをクリックすると、urlがクリップボードにコピーされます。後ほどターミナルで入力します。


## プロジェクトホームの初期化

これから作業をするディレクトリである、プロジェクトホームを初期化しましょう。最初にプロジェクトホームに移動します。

$ cd
$ pwd
/home/moneta
$ cd project/rails
$ pwd
/home/moneta/project/rails

> 先頭の$はプロンプトと呼ばれる入力待ち記号であり、入力する必要はありません。入力の最後にenterキーを押します。

プロジェクトホームに以前の別の研修用の資材が残っていれば、以下のコマンドで削除します。

$ rm -rf moneta3
$ ls -la

## ソースコードの取得

gitコマンドを利用して、先程forkした自分のリポジトリからソースコードを取得しましょう。

[url]の部分は先程クリップボードにコピーしてあるはずなので、[Shift]+[Ins]等でペーストしましょう。

$ git clone [url]

以下のような表示がされ、`done`が表示されれば成功です。


ソースコードのディレクトリに移動して、内容を確認しましょう。

$ cd moneta3
$ ls -la


## ライブラリの取得

monetaは公開されているオープンソースのライブラリを多数利用しています。ライブラリは開発環境により使用するコードも異なり、また、サイズも大きいため、githubのようなソースコードのリポジトリに含めずに別途取得することが多くなっています

どのようなライブラリを使用しているのか、みてみましょう。まずはサーバ側のライブラリです。

$ cat Gemfile


ここに記載されたライブラリが必要ですが、clone直後の現時点では取得されていません。以下のコマンドで取得しましょう。
このコマンドは、Gemfileの内容と、Gemfile.lockの内容により、必要なライブラリをダウンロードします。

> bundle install --without production


`Bundle complete!`までたどり着いたら成功です。

サーバ側とは別にフロントエンド側のライブラリも必要です。

$ cat package.json


以下のコマンドでライブラリを取得しましょう。

$ yarn


ダウンロードしたライブラリは`node_modules`フォルダ内に保存されます。

## 開発データの準備

この時点ではまだ、データベースに何も入っていません。初期データの準備をしましょう。
以下のコマンドを入力してください。

$ rails db:migrate

データベースのテーブル（情報を区分して保存する「箱」のようなもの）が作成されました。沢山の種類が作成されていますが、banksは銀行、branchesは支店でしょうか。後で**ER図**で確認しましょう。


テーブルが準備できたので初期データを入力しましょう。
以下のコマンドを入力してください。

$ rails db:seed_fu

色々な初期データが登録されたようです。
Pageという名前で、先程確認したページのタイトルが見て取れます。データベースで設定していたんでしょうか。


3.1はここで終了です。3.3へ進んで下さい。

## 3.2 github IDを保有していない場合

事前にダウンロードしてあるソースコードを利用して開発を進めます。

## プロジェクトホームへ移動

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

$ cd
$ pwd
/home/moneta
$ cd project/rails/moneta3
$ pwd
/home/moneta/project/rails/moneta3

## ソースコードの最新化

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

$ git checkout .
$ git pull

## ライブラリの最新化

原本で追加したライブラリの差分があれば反映します。

$ bundle install --without production
$ yarn

## データベースの最新化

原本で追加したデータがあれば反映します。

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

3.2章はここで終了です。
githubIDを保有している場合もそうでない場合も、次の3.3章へ進みます。

## 3.3 開発サーバの起動

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

$ rails s

> sはserverの省略形です


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


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

下の例では、コンパイルに7.9秒かかりました。


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

- 新規ユーザーの作成
- 普通預金の開設

ただし、隣の人とは別々のデータベースで動作させているため、先程試したような振込はできません。エラーが出るはずですが・・・、そもそもエラーメッセージが**バグ**ですね。


（下に続く）