北海道科学大学 電子計算機研究部 ネットワークチーム 講座資料

1. Web Application
開発入門
電子計算機研究部 ネットワークチーム

2. Index
• 開発環境
• 開発手順 (フロー)
• 目標

3. 開発環境
• エディタには、これまで通り Atom を使う
• Git のフロントエンドとして Source Tree
リモートリポジトリとして GitHub を使う
• 進 管理は GitHub Issues を使う

4. Git の無い人生
コードを書く
↓
バグが生まれる
↓
バグを直す
↓
バグが増える
↓
過去に戻れないので詰む

6. Git のある人生
コードを書く
↓
バグが生まれる
↓
いつバグが混入したか分かる
↓
バグが増えない！
↓
過去に戻ることも出来る！

8. Git は必ず使おう

9. Git が使えると仕事が る
• 今の時代、 git や svn といったバージョン管理シス
テム (VCS) を使わないプロジェクトはほとんど無い
• 学生の内に慣れておくと、就活でも役立ち就職後に
も生かせる。
• 人生はバージョン管理できなくても、コードはバー
ジョン管理できる！！！

10. GitHub Issues
• 例: https://github.com/densan/
team.densan.info/issues
• タスク管理、進 管理、他のユーザとの議論
が行える機能

11. 実際に使ってみよう

12. 開発手順 (開発フロー)
• 作ってみたいアプリを考える (企画)
• 使える技術、ライブラリ、デバイスを探す
(技術選定)
• 設計 (機能設計、外部設計、内部設計)
• Issue を立てる (開発計画)
• README.md を書いて first commit!

13. 企画
• 身の回りの課題を見つけて、 IT によって解決す
る
• 使ってみたい技術を見つけて、アプリを作ってみ
る
• 作ってみたいアプリを探して模倣してみる
どれでも良いので、手を動かすことが重要！

14. 技術選定
1. アプリを開発するために必要な機能を考える
2. 機能を実装するために必要な技術、ライブラリ、
ハードウェアを調べる
3. 複数見つかった場合は比較、検証して1つに絞
る
分からない場合は先輩に く！

15. 設計
• 機能設計と外部設計は早めに終わらせる
• 欲しい機能を洗い出す
→書き出していこう
• 外部設計では主に UI を設計する
→手描きの図に起こしてみると分かりやすい

16. 開発計画
• 開発に必要な工数(開発時間)を見積る
• 機能毎に見積るのが一般的
• 経験が無い内は大まかで良い
• 計画を練ったら Issue に書き出そう

17. README
• README.md を書いて、どんなアプリケー
ションを開発するのか概要を説明する
• 名前を先に決めると開発が る
• README.md を書いたら commit & push して
みよう

18. 目標
• 学祭でアプリの展示を行う
• 期日は9月上旬 (学祭前にみんなで共有)
• 夏休み中に集まりたい人で集まれる環境を用
意する