---
# System prepended metadata

title: 2021.04.28（水）①②
tags: [SD25, 授業ノート]

---

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

5. **モジュール設計**
    * 要求仕様に基づき機能分割を行う
    * 分割された機能をプログラムとして定義
    * モジュール分割

    1. モジュールとは
        * 一つのまとまった機能
        * 独立してコンパイル可能
        * 他のモジュールから呼び出されることがある
* 分割の基準は独立性を高くする

    1. 得られる効果
        * モジュール群が構造化されわかりやすい
        * 変更・修正の影響が限定化できる
        * 高品質ソフトウェア作成指針

    1. 独立性の判断基準
        * 強度
            → モジュール内の構成要素同士の関係性の強さ
        * 結合度
            → モジュール間の関連・連携の強さ（弱いほど良い） 

6. **画面設計**

    * UI 
    * 使いやすさ　→ 評価に影響

    1. 画面設計とは
        * GUI基本(CUIはコマンドプロントみたいな)
        * GUI→直感的操作

    1. 手順と作業内容
        * 1.全体像の作成
        * 2.標準化
        * 3.画面フロー設計
        * 4.表示方法の検討
        * 5.具体的レイアウト設計

    1. 具体的手順
        1. 全体像の作成
            * 必要な全ページを洗い出す
            * 構成図(P.39 図表1-2-28)
        1. 標準化
            * 表示位置
            * 表示方法（レイアウト、色彩、語句統一）
            * 入力方法（選択式、直接入力など）
        1. 画面フロー設計
            * 画面フローは処理フローにもなる
        1. 表示方法の検討
            * CUIかGUIかであったり
            * GUIであれば、どういうフォーム部品を利用するのか？
            * 検討の際には、利用対象となるユーザーについても十分に考慮するとが必要
            * 見やすい、わかりやすい、間違いにくいということに配慮してやること
        1. レイアウトの設計
            * 具体的な各ページのレイアウトを設計
                →これをもとにページ作成

1. **報告書設計**
    * 開発者・ユーザー双方にとってわかりやすい報告書とすることが重要

    1. 報告書の設計とは
        * 様式(フォーマット)、提供方法などから検討し、ページレイアウトなどを設計す

    1. 手順と作業内容
        * 出力に関する検討
        * 出力方式・媒体の決定
        * レイアウトの作成
    1. 具体的手順
        * 報告書を作成する目的・時期について検討する
        * 検討項目としては
            * 報告書タイトル
            * 使用目的
            * 作成周期・時期
            * 期限
            * 配布先
            * 数量
            * 形式
            * 出力項目の位置

    1. 出力形式・媒体の決定
        * 表示・印刷・電子データ
    1. レイアウト作成
        * 実際の物理レイアウト作成
1. **コード設計**
    * コード : 情報を効率よく管理するためのもの

    1. コード設計とは
        * 目的
            * データの識別・分類・配列が用意
            * 単なるコード化はあまり意味がない
            * コードに意味をもたせすぎるのは拡張性や変更の際の制限となる
            * コードの変更は、システムの大幅な変更にもつながるので、設計は慎重に
        * 機能
            * 識別機能（一意性・ユニーク性）
            * 分類機能
            * 配列機能（整列）
            * チェック機能（チェックデジット）
    1. 設計上の留意点
        1. 使用範囲と使用期間
            * 適用範囲
            * 使用期間
            
        1. わかりやすさ
            * 扱いやすい（短く簡潔、単純）
            * 体系化（グループ分けしやすい）
            * 明瞭性（数字を原則）

        1. 手順と作業内容
            * 対象の選定
            * 目的の明確化
            * 使用期間とデータ量の予測
            * 利用範囲
            * コード化作業とコード表作成
            * コード表作成
            ※p46:a~eを良く読んでおいて
        
        1. よくあるコードの例
            * 連番、区分、10進、桁別、表意、チェックデジット
            * 各コードタイプごとの特徴は、p49:図表1-2-40を良く読んで
        
        1. チェック法
            * チェックデジット法・・・誤り発見
                → 特定の計算式で得た値をコードに付け足す
            * 誤り訂正方式としてはECCがある :man_and_woman_holding_hands: 
            * チェックデジットの計算方法例はP50参照
            
1. **ユーザーインターフェース設計**
    * 現在では画面設計と同様の意味

# テスト・レビューの手法
## テスト手法 : P.51
1. ホワイトボックステスト
    * モジュールの内部構造、論理・制御の流れに着目してテストケースを設計　
    * 網羅性と生産性のバランスを考慮して設計
    * 網羅度から見ると以下のようなものがある 
    :arrow_down: 
    
    1. 命令網羅
        プログラム中の全ての命令を１回は実行
        ただし、条件判定は考慮しない
    
    1. 判定条件網羅
        判定条件で真/偽を１回は実行させる
        判定処理が正しく機能しているか確認できる
        
    1. 条件網羅
        複数の判定条件を網羅する
        
    1. 判定条件/条件網羅
        判定条件と条件網羅の組み合わせ
    
    5. 複数条件網羅
        条件判定におけるすべての組み合わせをテストする
        
2. ブラックボックステスト
    * モジュールの内部には着目せず、入出力だけに着目して行う
    
    1. 同値分割
        同じ特性を持つグループに分割して、その代表値を用いてテストを行う
        有効同値クラス・・・適切な範囲内のデータ
        無効同値クラス・・・不適切な範囲内のデータ
    
    1. 限界値分析
        有効同値クラスの境界値となる値でテスト




たしかに！！
お慶
これ章ごとにノートまとめた方がいい説
そのパタン作ってくるわ
理解した
コピペするだけやもんね
すまん
待ってる :heart_decoration: 

両方残すけん
それいうなってちゃんとdesigh統一させてくる
![](https://image.itmedia.co.jp/nl/articles/1710/31/l_osato_171029atumori15.jpg)








## 雑談 (0→やまぴ 1→みや 2→やすい 3→りょうくん)
熱盛スタンプ集
https://nlab.itmedia.co.jp/nl/articles/1710/31/news074.html

3.おはよう
めっちゃ面白い記事(AIと倫理)
https://news.yahoo.co.jp/articles/7c94879e23300b711e4a0690adfd1a4e88068ef1?page=1

素晴らしいコードとは
https://note.com/cyberz_cto/n/n26f535d6c575

1.見る、みた

今日の色分けひどいなほぼ同じやん
それな　むらさきやもんね←そこじゃない
おれだけちがうわ


しないよ笑
ちゃんと書いてくれそうだねｗ
Vue勉強したいらしいreacｔやりなって言った
自分で周りの人誘って初めなって言った


また難しいところにいったな
JQueryの専科受けようとしてるみたいだからやめときなって言ったわら

1.河原さん自粛した
閲覧側になっちゃうと思うからだって
2.謙虚ですね
俺らがpythonとかnodejsでゴリゴリプログラム書いてるの見せてしまった
2.ゴリラがばれたか
3.閲覧側でもいいのにね
良いコードの記事見てきた
めちゃんこ参考になった
でも、なかなかシンプルに書くのって難しいよね
pythonは1行で書くっていう考えで設計されとるから比較的できるけど
2.閲覧でも勉強なるね
1.ちなみに俺その記事読んでない
熱盛り！
![](https://image.itmedia.co.jp/nl/articles/1710/31/l_osato_171029atumori01.jpg)
3.草森林wwwwwwww orz
2.草森？？！:) :) :) :)　これにっこりマークだおハート
:nerd_face: :nerd_face: :nerd_face: 
jqueryの専科なんかくそやろ
このhackmdにでも簡単な使い方のページ作れるわ
しょうみ1時間あればざっとは使えるわ
2.２万あれば書籍６冊いけるわ。
二万はマジで高い
去年vue firebaseあったけど受けなくてよかったと思う
python専科もくそやったしな
2.python専科くそだった
途中先生ばっくれたし　それ それ聞いた
どっかいった

1.vueの記事大量にあるしね

たったのこれだけやろ？？？jquery 受ける必要なくない？？
1.簡単やね
3.ね　
3.暇すぎる　見た　
1.react大好きマンだもん一番下にか消えてる可読性高杉
6月までこれか
3.デザインできんからべた書きでww　主要なのは覚えたわ
1.コード→ノート書くマン探す？なんか秩序がなくなりそう
1.授業ごとに役割振る？ほぼSDだけやけど
MD記法覚えたらいけるよ


1. sss
1. 222
2. 333

このナンバリング機能優秀すぎる

100. ss
1. 333
優秀やべ

* ファヴァヴァ
    * ｓｆｓｆｓ
        * ｃｓｄｃｓｃｖ
            * ｃｓｄ

    * cadva（ここのでかいline-heightは同じ階層のlistに影響される）
        * cvsd（ここのでかいline-heightは同じ階層のlistに影響される）
* csdfsfcs
    * cscsc

Let's fuck'n jquery
```htmlembedded=

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hellojquery</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <p class="title">Hello TechAcademy !</p>
    <button type="button" id="btn1">jQueryで表示</button>
    <button type="button" id="btn2">表示をかくす</button>
    <div id="controlArea" class="disp-area">
      <p>こんにちは！</p>
      <p>jQueryを使って表示しています。</p>
    </div>
    
    // ここ入れたら簡単
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    <script type="text/javascript" src="techAcademy.js"></script>
  </body>
</html>
```

```javascript=

$(function(){
 
  // 画面読込時に実行する。
  $("#controlArea").hide(); // 初期表示で隠しておく

  // 指定ボタンを押下すると処理を開始する
  $("#btn1").on("click", function() {
    $("#controlArea").show(); // div領域を表示
  });
 
  // 指定ボタンを押下すると処理を開始する
  $("#btn2").on("click", function() {
    $("#controlArea").hide(); // div領域を隠す
  });
 
});
```

```css=
.disp-area {
  width: 340px;
  height: 100px;
  padding: 14px;
  background-color: #74e5d2;
}

.disp-area p {
  font-size: 16px;
  margin: 4px;
}

```


react可読性高い！！！！
```jsx
import { useState } from 'react'

const ReactApp = () => {
    const [viewMode, setViewMode] = useState(false)

    const handleViewTrue = () => {
        setViewMode(true)
    }
    const handleViewFalse = () => {
        setViewMode(false)
    }
    
    return (
        <p>Hello TechAcademy !</p>
        
        <button type="button" onClick={handleViewTrue}>Reactで表示</button>
        
        <button type="button" onClick={handleViewFalse}>表示をかくす</button>
        
        <div className={!viewMode && view}>
          <p>こんにちは！</p>
          <p>jQueryを使って表示していません</p>
        </div>
    )
} 

const view = {
    display: none;
}
    
```




