思考のジャンプ幅が狭いなら，飛ぶ回数で補えばいいじゃない！！

非情報系30歳が競技プログラミングやWeb開発を始めるとどうなるか?

「Webプログラミング基礎スキルのチェックシート・基礎編」　を試してみた

Web開発 目指せ! 脱初心者

github.com

結論

  • チェックできなかったところを調べる．
  • 調べた項目を理解できるようにする．
  • 理解できていないところは，繰り返し読む&記事として理解しているところとそうでないところを書き出す．
  • 少なとも1日1つはチェックが入れられるようにする．

はじめに

  • Web開発に関する自分の理解度を把握していきたいと思います．
  • 理解度を確認する手段がないかと思っていたところに，Twitterのタイムラインで偶然発見．作者の方々に感謝です．

以下から引用部分です．チェックや質問への回答部分は上書きしています．

ウェブアプリケーション開発の基礎知識

暗記する必要のある項目は少ない、調べながらでも構わないのでドンドンチェックしていこう
発展編、実践編のチェックシートは初心者には難しい内容も含まれているが、興味があれば挑戦してみるといい

コンピュータ

何はともあれプログラミングするのなら、コンピュータに関する最低限の知識は必要だ

  • [ ] 32bitが何byteか計算することができる
  • [ ] 二進法と十進法で記された数値を相互に変換することができる
  • [ ] CPUの性能を比較することができる
  • [ ] CPUが何かを説明することができる
    • コンピュータの処理を担当
  • [ ◯ ] メインメモリとストレージの違いを説明することができる
    • メインメモリ：作業結果を一時的にメモリに保存する．コンピュータの電源を切ると失われる．
    • ストレージ：作業結果を永続化する．コンピュータの電源を切っても，基本的には保存されている．
  • [ ] 文字コードとは何かを説明することができる
    • コンピュータが文字を認識するためのルール（要調査）
  • [ ] OS(Operating System)が何かを説明することができる
    • コンピュータの最も基礎的な処理を担当する装置
  • [ ◯ ] 自分が使っているパソコンの現在のメモリ使用量を調べることができる
  • [ ] 自分が使っているディスプレイの解像度を調べることができる
  • [ ] コンピュータは単純な処理を超高速で実行しているだけということを骨の髄まで理解できている

インターネット

ウェブアプリケーションを作るのならインターネットに関する最低限の知識は必要になる、まあ最初は飛ばしてしまっても構わないが必ず戻ってきて欲しい

  • [ ] ウェブサーバーとは何かを説明することができる
  • [ ] HTTPリクエスト、HTTPレスポンスを説明することができる
  • [ ] 通信プロトコルとは何かを説明することができる
  • [ ] URLとは何かを説明することができる
  • [ ] ドメインとは何かを説明することができる
  • [ ] IPアドレスとは何かを説明することができる
  • [ ] DNS(Domain Name System)とは何かを説明することができる
  • [ ] bpsが何を表す単位か説明することができる
  • [ ] パケットという用語が何を指すのか説明することができる

パソコン操作

パソコンが苦手だと話にならない、パソコンを好きになろう

  • [ ◯ ] テキストエディタを利用することができる
  • [ ◯ ] ファイル、フォルダの新規作成ができる
  • [ ◯ ] ファイル拡張子とは何かを説明できる
    • ファイルの末尾にある.hogeのhogeの部分．ファイルの種類を識別するためのもの．
  • [ ◯ ] タッチタイピングができる
  • [ ◯ ] 必要なアプリケーションをダウンロード、インストール、削除することができる

Google検索スキル

エンジニアは息を吸うように検索し、息を吐くようにコードを書く

  • [ ◯ ] AND検索ができる
  • [ ] OR検索ができる
  • [ ] とは検索ができる
  • [ ] 除外検索ができる
  • [ ] フレーズ検索ができる
  • [ ◯ ] ワイルドカード検索ができる
  • [ ] タイトル検索ができる
  • [ ] 本文検索ができる
  • [ ] 期間を指定して検索ができる
  • [ ] 検索エンジンを使って「検索テクニックを検索」することができる

公式ドキュメントを読む

公式ドキュメントには全てが書いてある

  • [ ◯ ] 学ぼうとする技術の公式ドキュメントがどこにあるか探すことができる
  • [ ◯ ] プログラミングの学習をするときに公式ドキュメントに目を通すことができる

Linuxコマンド

簡単なコマンドを使ってファイルの操作ができると学習が捗るのでよく使うものは覚えてしまおう

  • [ ◯ ] コマンドで現在のディレクトリ（カレントディレクトリ）を確認できる
  • [ ◯ ] コマンドでディレクトリの内容を表示できる
    • ls
  • [ ◯ ] コマンドでディレクトリを移動するできる
    • cd
  • [ ] コマンドでファイルの新規作成ができる
  • [ ◯ ] コマンドでディレクトリの作成ができる
    • mkdir
  • [ ◯ ] コマンドでファイル、ディレクトリのコピーができる
    • cp
  • [ ] コマンドでファイル、ディレクトリ名の変更ができる
  • [ ] コマンドの履歴を確認することができる
  • [ ] コマンドでファイル名検索をすることができる
  • [ ] 以前実行したコマンドを呼び出すことができる

開発ツール

テキストエディタ

エンジニアにはお気に入りのテキストエディタがあるものだ

ブラウザ

HTMLはブラウザが構文を解析してディスプレイに表示しているんだということを理解しておこう

  • [ ] ブラウザのキャッシュとは何かを説明することができる
  • [ ] ブラウザのキャッシュを削除することができる

Chromeデベロッパー・ツール

  • [ ] PC表示とスマホ表示を切り替えて確認できる
  • [ ] DOMを選択してCSSを確認することができる

Git

チーム開発でも個人開発でもいずれ必要になる、苦手意識を捨てて覚えてしまおう 一生役に立つ

  • [ ◯ ] バージョン管理システムがなんのために存在しているか説明することができる
    • ソースコードなどのバージョンをチームとして管理するため
    • 分業をしやすくするため
  • [ ◯ ] GitとGitHubの違いを説明することができる
  • [ ◯ ] Gitとは何かを説明できる
  • [ ◯ ] リモートリポジトリ、ローカルリポジトリがそれぞれ何を指すか説明することができる
  • [ ◯ ] コマンドを使ってブランチを切り替えることができる
    • git branch
  • [ ◯ ] コマンドを使って作業を保存することができる
    • git add
    • git commit -m "Commit message"
  • [ ◯ ] コマンドを使ってリモートリポジトリから差分を取り込むことができる
    • git pull
  • [ ◯ ] ローカルからリモートリポジトリへ差分を反映させることができる
    • git push
  • [ ◯ ] 必要に応じてGitコマンドを調べて使うことができる
  • [ ◯ ] Gitを使ってアプリを開発したことがある

HTML/CSS編

何はともあれHTML/CSSからやってみよう

HTML

書いているうちに慣れてしまう部分も多い、書籍などで基本を抑えたらあとは実践で身につけよう

  • [ ◯ ] HTMLファイルとはどういうものかを説明することができる
    • Webサイトの文字情報を記述したファイル（要調査）
  • [ ] HTMLファイルを記述することができる
  • [ ] HTMLのタグとは何かを説明することができる
  • [ ] 基本的なタグが分かり使い分けることができる
  • [ ] タグにclass属性を指定できる
  • [ ] タグにid属性を指定できる
  • [ ] HTMLファイルとJavaScript/CSSファイルとの関係性・役割を説明することができる
  • [ ] bodyタグ、headタグの違いが説明できる

HTML フォーム

システムを作るならフォームは最重要項目だ、入力をJavaScriptで制御できるようになるためにもしっかりと学ぼう

  • [ ] テキスト入力フォームを作成できる
  • [ ] 入力文字を伏せ字にしたパスワード入力フォームを作成できる
  • [ ] チェックボックスを使った入力フォームを作成できる
  • [ ] ラジオボタンを使った入力フォームを作成できる
  • [ ] セレクトボックスを使った入力フォームを作成できる
  • [ ] 日付入力フォームを作成できる
  • [ ] labelタグと入力フォームを関連づけることができる

CSS編

基本を抑えたら書籍などを使って体系的に勉強するのもいいし、本職のデザイナに任せるってのもアリだと思う

  • [ ] 文字の色を変えることができる
  • [ ] 背景の色を変えることができる
  • [ ] 文字のサイズを変えることができる
  • [ ] 画像のサイズを縦横比を崩さずに小さく表示することができる
  • [ ] div要素を横並びにして表示することができる
  • [ ] CSSのみを変更してli要素の先頭だけを違う見た目にする書き方が分かる
  • [ ] クラスを指定したstyleを書くことができる
  • [ ] idを指定したstyleを書くことができる
  • [ ] marginとpaddingの違いが分かる
  • [ ] マウスを乗せた時にボタンの色を変更するCSSを書くことができる
  • [ ] フォーカスした入力フォームの色を変更するCSSを書くことができる

プログラミング言語基礎編

様々なプログラミング言語

プログラミング入門

  • [ ◯ ] Hello, World (標準入出力) プログラムを1つ以上の言語で書ける
  • [ ◯ ] 簡単な計算をするプログラムを書ける
  • [ ◯ ] 計算処理を関数として実行するプログラムを書ける
  • [ ◯ ] データ型の例を5つ以上あげることができる
    • 整数型，実数型，文字型，bool型，リスト，配列，辞書型
  • [ ◯ ] 数値型、文字列型などの基本的なデータ型を考慮したプログラムが書ける
  • [ ◯ ] 配列型、辞書型などのデータ型を使ったプログラムが書ける
  • [ ◯ ] テキストファイルの内容を表示するプログラムが書ける
  • [ ] テキストファイルの内容を修正するプログラムが書ける
  • [ ◯ ] 予約語の例を3つ以上あげることができる

関数

  • [ ◯ ] 引数を持たない関数を定義することができる
  • [ ◯ ] 引数を1つ以上持つ関数を定義することができる
  • [ ◯ ] 関数からの返り値を変数で受け取るプログラムを書ける

制御構文

下記の構文を使って簡単な処理をするプログラムが書ける

  • [ ◯ ] ifを使ったプログラムが書ける
  • [ ◯ ] forを使ったプログラムで10回 "hello" を出力するプログラムが書ける
  • [ ◯ ] 無限ループするプログラムを書くことができる

データ処理

  • [ ◯ ] fizzbuzzプログラムを書ける
  • [ ◯ ] 配列からランダムな要素を取り出すプログラムが書ける
  • [ ◯ ] 配列の全ての要素に対して何かしらの処理を実行するプログラムが書ける
  • [ ] プログラミングとは究極的には「デジタルデータを処理しているだけ」ということが理解できている

JavaScript編

基礎

  • [ ] HTMLファイルの中にJavaScriptを記述できる
  • [ ] HTMLファイルとは別で用意されたJavaScriptをHTMLファイル内で実行する方法が分かる
  • [ ] コンソールログを出力できる
  • [ ] コンソールログをブラウザで確認する方法が分かる
  • [ ] 関数を定義することができる
  • [ ] 関数を実行するプログラムが書ける
  • [ ] 関数をオブジェクトに格納するプログラムが書ける
  • [ ] コールバックを利用したプログラムが書ける
  • [ ] CSVデータを読み取って出力するプログラムが書ける
  • [ ] JSONデータを読み取って出力するプログラムが書ける

DOM操作

  • [ ] idを指定してDOMを取得するプログラムが書ける
  • [ ] classを指定してDOMを取得するプログラムが書ける
  • [ ] nameを指定してDOMを取得するプログラムが書ける
  • [ ] HTMLを動的に追加するプログラムが書ける
  • [ ] HTMLを動的に削除するプログラムが書ける
  • [ ] DOMにクラスを付与するプログラムを書くことができる
  • [ ] DOMにスタイルを付与するプログラムを書くことができる
  • [ ] チェックボックスを使ったフォームを動的に作成できる
  • [ ] セレクトボックスを使ったフォームを動的に作成できる

FORMの制御

  • [ ] formの送信をキャンセルするプログラムを書ける
  • [ ] formの入力値をチェックするプログラムを書ける

イベントハンドラ

  • [ ] HTMLのボタンをクリックしたときにログを出力するプログラムが書ける
  • [ ] HTMLのボタンをクリックしたときに画像を切り替えるプログラムが書ける
  • [ ] JavaScriptで定義されているイベントに対してイベントハンドラを追加するプログラムを書くことができる
  • [ ] イベントハンドラを追加するプログラムを２通り以上の方法で書くことができる

非同期通信

  • [ ] Ajax通信をするプログラムを書くことができる(XMLHTTPRequestを使える)

ライブラリの使用方法

  • [ ] JavaScriptで外部ライブラリを利用する方法が分かる
  • [ ] 何かしらの公開されているWEB APIを利用してシンプルなアプリケーションを作成することができる

データベース(RDBMS)編

基礎知識

  • [ ◯ ] データベースアプリケーションの名前を最低1つ上げることができる
  • [ ] ターミナルからデータベースアプリケーションを立ち上げてデータベースに接続することができる
  • [ ] 主キーとは何か説明できる
  • [ ] 外部キー制約とは何か説明できる
  • [ ] 正規化とは何かを説明することができる
  • [ ] データベースを正規化するメリットを上げることができる

SQL

  • [ ] SQLでデータ追加クエリを書くことができる
  • [ ] SQLでデータ更新クエリを書くことができる
  • [ ] SQLでデータ削除クエリを書くことができる
  • [ ] SQLでデータ選択クエリを書くことができる
  • [ ] SQLで範囲を指定して検索するクエリを書くことができる
  • [ ] SQLでレコードの平均値を求めるクエリを書くことができる
  • [ ] SQLでレコードの合計を求めるクエリを書くことができる
  • [ ] SQLで重複を排除して結果を取得するクエリを書くことができる

発展

  • [ ] トランザクションとは何かを説明できる
  • [ ] インデックスを貼ると検索がなぜ早くなるのか説明できる
  • [ ] 複数のテーブルを結合させて表示するクエリが書ける
  • [ ] データベースのバックアップを取ることができる

データフォーマット編

データフォーマット基礎

  • [ ◯ ] JSON, XML, CSVを聞いたことがある
  • [ ◯ ] JSON, XML, CSVそれぞれを見分けることができる
  • [ ] なぜ適切なデータ型を選ぶ必要があるのかを説明できる
  • [ ] ライブラリを利用してJSONをパースし、オブジェクトとして扱うことができる
  • [ ] ライブラリを利用してXMLをパースし、オブジェクトとして扱うことができる

JSON

  • [ ] 簡単なデータ構造のJSONを調べながら書ける
  • [ ] 配列、オブジェクトで入れ子構造になったデータをJSONで表現できる
  • [ ] JSONで利用可能なデータ型が何か分かる
  • [ ] JSONでのエスケープ処理の書き方が分かる
  • [ ] JSONから任意のデータを取り出すプログラムを書ける
  • [ ] JSONを返すAPIが作成できる

XML

  • [ ] 簡単なデータ構造のXMLを調べながら書ける
  • [ ] 入れ子構造になったデータをXMLで表現できる
  • [ ] XMLから任意のデータを取り出すプログラムを書ける
  • [ ] XMLを返すAPIが作成できる

CSV

  • [ ◯ ] CSVファイルを作成できる
  • [ ◯ ] CSVから任意のデータを取り出すプログラムを書ける
  • [ ] CSVを返すAPIが作成できる

データフォーマット実務

  • [ ] 処理に応じた適切なデータフォーマットを選択できる

セキュリティ

自分のウェブサービスを世界に向けて公開するということは、世界中のハッカーから攻撃を受ける可能性があるということだ

基本

  • [ ] ファイルにパスワードを設定する方法を知っている

攻撃手法

  • [ ] ブルートフォース・アタックが何かを説明することができる
  • [ ] ディクショナリー・アタックが何かを説明することができる

暗号化

  • [ ] SSL通信とは何かを説明することができる
  • [ ] 共通鍵暗号方式とは何か説明することができる
  • [ ] 公開鍵暗号方式とは何か説明することができる
  • [ ] 不可逆暗号とは何かを説明することができる
  • [ ] CSRFトークンとは何か説明することができる

感想

  • プログラミング言語基礎編については，競技プログラミングのおかげで，ほぼチェックできたと思います．
  • その他の項目は書籍で読んだつもりになっており，まだまだ学習する余地がありそうだと痛感しました．

参考資料

競プロerのためのはてなTeX記法チートシート - ARMERIA

更新履歴

  • 2019/04/24 作成
  • 2019/04/25 更新