N予備校生ノート - 【2019年度】プログラミング入門 Webアプリ
これはなに?
コース
第0章 入門コースをはじめる方へ
プログラミングとはなにかについて
コンピューターに命令すること
プログラミングができると世界がこういう風に変わるよというのが実際のプロダクトを挙げて説明されてる
WindowsかmacOS用意してとのこと
入門コースは4章立て
1章:Webプログラミング入門(HTML / CSS / JavaScript)
2章:Linux開発環境構築(Linux / Git / GitHub)
3章:サーバーサイドプログラミング入門(Node.js / Hubot / Heroku / XSS対策 / CSRF対策)
4章:実践サーバーサイドプログラミング(Express.js / OAuth / PostgreSQL / テスト / 継続的インテグレーション)
テキスト教材だけでも各章10時間、8時間、17時間、12時間かかるとのこと
Webプログラミング入門コースは8章まであるけど、5〜8章は次へのステップアップの紹介と付録
第1章 はじめよう
動画を流しながらやっていきます。
01.プログラミングを体験してみよう
ブラウザの準備
ネットリテラシーもちょっと教えてくれる
JavaScript体験
デベロッパーツールで練習問題やった
02.はじめてのHTML
VSCodeの準備
my-first.html
html:5
haiku.html
高浜虚子
03.さまざまなHTMLタグ
6つのタグについて
h タグ
p タグ
a タグ
img タグ
ul タグ
table タグ
tags.html
タグを打ち間違えた時の動作について
なるべくEmmetテンプレートなど自動入力をつかおう
04.HTMLで作る自己紹介ページ
HTMLで自己紹介のページを作ってみましょう
Tips ハンドルネームとは
self-introduction.html
05.はじめてのJavaScript
JavaScriptとは
ノットジャバ
Tips ECMAScript5 と ECMAScript2015
HTML内にJavaScriptを書く
my-first-javascript.html
06.JavaScriptでの計算
値の種類と演算子についての説明
プロジェクトフォルダを作ろうとのこと
js-grammer/js-calc.html,calc.js
変数、計算、コメント
07.JavaScriptで論理を扱う
if文の前に論理値の前にそもそもの論理とは
比較演算子
論理演算子
js-grammer/js-logic.html,logic.js
08.JavaScriptのループ
ループの書き方・読み方
js-grammer/js-loop.html,loop.js
09.JavaScriptのコレクション
配列
js-grammer/js-collection.html,collection.js
2重ループ
10.JavaScriptの関数
js-grammer/js-function.html,function.js
生まれてからの経過時間を表示する
06.JavaScriptでの計算で作った円の面積計算を関数化する演習問題
11.JavaScriptのオブジェクト
時間あてゲームを作ろう
js-grammer/js-object.html,object.js
つくった
9.5〜10.5秒でストップさせると勝利
10秒数えても8秒くらいで止めてしまうので時間間隔ガバガバということがわかった
12.はじめてのCSS
css-study/self-introduction.html,self-introduction.css
styleタグ
セレクタの話
Tips CSS のプロパティを調べる
ブラウザでプロパティの値を見る方法
13.CSSを使ったプログラミング
CSSとJSでアニメーションさせることができる
css-study/css-programming.html,css-programming.css,animation.js
文字をくるくるした
14.Webページの企画とデザイン
あなたのいいところ診断サイトを作ろう
ペーパーモックアップ
inputタグ、buttonタグ
ユーザーが直接触る部分=UI
色に16進カラーコード
カラースキームで調べよう
input、buttonにstyle
15.診断機能の開発
診断機能の要件を考える
パターンづくり
use strict;
Tips constとlet
機能の実装
関数とJSDoc
Tips JSDocとインターフェース
正規表現でパターンのタグを入力値に置き換える
テストコード console.assert
16.診断機能の組込み
結果を表示するエリアとツイートボタンの表示場所
ES6からアロー関数が使える
17.ツイート機能の開発
Tips リバースエンジニアリング
ボタン作ってツイート
ɯ̹t͡ɕʲiのいいところは気配りです。ɯ̹t͡ɕʲiの配慮が多くの人を救っています。 #あなたのいいところ 18〜64.問題
48/49
現在の"日付"を取得する記述を選びなさいという問題で Date.now() を選びました…日付ね…時刻じゃなくてね…
敗北者
第2章 準備しよう
01.LinuxというOS
OSとは、Linuxとは
VagrantでUbuntu入れろとのこと
docker run -it ubuntu した
locale-gen ない
timedatectl ない
apt update && apt install bsdgames ninvaders
dialog等のフロントエンドプログラムがないから入らない。じゃあいいや
02.コンピューターの構成要素
lshw -short
ないので apt install lshw
df
03.ファイル操作
ファイル、ディレクトリ、ファイル操作系のコマンド
pwd, ls, cd, mkdir, rm, cp, mv, find, man
コマンドのオプション
04.標準出力
標準入力、標準出力、標準エラー出力について
標準出力をファイルへ書き出し
cat, less, パイプ, grep
05.vi
vimの使い方とvimtutor
vimが入ってないので apt install vim
VSCodeのRemote Development拡張を使えばリモートのファイルも操作できるよという話
06.シェルプログラミング
my-first-shell/my-first.sh
ls, date, echo, read
my-first-shell/quiz.sh
if, else
07.通信とネットワーク
通信
通信とはなにか
電気通信には回線交換方式とパケット交換方式があるよ
パケット交換には経路自在なメリットがある
通信しているところを見てみよう
tcpdump src www.nicovideo.jp -X &
tcpdumpが入ってないので apt install -y tcpdump
dockerのコンテナ内でやってるのでプロセスをバックグラウンドにしてジョブを切り替えて試す
別のコンソールで curl https://www.nicovideo.jp/
curlが入ってないので apt install -y curl
curlの出力にhtml、tcpdumpの出力にパケットが表示される
IPアドレス
パケットにかいてあったやつ
ネットワーク
TCP
ping www.google
Tips IPv4とIPv6
練習
ping www.kyoto-u.ac.jp
ping stanford.edu
ping www.ox.ac.uk
08.サーバーとクライアント
サービスを提供するための通信の仕組みは2通り
サーバークライアント型通信
P2P型通信
tmuxの話
ウィンドウ出したり閉じたり
tmuxを使ったサーバークライアント通信
while :; do (echo "Thank you for your access!") | nc -l 8000 ; done
ncでポート8000番で待ち受けてechoの出力を返すwhileループ
ncがなかったのでapt install -y netcat
telnet 127.0.0.1 8000で上記サーバーに接続してみる
telnetがなかったので apt install -y telnet
練習
nc -l -p 8000 にアクセス
09.HTTP通信
HTTP
nc nnn.ed.jp 80 で通信
HTTPのレスポンスが返ってくる
HTTPS
SSL, TLSで暗号化したHTTP通信プロトコル
DNS
HTTPサーバーを立ててみよう
httpd/index.html
python3 -m http.server 8000
curl 127.0.0.1:8000/index.html
練習
以前作った assessment.html をサーバーで配信
10.通信をするボットの開発
ボット
自動的に何らかの処理を実行してくれるプログラム
ニコニコ動画のランキング情報を取得しよう
一定時間ごとにニコニコ動画ランキングのRSSを保存する
bot/niconico-ranking.sh
cron
練習
iTunes StoreのRSSで
11.GitHubでWebサイト公開
GitHub
ソースコードを公開するということ
GitHub is 最高のプラットフォーム
GitHubにあなたのいいところ診断を置いてみよう
情報モラル
ライセンスや著作権を侵害しないこと
有害なソフトウェアを公開しないこと
他人のプライバシーを侵害しないこと
12.イシュー管理とWikiによるドキュメント管理
issue
wiki
gist
13.GitとGitHubの連携
gitのインストール
ssh key
git clone
14.GitHubへのpush
ローカルリポジトリの作成
git add, git commit, git log
git remote add, git push
git tag
15.Gitのブランチ
ブランチ
枝
git branch
gh-pagesブランチについて
現在は設定から自由に公開するブランチを設定できるので説明がそぐわなくなってる
git merge
16.ソーシャルコーディング
ブランチとマージという機能
コンフリクトを体験する
17〜36.問題
20/20
全問正解
第3章 サーバーサイドプログラミング入門
01.Node.js
nvmでv10.14.2
Tips truthy と falsy
02.アルゴリズムの改善
フィボナッチ数の計算
time で計ってみる
node --prof app.js, node --prof-process isolate-0x2660a40-v8.log
マップ(連想配列)を使って速度改善
03.集計処理を行うプログラム
CSV
sort, map
04.ライブラリ
yarn
npmパッケージを作ろう
sum
yarn init
sum/index.js
npmパッケージを使おう
sum-app
yarn init
yarn add ../sum
yarn remove sum
05.Slack のボット開発
progeduのSlackにJoinしてSlackを使ってみよう!とのこと。いやなので飛ばす
06.HubotとSlackアダプタ
yo - Yeoman
generator-hubot
yarn install yo generator-hubot
Hubot
CoffeeScript
07.モジュール化された処理
モジュールをラジコンのモーターだけ変えられたら便利だよねという話で説明
CRUD
クラッド
ソフトウェアが情報の永続化をしようとしたときに出てくする操作
オブジェクトのライフサイクル
ステートチャート図
todo/index.js,test.js
08.ボットインタフェースとの連携
はい
09.同期 I/O と非同期 I/O
同期I/OのI/O処理の間、プログラムが停止することをブロッキングと呼ぶ
async-io-probrem/app.js
fs.appendFile, fs.appendFileAsyncで同期、非同期の違いを体感
10.例外処理
JSON
try-catch文
11.HTTP サーバー
Webとは
Webサービス
Node.jsを使ったHTTPサーバーを作ってみよう
node-js-http/index.js
UserAgentは偽装が可能
curl -A "dummy" localhost:8000
12.ログ
語源は航海日誌
Node.jsの標準のロガーにはinfo, warn, error
アクセスログを出力してみよう
node-js-http-3012/index.js
エラーログを出力してみよう
13.HTTP のメソッド
HTTPメソッド
GET, POST, PUT, DELETE
node-js-http-3013/index.js
switch文
14.HTML のフォーム
formタグ
パイプ
Node.jsではsteamを引き継げる
fs.createReadStream(...).pipe(res)
15.テンプレートエンジン
Pug
pug.renderFile(filePath, { key: value })
16.Heroku で Web サービスを公開
割愛
17.認証で利用者を制限する
Basic認証
18.Cookie を使った秘密の匿名掲示板
Cookie
19.UI、URI、モジュールの設計
20.フォームによる投稿機能の実装
21.認証された投稿の一覧表示機能
はい
22.データベースへの保存機能の実装
データベースとは
データの集まり
PostgreSQL
apt install -y postgresql-10
ソースコードからデータベースを扱ってみよう
データの構成について考えてみよう
データの形式を定めることをデータモデリングという
主キー
23.トラッキング Cookie の実装
ユーザーの行動を追跡するために付与されるCookieのことをトラッキングCookieと呼ぶ
単にランダムな数字をトラッキングIDとすると偽装のおそれがある。その対処方法についてはは後述
JSのスコープ
Tips 疑似乱数
24.削除機能の実装
Tips 認証と認可
クライアントで自身の投稿しか削除ボタンを出さないようにしたのに、サーバー上でも改めて本人の投稿であるかを確認している
これは、UIを経由せずに直接リクエストを投げられた場合の対応
こういった認可はかならずサーバー上でチェックする必要がある
Tips 論理削除
削除フラグを立てて削除したものとみなす
復元が容易。うん…
25.管理者機能の実装
掲示板のように不特定多数のユーザーがコンテンツを投稿できるWebサービスには、必ず管理が必要になる
問題のある投稿は、投稿者が罪に問われる可能性がある。その際、管理者を通じて警察の操作が行われる
管理者は、掲示板が犯罪行為の温床にならないように、掲示板を管理・運営していく必要がある
26.デザインの改善
ファビコン
Bootstrap
27.脆弱性
個人情報をシステムが保つ場合は、個人情報取り扱い業者として安全管理のための適切な措置を行う義務が発生する
代表的な脆弱性
OS コマンド・インジェクション
SQL インジェクション
ディレクトリ・トラバーサル
セッションハイジャック
XSS
CSRF
HTTPヘッダインジェクション
クリックジャッキング
OSコマンドインジェクションを試してみる
子プロセスを生成してリクエストの文字列をechoするプログラムを作ってしまったとする
hoge;date等のリクエストを投げると、echo hoge;dateが実行されて、子プロセスでdateコマンドが実行される
もっと危険なコマンドも実行可能
Tips 他人のサイトの脆弱性
他人のサイトの脆弱性を探す行為は大きなトラブルの原因になる
見つけてしまったら、無断で公開しない。また直接報告することもトラブルの元。IPAに報告が望ましい
28.XSS脆弱性の対策
HTMLやJavaScriptを直接書き込めると、サイトの内容を書き換えて第三者がユーザーを誘導することができてしまう
リグレッション
後戻り
改行を入れられてたのにXSS対策したら改行できなくなった、など
テストしよう
29.パスワードの脆弱性の対策
平文でパスワードを管理する
OSコマンドインジェクションやSQLインジェクションでユーザーのパスワードが盗み取られる危険がある
メッセージダイジェスト
パスワードをハッシュ化した変換結果
総当たり攻撃への防御
アカウントロック
脆弱でないパスワードの生成
Tips 条件(三項)演算子
30.セッション固定化攻撃脆弱性の対策
セッション固定化攻撃
トラッキングIDがあだになり、トラッキングCookieの書き換えでなりすましが行える
元のトラッキングID+元のトラッキングIDとユーザーを結合したもののハッシュ値等、トラッキングIDに生成方法が予測しづらいハッシュ値を使用することで、書き換えを検知できる
31.より堅牢なセッション管理
前述のようなハッシュアルゴリズムが推測可能な状況では、引き続きなりすましが可能
セッションの乗っ取りを防ごう
ハッシュ生成に秘密鍵を使用する
Webフレームワークが提供している安全なセッション管理機能を使う
セッション機能に手を加える必要がある場合は、
1. セッションの識別子を推測されにくいものにする
2. セッションの識別子を URL のパラメーターにいれない
3. HTTPS 通信で利用する Cookie には secure 属性を設定する
4. ログインが成功したら新しいセッションの識別子を発行する
32.CSRF脆弱性の対策
「シーサーフ」脆弱性
そう読むんだ
ユーザーの意図しないリクエストを投げさせる
1. リクエストの際にトークンを消費させる
2. 処理の前にIDとパスワードで再度認証させる
3. Refererを確認する
ワンタイムトークンの実装
33.Heroku への安全な公開
ここまでで対応しなかった脆弱性
DoS攻撃脆弱性
ディレクトリトラバーサル脆弱性
ヘッダインジェクション脆弱性
クリックジャッキング脆弱性
34〜36.問題
3/3
第4章 実践サーバーサイドプログラミング
01.Webフレームワーク
Express
02.ExpressのAPI
スタックトレース
03.GitHubを使った外部認証
OAuth2.0
passortミドルウェア
04.テスティングフレームワーク
テストを行う理由
複雑なロジックがあり、誤った場合にサービスの根幹を揺るがす問題に発展する可能性
(テスティングフレームワークで行える)ソフトウェアテストの種類
ユニットテスト
結合テスト
システムテスト
ブラックボックステスト
mocha
05.継続的インテグレーション
CI (Continuous integration)
CircleCI
06.クライアントのフレームワーク
webpack
JavaScriptのファイルをひとつにまとめるということ
キャッシュと通信(接続の確立)回数の削減
07.DOM操作のフレームワーク
DOM (Document Object Model)
jQuery
08.AJAX
AJAX (Asynchronous JavaScript + XML)
SPA
若干解釈が分かれる説明のような気がする
ポーリング
同一生成元ポリシー (Same-Origin Policy)
CSRFを防ぐ
09.WebSocket
Socket.IO
プル通信とプッシュ通信
10.RDBMS と SQL
RDB (Relational Database) - MS (Management System)
SQL
DDL
DML
DCL
11.データモデリング
データベース設計の重要性
整合性のあるデータの管理を容易にする
アプリケーション側の機能拡張に対応できる
データモデリング
1. エンティティを決める
2. エンティティの関連を考える
カーディナリティ
オプショナリティ
従属性
3. データとして持つ項目をまとめる
非正規形の問題点
12.テーブルの結合
複数のテーブルにまたがる情報を取得する
内部結合
左外部結合
右外部結合
完全外部結合
13.インデックス
パフォーマンス
シーケンシャルスキャン
インデックススキャン
B-tree
インデックスの更新コスト
仕組みを知ることの重要性
14.集計とソート
集合
集計関数
グループ化
データに関して、どこまでをRDBに担当させ、どこからをプログラミング言語側が担当するのか
15.「予定調整くん」の設計
機能要件
用語の定義
データモデリング
URL設計
モジュール設計
Routerモジュール一覧
データモデル一覧
MVC
16.認証の実装とテスト
セキュリティ対策のためにX-Powerd-Byヘッダを除去
17.ユーザーの保存
UUID (Universaly Unique Identifier)
18.予定の一覧の表示
Promise
19.出欠の表示と更新
20.コメントの表示と更新
21.予定の編集と削除
はい
22.デザインの改善
JavaScriptのthis
23.セキュリティ対策と公開
csurfミドルウェア
第5章 入門コースを終えた方へ
改訂新版JavaScript本格入門
js-primer
サイ本
Node.js入門
nodejs.dev
付録 JavaScript編
01.Chrome の拡張機能を作ってみよう
最初に5ドルかかるとのこと
02.3D を使った Web ページを作ってみよう
three/index.html
Blenderでdaeモデル
MMDの読み込み
他の付録はあんまり興味がないのでやめとく