# 2021.04.21（水）①②
###### tags: `SD25` `授業ノート`

## ソフトウェア開発モデル | P.5

### 1. ウォータフォールモデル

* 従来から（古くから）ある手法
* 開発の各工程をいくつものフェーズ（段階）に分けて作業を管理
* 各フェーズを完了させて、次のフェーズへ進む
* フェーズ間は「<span style="color: red">後戻りさせないのが原則</span>」
### 2. プロトタイプモデル

**ウォーターフォールモデルでの問題点**
→ 基本計画段階で、ユーザーの要望の全体を把握することが難しいことが多い
* 設計図や、口頭での説明では理解されないことも多い（理解したフリをしていることも）
* となると、完成品は依頼者の求めていた物と違っていることになる
* これらの問題を解決するためのこのモデル
* プロトタイプ（サンプル、試作品）を作って依頼者に完成品のイメージをしてもらう
* プロトタイプを
* 本開発においては破棄して、本番品を作る
* ベースにして本番品へ拡張していく
　　↑　2タイプの構築手法
* 適用範囲として
* 開発の部分的に適用して開発する
* 開発全体の段階で適用する
**<span style="color: red">メリット</span>**
→ 開発後の大幅な使用変更などの「上流フェーズ」でのミスを予防可
**<span style="color: blue">デメリット</span>**
→ 開発コストがかかりがち……orz
→ スケジュール調整が難しい

### 3. スパイラルモデル🌀🌀🌀🌀🌀🌀🌀🌀🌀🌀🌀🌀
* 設計、プログラミング、テストの工程を、システムの部分単位で繰り返して開発:fire:
* 開発単位が独立している場合に適した手法
* オブジェクト指向型開発にも用いられる

### 4. オブジェクト指向型開発 {}
* 一種のスパイラルモデル
* システムを「オブジェクト」の集合体と見る
→各種の機能を持ったパーツの集合体と見立てる
* 各オブジェクトの「分析→設計→実装」を繰り返していく

### 5. 作業分解構造
* 作成することで得られるメリット
* コスト見積・分析のための資料提供
* 作業構成と範囲、作業責任の明確化
* 各作業単位の実績把握、作業計画の容易化

### 6.工程と工程モデル
* 各工程の構成を時系列的に表現

## ソフトウェアライフサイクル | P.10
* 分析→設計→開発→保守→破棄
* 破棄の後は次期ソフトウェアへ移行

### 1. ウォーターフォールモデルの特徴
* システムを各段階に分けて管理し開発
* 各段階終了時には、各段階毎の成果物の「レビュー」を行う
* 各段階の成果物は、下流の段階へ引き渡し


### 2.基本計画
**現行システムの分析・問題点の洗い出し**
#### 1. システム化計画：基本計画を立てる
→ システム化計画書
#### 2. プロジェクト実行計画：具体的計画作成
→ 開発計画書
#### 3. 要求（要件）定義：要求の詳細な分析・定義
→要求定義書（要求仕様書）
#### 4. 外部設計：見える部分の設計
* 要求仕様の確認
* これを基にサブシステム化や入出力設計を行う
* サブシステムの定義と展開
* 具体的にサブシステムを定義していく
* 画面設計・帳票設計
* 文字通りのことを設計します
* ユーザーに直結する部分で、使い勝手にも影響が大きいです。
* コード設計
* 外部設計レビュー : 外部設計書をレビュー
→外部設計書、外部設計レビュー報告書
#### 5. 見えない（見せない）部分の設計
要求定義、外部設計で求められる内容を具体的に設計する
→ 効率良く実現するための設計
* 機能分割と構造家
* サブシステムをプログラム単位へ分割
* プログラム間でのデータをI/Oを明確化
* 物理データ設計（ファイル設計）
* 最近ではDB設計が主流かも

### 5. プログラム設計
ここまでの成果物を基に、実際にプログラムとして制作するための、各プログラムは「モジュール」単位に分割し、プログラミングはモジュール単位で行われる。モジュール間をつなぐための「インタフェース」の設計も行う。
さらに、テストを行うためのテストケースも設定する

### 6. プログラミング　：　コーディング
実際にプログラムを入力していく
* モジュール設計
* 単体テスト計画
* コーディング
* 単体テスト
→ モジュール設計書 :book:
モジュール設計レビュー報告書
単体テスト計画書
ソースプログラムリスト
ソースプログラムリストレビュー報告書
単体テスト報告書

### 7. テスト
* 単体テスト:モジュール単位
* 結合テスト：モジュール間
* システムテスト：全体的な結合テスト
* 運用テスト:実運用と同条件で行う
→　単体テスト報告書
→　結合テスト報告書
→　システムテスト報告書
→　運用テスト報告書

### 8. 運用・保守
運用が開始されれば、必要に応じて保守作業

## ソフトウェアの再利用 | P.17
効率良い開発のために、既存の仕組みを流用した開発方法
* 部品の再利用
* リエンジニアリングによる再利用
* 車輪の再発明的なこと:car:
* 部品の再利用：部品化方式
→ 標準化がカギ、部品ライブラリと検索システム 部品作成・検索ツールの充実
* リエンジニアリング
<span style="color: red">既存の製品を再利用</span>
・リバースエンニアリング
完成品から使用を導き出す → ソースコードを生成する

<span style="color:blue; white-space: pre;">
> reactのコンポーネント指向のこと？
そっちか
ほへ
多分API的なこと
他の人がつくったことがあるものをまた一から作らないで
使いまわすのがエンジニアの間での常識みたなとこがある
Githubに公開されているものをわざわざ自分で作らないで
そのまま使う的な......
なるほど。。。。npmとも同じか
これバックエンドの話やったななんでもフロントで例えてしまう
</span>

st=>start: はじめ:>https://smoothly-app-3af9f.web.app/signin[blank]
e=>end: おわり:>http://www.google.com
op1=>operation: 操作処理の結果
sub1=>subroutine: サブルーチン(定形手順)
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: 何らかの入出力処理
para=>parallel: 並行処理
st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

### 2.構造化チャート
#### 1.NSチャート
制御構造を図式化する

#### 2.PAD
アルゴリズムの論理構造を図式化
問題分析図とも呼ばれる

#### 3.SPD Structured Programming Diagram
木構造でアルゴリズムの論理構造を図式化
PADとは図式が違う

---

### 雑談 (0→やまぴ 1→みや 2→やすい 3→りょうくん)
ショートカットキー↓↓↓↓↓↓↓↓
>https://qiita.com/yuhu_narumi/items/aca3cfcdd65eb6014359
⌘ + コントロール　+ カーソル上下　（行移動）
⌘ + shift　+ D　（行コピー）
⌘ + D　（単語選択）

<span style="font-size: 100px">:dango:</span>
<span style="font-size: 100px">:man: + :peach:</span>
<span style="font-size: 100px">:dog:</span>
<span style="font-size: 100px">:monkey:</span>
<span style="font-size: 100px">:bird:</span>

1.りょうくん追加したお
2.了解
0.これ素材フォルダにまんま上がるから、あとでコピってもいいかもな。。。
3.早くグループ活動にして欲しい　座学だるすぎる :-1: :umbrella_on_ground:
1.確かに面倒、全部の開発手法試した方がいい

2.便利なショートカット教えて.て欲しい　チートシートあったけど何も使えんかっ。そうか。それ辛いね
⌘ + B
listとかショートカット欲しいけど
サイト見ても見つからんかった
デスクトップアプリなら使えるかも？でもデスクトップ、日本語打てない時あるけんねバグで

⌘ + D　使えるで！

レイアウトが整わん
隙間多いね
なんか上のリストめっちゃ間隔空く
一番上のはキレいやけど
わかったネストしてるから
ウォーターらへんか
これアンダーライン引けないのか？マーカ欲しい

下のタブでエディタモード切り替えレルよ

#1 ~ 100までの数字で10で割り切れない数字を加算するプログラム
notdiv = 0
list = []
for i in range(1, 101):
    if i % 10 != 0:
        list.append(i)

for j in range(len(list)):
    notdiv = notdiv + list[j]

print(notdiv) #4500になるはず

// 安井くんuseEffectの勉強会

import {useState, useEffect} from 'react'

const YasuiComponents = () => {
    const [state, setState] = useState(0)
    const [statex2, setStatex2] = useState(0)
    const handleChange = (e) => {
        setState(e.target.value)
    }
    useEffect(() => {
    // ここで副作用→stateの値（第二引数）が変わったらuseEffect()の第一引数が実行される
        setStatex2(state * 2)
    },[state])
    // わかる？
    // わかった
    // 第二引数が変わったら、第一引数が実行されるっていうので理解できた
    return (
        <>
            <input 
                type="text"
                value={state}
                onChange={handleChange}
            />
            <p>{state}</p>
            <p>{statex2}</p>
        </>
    )
}

<div 
style="width: 200px; height: 200px; border-radius: 5px; background-color: #fff; box-shadow: 2px 2px 5px #00000044, -2px -2px 5px #00000004;"
>
    Card
</div>

<div style="width: 200px; height: 200px; border-radius: 5px; background-color: #fff; box-shadow: 0px 0px 20px #00000033 inset, -3px -3px 20px #00000022 inset;"></div>