# 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; } ```