├── README.md ├── checksheet_advanced.md ├── checksheet_basic.md └── checksheet_practice.md /README.md: -------------------------------------------------------------------------------- 1 | # webprogramingskill_checksheet 2 | ウェブアプリ開発スキルチェックシート 3 | 4 | # 序文 5 | 6 | ## これはウェブアプリケーションプログラミングを志した初心者に向けたチェックシートだ 7 | 8 | このチェックシートにはウェブアプリを開発する上で知っておいて欲しい基礎的な項目を列挙した 9 | 全ての項目にチェックすることができたのなら、シンプルなウェブアプリを開発する基礎知識が身についていることを僕が保障しよう 10 | 11 | ## ここはスタートラインに過ぎない 12 | 13 | ウェブアプリ開発に必要な知識はこれが全て！なんてことはない 14 | だけれども、これから君たちがどんな海に漕ぎ出したとしても、ここに列挙した知識の応用でどんな荒波も乗り超えることができるはずだ！ 15 | 16 | ## この項目を全てチェックできた君たちへ 17 | 18 | この項目がバッチリチェックできたならば、次の目標が欲しくなるだろう 19 | 20 | 君たちはすでに、Ruby on Rails や Laravel(PHP) などのモダンなウェブアプリケーションフレームワークや 21 | Vue.js React.js などのjsフレームワークを習得するだけの基礎知識はすでに持っている 22 | 23 | 自信を持って好きな方法でプログラミングの学習を進めて欲しい 24 | 25 | ## 一番効率の良いプログラミングの勉強は何かを作って見ることだ 26 | 27 | 最低限の武器を手にしたら、初めはとにかくシンプルなもので構わない 28 | どんどん何かを作って見よう 29 | 30 | # チェックシートの使い方 31 | 32 | 1. このチェックシートは基礎編、発展編、実装編に分かれている 33 | 34 | チェックはお行儀よく上からやる必要はない、まずはざっと全体を見渡して知っている箇所にとりあえずチェックをしていこう 35 | きっと一つもチェックできないなんてことはないはずだ、まずは全体のうちどのくらいの位置にいるかを知ろう 36 | 37 | 2. 知らない用語がないかチェックしてみよう 38 | 39 | 知らない用語や概念が出てきたら検索してみよう 40 | 検索でヒットした記事をしっかり根気よく読みさえすればチェックできる項目も多いはずだ 41 | 42 | それでもチェックが入らなかった項目は参考書を読んだり自分で実際にプログラミングしてみて、自信を持ってチェックできるまで調べよう 43 | そんなに難しい話じゃない、1ヶ月も真剣に取り組めばきっと全てにチェックを入れることができるだろう 44 | 45 | 3. 一度記事を読んだくらいで全て理解しようとしない 46 | 47 | 一度記事を読んだくらいで全部を理解できるのは一握りの天才だけだ、繰り返し何度もやろう 48 | これは僕の話だが公開鍵暗号方式に関しては理解するまでに30回くらいは最低ググったし、5回くらい記事や参考書を読み返してやっと理解した 49 | 50 | 理解が脳の奥まで染み込むには時間がかかる、何度もやり直すつもりで取り組もう 51 | 52 | 検討を祈る！ 53 | 54 | # チェックシートはこちら 55 | 56 | ## 基礎編 57 | - [チェックしてみよう](https://github.com/x-hack-git/webprogramingskill_checksheet/blob/master/checksheet_basic.md) 58 | 59 | 60 | ## 発展編 61 | - [チェックしてみよう](https://github.com/x-hack-git/webprogramingskill_checksheet/blob/master/checksheet_advanced.md) 62 | 63 | 64 | ## 実践編 65 | - [チェックしてみよう](https://github.com/x-hack-git/webprogramingskill_checksheet/blob/master/checksheet_practice.md) 66 | -------------------------------------------------------------------------------- /checksheet_advanced.md: -------------------------------------------------------------------------------- 1 | # ウェブアプリケーション開発の発展知識 2 | 3 | ## コンピュータ 4 | 5 | *勉強を始めたばかりだと少し難しいかもしれない、挑戦してみよう* 6 | 7 | - [ ] クロック周波数の意味を説明することができる 8 | - [ ] UTF-8が何かを説明することができる 9 | - [ ] Unicodeが何かを説明することができる 10 | - [ ] キーボードを押したときにコンピュータの内部で何が起き、どのようにしてディスプレイに打ち込んだ文字が表示されるのか説明できる 11 | - [ ] マウスカーソル(矢印)が動く仕組みを説明できる 12 | 13 | ## インターネット 14 | 15 | - [ ] HTTP / FTP / SMTP などのプロトコルがそれぞれ何に用いられているかを説明することができる 16 | - [ ] 自分でサーバーを立てることができる 17 | - [ ] AWS / heroku などのサービスを使ってウェブアプリを公開することができる 18 | - [ ] 独自ドメインを用意し、自分で用意したサーバーにセットすることができる 19 | 20 | ## Google検索スキル 21 | 22 | *プログラミングをするなら英語はできた方がいい、苦手でも慣れていこう* 23 | 24 | - [ ] ブラウザの設定で検索結果を英語優先にしている 25 | 26 | ## Linuxコマンド 27 | 28 | - [ ] コマンドに様々なオプションをつけて実行することができる 29 | - [ ] | (パイプ)を使いこなす 30 | 31 | ## CSS編 32 | 33 | - [ ] レスポンシブデザインに対応したウェブページを作成することができる 34 | - [ ] 何かしらグリッド・システムを採用しているCSSフレームワークを使うことが出来る 35 | 36 | --- 37 | 38 | ## データベース(RDBMS)編 39 | 40 | - [ ] トランザクションとは何か説明できる 41 | - [ ] トランザクションを開始し正常に終了した場合にのみ結果を反映させるSQLを書ける 42 | - [ ] インデックスを貼ると検索がなぜ早くなるのか説明できる 43 | - [ ] 複数のテーブルを結合させて表示するクエリが書ける 44 | - [ ] データベースのバックアップを取ることができる 45 | 46 | --- 47 | 48 | ## データフォーマット編 49 | 50 | - [ ] 処理に応じた適切なデータフォーマットを選択できる 51 | - [ ] プログラミング言語を利用して各データフォーマットから必要なデータを取得できる 52 | -------------------------------------------------------------------------------- /checksheet_basic.md: -------------------------------------------------------------------------------- 1 | # ウェブアプリケーション開発の基礎知識 2 | 3 | *暗記する必要のある項目は少ない、調べながらでも構わないのでドンドンチェックしていこう* 4 | *発展編、実践編のチェックシートは初心者には難しい内容も含まれているが、興味があれば挑戦してみるといい* 5 | 6 | ## コンピュータ 7 | 8 | *何はともあれプログラミングするのなら、コンピュータに関する最低限の知識は必要だ* 9 | 10 | - [ ] 32bitが何byteか計算することができる 11 | - [ ] 二進法と十進法で記された数値を相互に変換することができる 12 | - [ ] CPUの性能を比較することができる 13 | - [ ] CPUが何かを説明することができる 14 | - [ ] メインメモリとストレージの違いを説明することができる 15 | - [ ] 文字コードとは何かを説明することができる 16 | - [ ] OS(Operating System)が何かを説明することができる 17 | - [ ] 自分が使っているパソコンの現在のメモリ使用量を調べることができる 18 | - [ ] 自分が使っているディスプレイの解像度を調べることができる 19 | - [ ] コンピュータは単純な処理を超高速で実行しているだけということを**骨の髄まで**理解できている 20 | 21 | ## インターネット 22 | 23 | *ウェブアプリケーションを作るのならインターネットに関する最低限の知識は必要になる、まあ最初は飛ばしてしまっても構わないが必ず戻ってきて欲しい* 24 | 25 | - [ ] ウェブサーバーとは何かを説明することができる 26 | - [ ] HTTPリクエスト、HTTPレスポンスを説明することができる 27 | - [ ] 通信プロトコルとは何かを説明することができる 28 | - [ ] URLとは何かを説明することができる 29 | - [ ] ドメインとは何かを説明することができる 30 | - [ ] IPアドレスとは何かを説明することができる 31 | - [ ] DNS(Domain Name System)とは何かを説明することができる 32 | - [ ] bpsが何を表す単位か説明することができる 33 | - [ ] パケットという用語が何を指すのか説明することができる 34 | 35 | ## パソコン操作 36 | 37 | *パソコンが苦手だと話にならない、パソコンを好きになろう* 38 | 39 | - [ ] テキストエディタを利用することができる 40 | - [ ] ファイル、フォルダの新規作成ができる 41 | - [ ] ファイル拡張子とは何かを説明できる 42 | - [ ] タッチタイピングができる 43 | - [ ] 必要なアプリケーションをダウンロード、インストール、削除することができる 44 | 45 | ## Google検索スキル 46 | 47 | *エンジニアは息を吸うように検索し、息を吐くようにコードを書く* 48 | 49 | - [ ] AND検索ができる 50 | - [ ] OR検索ができる 51 | - [ ] とは検索ができる 52 | - [ ] 除外検索ができる 53 | - [ ] フレーズ検索ができる 54 | - [ ] ワイルドカード検索ができる 55 | - [ ] タイトル検索ができる 56 | - [ ] 本文検索ができる 57 | - [ ] 期間を指定して検索ができる 58 | - [ ] 検索エンジンを使って「検索テクニックを検索」することができる 59 | 60 | ## 公式ドキュメントを読む 61 | 62 | *公式ドキュメントには全てが書いてある* 63 | 64 | - [ ] 学ぼうとする技術の公式ドキュメントがどこにあるか探すことができる 65 | - [ ] プログラミングの学習をするときに公式ドキュメントに目を通すことができる 66 | 67 | ## Linuxコマンド 68 | 69 | *簡単なコマンドを使ってファイルの操作ができると学習が捗るのでよく使うものは覚えてしまおう* 70 | 71 | - [ ] コマンドで現在のディレクトリ（カレントディレクトリ）を確認できる 72 | - [ ] コマンドでディレクトリの内容を表示できる 73 | - [ ] コマンドでディレクトリを移動するできる 74 | - [ ] コマンドでファイルの新規作成ができる 75 | - [ ] コマンドでディレクトリの作成ができる 76 | - [ ] コマンドでファイル、ディレクトリのコピーができる 77 | - [ ] コマンドでファイル、ディレクトリ名の変更ができる 78 | - [ ] コマンドの履歴を確認することができる 79 | - [ ] コマンドでファイル名検索をすることができる 80 | - [ ] 以前実行したコマンドを呼び出すことができる 81 | 82 | --- 83 | 84 | # 開発ツール 85 | 86 | ## テキストエディタ 87 | 88 | *エンジニアにはお気に入りのテキストエディタがあるものだ* 89 | 90 | - [ ] viを使ってテキストデータの修正ができる 91 | - [ ] お気に入りのテキストエディタがある 92 | - [ ] プラグインを導入してテキストエディタをカスタマイズすることができる 93 | - [ ] テキストエディタで使えるショートカットを3つ以上知っている 94 | 95 | ## ブラウザ 96 | 97 | *HTMLはブラウザが構文を解析してディスプレイに表示しているんだということを理解しておこう* 98 | 99 | - [ ] ブラウザのキャッシュとは何かを説明することができる 100 | - [ ] ブラウザのキャッシュを削除することができる 101 | 102 | ## Chromeデベロッパー・ツール 103 | 104 | - [ ] PC表示とスマホ表示を切り替えて確認できる 105 | - [ ] DOMを選択してCSSを確認することができる 106 | 107 | ## Git 108 | 109 | *チーム開発でも個人開発でもいずれ必要になる、苦手意識を捨てて覚えてしまおう 一生役に立つ* 110 | 111 | - [ ] バージョン管理システムがなんのために存在しているか説明することができる 112 | - [ ] GitとGitHubの違いを説明することができる 113 | - [ ] Gitとは何かを説明できる 114 | - [ ] リモートリポジトリ、ローカルリポジトリがそれぞれ何を指すか説明することができる 115 | - [ ] コマンドを使ってブランチを切り替えることができる 116 | - [ ] コマンドを使って作業を保存することができる 117 | - [ ] コマンドを使ってリモートリポジトリから差分を取り込むことができる 118 | - [ ] ローカルからリモートリポジトリへ差分を反映させることができる 119 | - [ ] 必要に応じてGitコマンドを調べて使うことができる 120 | - [ ] Gitを使ってアプリを開発したことがある 121 | 122 | --- 123 | 124 | # HTML/CSS編 125 | 126 | *何はともあれHTML/CSSからやってみよう* 127 | 128 | ## HTML 129 | 130 | *書いているうちに慣れてしまう部分も多い、書籍などで基本を抑えたらあとは実践で身につけよう* 131 | 132 | - [ ] HTMLファイルとはどういうものかを説明することができる 133 | - [ ] HTMLファイルを記述することができる 134 | - [ ] HTMLのタグとは何かを説明することができる 135 | - [ ] 基本的なタグが分かり使い分けることができる 136 | - [ ] タグにclass属性を指定できる 137 | - [ ] タグにid属性を指定できる 138 | - [ ] HTMLファイルとJavaScript/CSSファイルとの関係性・役割を説明することができる 139 | - [ ] bodyタグ、headタグの違いが説明できる 140 | 141 | ## HTML フォーム 142 | 143 | *システムを作るならフォームは最重要項目だ、入力をJavaScriptで制御できるようになるためにもしっかりと学ぼう* 144 | 145 | - [ ] テキスト入力フォームを作成できる 146 | - [ ] 入力文字を伏せ字にしたパスワード入力フォームを作成できる 147 | - [ ] チェックボックスを使った入力フォームを作成できる 148 | - [ ] ラジオボタンを使った入力フォームを作成できる 149 | - [ ] セレクトボックスを使った入力フォームを作成できる 150 | - [ ] 日付入力フォームを作成できる 151 | - [ ] labelタグと入力フォームを関連づけることができる 152 | 153 | ## CSS編 154 | 155 | *基本を抑えたら書籍などを使って体系的に勉強するのもいいし、本職のデザイナに任せるってのもアリだと思う* 156 | 157 | - [ ] 文字の色を変えることができる 158 | - [ ] 背景の色を変えることができる 159 | - [ ] 文字のサイズを変えることができる 160 | - [ ] 画像のサイズを縦横比を崩さずに小さく表示することができる 161 | - [ ] div要素を横並びにして表示することができる 162 | - [ ] CSSのみを変更してli要素の先頭だけを違う見た目にする書き方が分かる 163 | - [ ] クラスを指定したstyleを書くことができる 164 | - [ ] idを指定したstyleを書くことができる 165 | - [ ] marginとpaddingの違いが分かる 166 | - [ ] マウスを乗せた時にボタンの色を変更するCSSを書くことができる 167 | - [ ] フォーカスした入力フォームの色を変更するCSSを書くことができる 168 | 169 | --- 170 | 171 | # プログラミング言語基礎編 172 | 173 | ## 様々なプログラミング言語 174 | 175 | - [ ] 一つ以上のプログラミング言語の名前を上げることができる 176 | - [ ] マシン語とは何か説明することができる 177 | - [ ] アセンブラとは何か説明することができる 178 | - [ ] コンパイラとは何か説明することができる 179 | - [ ] インタプリタとは何か説明することができる 180 | - [ ] 静的型付言語、動的型付言語の違いを説明することができる 181 | 182 | ## プログラミング入門 183 | 184 | - [ ] Hello, World (標準入出力) プログラムを1つ以上の言語で書ける 185 | - [ ] 簡単な計算をするプログラムを書ける 186 | - [ ] 計算処理を関数として実行するプログラムを書ける 187 | - [ ] データ型の例を5つ以上あげることができる 188 | - [ ] 数値型、文字列型などの基本的なデータ型を考慮したプログラムが書ける 189 | - [ ] 配列型、辞書型などのデータ型を使ったプログラムが書ける 190 | - [ ] テキストファイルの内容を表示するプログラムが書ける 191 | - [ ] テキストファイルの内容を修正するプログラムが書ける 192 | - [ ] 予約語の例を3つ以上あげることができる 193 | 194 | ## 関数 195 | 196 | - [ ] 引数を持たない関数を定義することができる 197 | - [ ] 引数を1つ以上持つ関数を定義することができる 198 | - [ ] 関数からの返り値を変数で受け取るプログラムを書ける 199 | 200 | ## 制御構文 201 | 202 | 下記の構文を使って簡単な処理をするプログラムが書ける 203 | 204 | - [ ] ifを使ったプログラムが書ける 205 | - [ ] forを使ったプログラムで10回 "hello" を出力するプログラムが書ける 206 | - [ ] 無限ループするプログラムを書くことができる 207 | 208 | ## データ処理 209 | 210 | - [ ] fizzbuzzプログラムを書ける 211 | - [ ] 配列からランダムな要素を取り出すプログラムが書ける 212 | - [ ] 配列の全ての要素に対して何かしらの処理を実行するプログラムが書ける 213 | - [ ] プログラミングとは究極的には「デジタルデータを処理しているだけ」ということが理解できている 214 | 215 | --- 216 | 217 | # JavaScript編 218 | 219 | ## 基礎 220 | 221 | - [ ] HTMLファイルの中にJavaScriptを記述できる 222 | - [ ] HTMLファイルとは別で用意されたJavaScriptをHTMLファイル内で実行する方法が分かる 223 | - [ ] コンソールログを出力できる 224 | - [ ] コンソールログをブラウザで確認する方法が分かる 225 | - [ ] 関数を定義することができる 226 | - [ ] 関数を実行するプログラムが書ける 227 | - [ ] 関数をオブジェクトに格納するプログラムが書ける 228 | - [ ] コールバックを利用したプログラムが書ける 229 | - [ ] CSVデータを読み取って出力するプログラムが書ける 230 | - [ ] JSONデータを読み取って出力するプログラムが書ける 231 | 232 | ## DOM操作 233 | 234 | - [ ] idを指定してDOMを取得するプログラムが書ける 235 | - [ ] classを指定してDOMを取得するプログラムが書ける 236 | - [ ] nameを指定してDOMを取得するプログラムが書ける 237 | - [ ] HTMLを動的に追加するプログラムが書ける 238 | - [ ] HTMLを動的に削除するプログラムが書ける 239 | - [ ] DOMにクラスを付与するプログラムを書くことができる 240 | - [ ] DOMにスタイルを付与するプログラムを書くことができる 241 | - [ ] チェックボックスを使ったフォームを動的に作成できる 242 | - [ ] セレクトボックスを使ったフォームを動的に作成できる 243 | 244 | ## FORMの制御 245 | 246 | - [ ] formの送信をキャンセルするプログラムを書ける 247 | - [ ] formの入力値をチェックするプログラムを書ける 248 | 249 | ## イベントハンドラ 250 | 251 | - [ ] HTMLのボタンをクリックしたときにログを出力するプログラムが書ける 252 | - [ ] HTMLのボタンをクリックしたときに画像を切り替えるプログラムが書ける 253 | - [ ] JavaScriptで定義されているイベントに対してイベントハンドラを追加するプログラムを書くことができる 254 | - [ ] イベントハンドラを追加するプログラムを２通り以上の方法で書くことができる 255 | 256 | ## 非同期通信 257 | 258 | - [ ] Ajax通信をするプログラムを書くことができる(XMLHTTPRequestを使える) 259 | 260 | ## ライブラリの使用方法 261 | 262 | - [ ] JavaScriptで外部ライブラリを利用する方法が分かる 263 | - [ ] 何かしらの公開されているWEB APIを利用してシンプルなアプリケーションを作成することができる 264 | 265 | --- 266 | 267 | # データベース(RDBMS)編 268 | 269 | ## 基礎知識 270 | 271 | - [ ] データベースアプリケーションの名前を最低1つ上げることができる 272 | - [ ] ターミナルからデータベースアプリケーションを立ち上げてデータベースに接続することができる 273 | - [ ] 主キーとは何か説明できる 274 | - [ ] 外部キー制約とは何か説明できる 275 | - [ ] 正規化とは何かを説明することができる 276 | - [ ] データベースを正規化するメリットを上げることができる 277 | 278 | ## SQL 279 | 280 | - [ ] SQLでデータ追加クエリを書くことができる 281 | - [ ] SQLでデータ更新クエリを書くことができる 282 | - [ ] SQLでデータ削除クエリを書くことができる 283 | - [ ] SQLでデータ選択クエリを書くことができる 284 | - [ ] SQLで範囲を指定して検索するクエリを書くことができる 285 | - [ ] SQLでレコードの平均値を求めるクエリを書くことができる 286 | - [ ] SQLでレコードの合計を求めるクエリを書くことができる 287 | - [ ] SQLで重複を排除して結果を取得するクエリを書くことができる 288 | 289 | ## 発展 290 | 291 | - [ ] トランザクションとは何かを説明できる 292 | - [ ] インデックスを貼ると検索がなぜ早くなるのか説明できる 293 | - [ ] 複数のテーブルを結合させて表示するクエリが書ける 294 | - [ ] データベースのバックアップを取ることができる 295 | 296 | --- 297 | 298 | # データフォーマット編 299 | 300 | ## データフォーマット基礎 301 | 302 | - [ ] JSON, XML, CSVを聞いたことがある 303 | - [ ] JSON, XML, CSVそれぞれを見分けることができる 304 | - [ ] なぜ適切なデータ型を選ぶ必要があるのかを説明できる 305 | - [ ] ライブラリを利用してJSONをパースし、オブジェクトとして扱うことができる 306 | - [ ] ライブラリを利用してXMLをパースし、オブジェクトとして扱うことができる 307 | 308 | ## JSON 309 | 310 | - [ ] 簡単なデータ構造のJSONを調べながら書ける 311 | - [ ] 配列、オブジェクトで入れ子構造になったデータをJSONで表現できる 312 | - [ ] JSONで利用可能なデータ型が何か分かる 313 | - [ ] JSONでのエスケープ処理の書き方が分かる 314 | - [ ] JSONから任意のデータを取り出すプログラムを書ける 315 | - [ ] JSONを返すAPIが作成できる 316 | 317 | ## XML 318 | 319 | - [ ] 簡単なデータ構造のXMLを調べながら書ける 320 | - [ ] 入れ子構造になったデータをXMLで表現できる 321 | - [ ] XMLから任意のデータを取り出すプログラムを書ける 322 | - [ ] XMLを返すAPIが作成できる 323 | 324 | ## CSV 325 | 326 | - [ ] CSVファイルを作成できる 327 | - [ ] CSVから任意のデータを取り出すプログラムを書ける 328 | - [ ] CSVを返すAPIが作成できる 329 | 330 | ## データフォーマット実務 331 | 332 | - [ ] 処理に応じた適切なデータフォーマットを選択できる 333 | 334 | --- 335 | 336 | # セキュリティ 337 | 338 | *自分のウェブサービスを世界に向けて公開するということは、世界中のハッカーから攻撃を受ける可能性があるということだ* 339 | 340 | ## 基本 341 | 342 | - [ ] ファイルにパスワードを設定する方法を知っている 343 | 344 | ## 攻撃手法 345 | 346 | - [ ] ブルートフォース・アタックが何かを説明することができる 347 | - [ ] ディクショナリー・アタックが何かを説明することができる 348 | 349 | ## 暗号化 350 | 351 | - [ ] SSL通信とは何かを説明することができる 352 | - [ ] 共通鍵暗号方式とは何か説明することができる 353 | - [ ] 公開鍵暗号方式とは何か説明することができる 354 | - [ ] 不可逆暗号とは何かを説明することができる 355 | - [ ] CSRFトークンとは何か説明することができる 356 | -------------------------------------------------------------------------------- /checksheet_practice.md: -------------------------------------------------------------------------------- 1 | # 実践編 2 | 3 | ## 画面設計 4 | 5 | - [ ] Webページの表示が遅い場合に、その原因を調査することができる 6 | 7 | ## データベース設計 8 | 9 | - [ ] 何かしらの決済サービスを利用してトランザクションを考慮した決済機能の開発ができる 10 | 11 | ## 負荷対策 12 | 13 | - [ ] キャッシュサーバーを導入できる 14 | - [ ] データベース負荷を調査する手順を一つ以上あげることができる 15 | - [ ] 適切にインデックスを貼ることができる 16 | - [ ] 不要なインデックスを削除する手順が分かる 17 | 18 | ## セキュリティ対策 19 | 20 | --------------------------------------------------------------------------------