第4章 開発課題
ここからは、みなさんに挑戦していただく開発課題となります。
開発課題の背景
- みなさんは架空の企業CCG社の開発チームの新規メンバーです。
- みなさんはメンバーとして、各種開発課題を実装することになります。
- 前述したCCG社の業務フロー（開発課題のフロー）にしたがって、各課題の実装を行ってください。
- フォークしたリポジトリからは、変数や関数、ファイル名などの命名の規則性や、実装内容の規則性が読み取れます。可能な限りそれらに従って実装を行う必要があります。現在のソースコードの設計や規則性から逸脱しない様に実装してください。丁寧なコードリーディングが必要になります。
- 講師がチームリーダー役となります。みなさんのIssue作成や実装が完了したら、チームリーダーにレビューしてもらいましょう。マージ等の操作はチームリーダーが行います。連絡はIssueやPull Request、slackを活用してください。
開発課題のフロー
再掲となりますが、
- フォークしたリポジトリに各課題に対応したissueを作成（受講者）
- issueの担当者をアサインする（受講者）
- issueでどのような実装を行うのかを設計する（codecamp講師、受講者）
- gitでissueブランチを作成（受講者）
- 実装（受講者）
- コミット（受講者）
- issueブランチをプッシュ（受講者）
- プルリクエスト（受講者）
- コードレビュー（codecamp講師）
- プルリクエストのマージ（codecamp講師）
という流れで作業を進めていくことになります。
クローンしたリポジトリの確認
本格的に課題に挑戦する前に、まずはソースコードの確認を行いましょう。
今回のリポジトリの内容は簡易的なecサイトになっています。
- サインアップ（会員登録）画面
- ログイン画面
- 管理画面
- 商品一覧画面
- カート画面
- 購入完了画面
の6画面で構成されていますので、それぞれのページを確認しておきましょう。
管理画面は
id: admin pass: admin
でログインすることで確認できます。
コードリーディングのヒント
今回のECサイト風アプリケーションは、MVCモデルによって作成され、関数化が積極的に行われているため、慣れるまでは読み取りが難しくなっています。以下のヒントを参考にコードを読み解いていきましょう。
ソースコードの読み解きについて
複雑なコードを読み解く際に、ざっくりと数行単位で「この部分はだいたい〇〇を行なっているところ」という感覚で読んでしまうと、実際にコードをカスタマイズしたり、自分でコードを組んで行くときに何をすれば良いかがわからなくなりがちです。
複雑なコードを読み解く際には、急がば回れ、で丁寧に一行ずつコメントをつけながら読み解くのがおすすめです。
例えば以下はindex.phpの冒頭部分です。
index.php
<?php
// 定数ファイルを読み込み
require_once '../conf/const.php';
// 汎用関数ファイルを読み込み
require_once '../model/functions.php';
// userデータに関する関数ファイルを読み込み
require_once '../model/user.php';
// itemデータに関する関数ファイルを読み込み。
require_once '../model/item.php';
// ログインチェックを行うため、セッションを開始する
session_start();
// ログインチェック用関数を利用
if(is_logined() === false){
// ログインしていない場合はログインページにリダイレクト
redirect_to(LOGIN_URL);
}
// PDOを取得
$db = get_db_connect();
// PDOを利用してログインユーザーのデータを取得
$user = get_login_user($db);
// 商品一覧用の商品データを取得
$items = get_open_items($db);
// ビューの読み込み。
include_once '../view/index_view.php';
上記のように一行ずつ丁寧にコメントをつけて行くことによって、様々なことに気づかされることになり、各ファイルの構造も見えてきます。
ユーザー定義関数が多数使われていますので、定義されている関数ファイルを確認することが重要です。
コメントは書けば書くほどコードリーディングのスキルが上がり、読み解く速度、コメントでの説明をまとめる速度が上がっていきます。劇的にコードへの理解度が高まり、コードを書くスピードも段違いに高まるので、ぜひ挑戦してみましょう。
なお、実際の開発においては、コメントのつけ方はチームの方針やコーディング規約に従って行うことが重要です。チームメンバーのスキルレベルによっても好まれるコメントのスタイルが異なりますので、確認していただくことが重要です。
必要に応じて求められるコメントがつけられるようになるためにも、学習中・コードリーディング中は徹底的にコメントをつけるように意識してみましょう。まずは正しいコメント、読みやすいコメントをつけられるように、数をこなしていきましょう。少なくとも自分が作成したコードについては一行でも理解していないコードがないようにすることがまずは重要です。
今回のリポジトリのコード全てのファイルの全ての行にコメントをつけられるようになると、かなりの実力になります。講師に協力してもらいながらチャレンジしてみましょう。
コードが理解できたと思ったら、その部分のコードを講師に対して説明するのが効果的です。わかったつもりでも、コードを１行ずつは説明できないことがよくありますので、理解度を確認するための良い目安となります。
Bootstrap4について
課題用リポジトリではHTML, CSS, JSを利用したツールキット（CSSフレームワークと呼ばれることもあります）Bootstrap4が利用されています。
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
上記のCSSおよびJSをHTML内で読み込むことにより、Bootstrap4が利用されています。
上から順に
- Bootstrap用CSS
- jquery
- popper.js（ポップアップ表示用ライブラリ）
- Bootstrap用JS
が読み込まれています。（Bootstrapではjqueryとpopper.jsの利用が必須となっています。）
Bootstrapを利用することで、例えば
<input type="submit" value="送信" class="btn btn-primary">
と、「class="btn btn-primary"」をつけるだけで角丸のボタンパーツが利用できます。 同様に、Bootstrapを導入することにより、HTMLの各要素にclassを設定するだけで利用できる様々なパーツが存在しています。
上記のリンクなどを参考に、Bootstrapを利用してどんなデザインが可能になるのか確認しておきましょう。
課題用リポジトリでは、ビューのHTML要素で設定されているクラスのほとんどがBootstrap用のものです。CSSで定義されていない場合には、Bootstrap用のクラスだとアタリをつけて「Bootstrap4 [クラス名]」などのキーワードで検索していただくと効率よく学習を進められるでしょう。