添削希望：Webプログラミングスキルチェックシート(初級)

2019年11月21日 16:16

途中までですが、添削頂ければ幸いです。

X-HACK　松田社長の記事からです。

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

- [ ] 32bitが何byteか計算することができる
1bit = 0か1（2種類の情報を表すことができる。例・暑い or 寒い）
1byte = 2の8乗（2×2×2×2×2×2×2×2）＝ 256（00000000から11111111まで）
1byte = 8bit
32bit = 32÷8＝4byte(2の32乗)

- [ ] 二進法と十進法で記された数値を相互に変換することができる
１、二進法から十進法
１０１０＝１×２の３乗＋０×２の２乗＋１×２の１乗＋０×２の０乗
　　　　＝８＋０＋２+０
　　　　＝１０
２、十進法から二進法
１０１０
１０１０/２
＝５０５/２
＝２５２余り１
２５２/２＝１２６
１２６/２＝６３
６３/２＝３１余り１
３１/２＝１５余り１
１５/２＝７余り１
７/２＝３余り１
３/２＝１余り１
１/２＝０余り１
０１００１１１１１１

- [ ] CPUの性能を比較することができる
【例】Core i7-7800X 3.50GHz
１秒間に３５億回のON/OFF振動が可能。
FLOPS・・・１秒間で小数（基数を２とする(２進法の)分数）の掛け算・割り算を多くできるCPUの性能が高いだろうという考え方

- [ ] CPUが何かを説明することができる
プログラムを解釈・実行してコンピュータ全体の動作を制御する措置。
・演算ユニットやレジスタの動作、メモリの読み書き・入出力等を制御する制御ユニット
・２進数の情報を論理演算・加算・減算する演算ユニット
・レジスタ
レジスタの仕事
（１）メモリに記憶されたプログラムの先頭アドレスを保持する（ベースレジスタ）。
（２）メモリに記憶されたプログラムの基準となるアドレスからの増減値を記憶しておく（指標レジスタ）。
（３）メモリから読みだした命令を記憶しておく（命令レジスタ）。
（４）その他の計算が速く、円滑に、安全に行われるための潤滑油的な仕事
ＣＰＵからみると、
１、メモリ命令を読み込む
２、命令を制御情報に変換（制御ユニット）
３、制御情報に従って、演算動作・出力（演算ユニット）
その他にキャッシュ（情報の転送効率を上げる措置）やパイプライン（複数の命令処理を効率よく実行する仕組み）が入っていることがある。

- [ ] メインメモリとストレージの違いを説明することができる

メインメモリ・・・主記憶装置。データの作業場所の広さ。
ストレージ・・・補助記憶措置。データを保管場所の広さ。

- [ ] 文字コードとは何かを説明することができる
文字に番号を付ける形式

- [ ] OS(Operating System)が何かを説明することができる
人間が、目的に沿ってコンピュータを利用することが出来るようにするための基盤となるソフトウェア

- [ ] 自分が使っているパソコンの現在のメモリ使用量を調べることができる
２６６２ＭＢ（スタート→Ｗｉｎｄｏｗｓシステムツール→タスクマネージャ→パフォーマンス→メモリ）

- [ ] 自分が使っているディスプレイの解像度を調べることができる
システム→ディスプレイ

- [ ] コンピュータは単純な処理を超高速で実行しているだけということを理解できている
主に論理、確率、統計の計算を高速で行う。

インターネット
ウェブアプリケーションを作るのならインターネットに関する最低限の知識は必要になる

- [ ] ウェブサーバーとは何かを説明することができる
ハードウェアまたはソフトウェア、あるいは両方が動作しているもの
https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_web_server

- [ ] HTTPリクエスト、HTTPレスポンスを説明することができる
HTTPリクエスト
実行したい操作、取り込むリソースのパス、HTTP プロトコルのバージョン、サーバーに追加の情報を与える任意のヘッダー、POST のようなメソッドではレスポンスと同様に、送信するリソースを包含したボディがある。

HTTPレスポンス
準拠する HTTP プロトコルのバージョン、ステータスコード（リクエストが成功したか否か、およびその理由を示す）、ステータスメッセージ、リクエストと同様の HTTP ヘッダー、リソースを含む本文から成る。
https://developer.mozilla.org/ja/docs/Web/HTTP/Overview

- [ ] 通信プロトコルとは何かを説明することができる
互いに通信するために制定された手順（規約）
https://www.japansensor.co.jp/faq/938/index.html

- [ ] URLとは何かを説明することができる
ブラウザーがウェブ上の公開されたリソースを取得するために使用するメカニズム
https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL

- [ ] ドメインとは何かを説明することができる
IPアドレスをURLとして文字列に置き換える際に、置き換えたい文字列を決めたもの
https://domain-talk.net/domain-column/relationship-domain/

- [ ] IPアドレスとは何かを説明することができる
ネットワークに接続された、インターネットプロトコル(IP) を使うすべての端末に割り当てられる番号
https://developer.mozilla.org/ja/docs/Glossary/IP_Address

- [ ] DNS(Domain Name System)とは何かを説明することができる
ドメイン名とIPアドレスの対応付けや、メールの宛先ホストを指示するためのシステム。Web サイトの住所録のようなもの
https://www.nic.ad.jp/ja/newsletter/No22/080.html

- [ ] bpsが何を表す単位か説明することができる
データ通信の速度を表す単位。
https://www.kddi.com/yogo/%E6%83%85%E5%A0%B1%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0/bps.html

- [ ] パケットという用語が何を指すのか説明することができる
データがサーバからクライアントに送信される形式。情報を小さな塊にして一度に何人も利用することが出来るようにする。
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works

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

- [ ] テキストエディタを利用することができる
メモ帳、Visual Studio Codeなど

- [ ] ファイル、フォルダの新規作成ができる
〇
- [ ] ファイル拡張子とは何かを説明できる
ファイルの種類や作成したアプリケーションを表した情報
https://support.microsoft.com/ja-jp/help/978449

- [ ] タッチタイピングができる
〇
- [ ] 必要なアプリケーションをダウンロード、インストール、削除することができる
△（英語だと時間がかかる）

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

- [ ] AND検索ができる
１. AND検索
「机　整理　ケース」など、２つ以上のキーワードで検索する方法。

- [ ] OR検索ができる
「手帳 OR ノート　OR　付箋」など２つ以上のキーワードをのうちどちらか1つが含まれているサイトを検索。

- [ ] とは検索ができる
〇

- [ ] 除外検索ができる
「ＰＣ-Ｍac」のように特定のキーワードを省きたい場合の検索方法

- [ ] フレーズ検索ができる
「”スマホ　アプリ”」のようにダブルクオテーションで囲ったキーワードの順番に検索。

- [ ] ワイルドカード検索ができる
例　電子署名*法律

- [ ] タイトル検索ができる
「TITLEWORDS(トヨタ)」のようにカッコ内に入れたキーワードを入れる。

- [ ] 本文検索ができる
「intext:」＋「一つのキーワード」、「allintext:」＋「複数のキーワード」
https://www.turbine.co.jp/blog/201606_goole-search

- [ ] 検索エンジンを使って「検索テクニックを検索」することができる
グーグルの場合「Google　検索　ヘルプ」で検索
https://support.google.com/websearch/answer/134479?hl=ja&ref_topic=3036132

公式ドキュメントを読む
公式ドキュメントには全てが書いてある、しかもほとんどの場合無料だ

- [ ] 学ぼうとする技術の公式ドキュメントがどこにあるか探すことができる
技術の名前　site　公式サイトのドメイン　
技術の名前　公式
など

- [ ] プログラミングの学習をするときに公式ドキュメントに目を通すことができる
〇（全部理解できているかは分からない。）

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

- [ ] コマンドで現在のディレクトリ（カレントディレクトリ）を確認できる
pwd
https://qiita.com/lrf141/items/4dadd107c1ac778260e5
- [ ] コマンドでディレクトリの内容を表示できる
ls　
- [ ] コマンドでディレクトリを移動するできる
cd　+移動したいディレクトリ名
- [ ] コマンドでファイルの新規作成ができる
mv + Enter
- [ ] コマンドでディレクトリの作成ができる
Mkdir ディレクトリ名
- [ ] コマンドでファイル、ディレクトリのコピーができる
cp [オプション] [コピーしたいファイル・ディレクトリ名] [コピー先]
- [ ] コマンドでファイル、ディレクトリ名の変更ができる
mv　【現在のファイル名】　【変更後のファイル名】

- [ ] コマンドの履歴を確認することができる
history ＋ [表示するコマンド数]

https://webkaru.net/linux/history-command/

- [ ] コマンドでファイル名検索をすることができる
find ./ -name　＋　【ファイル名】

https://uxmilk.jp/8583

- [ ] 以前実行したコマンドを呼び出すことができる
Ctrl-r　＋【コマンド名】
https://qiita.com/quwa/items/3a23c9dbe510e3e0f58e

テキストエディタ

エンジニアにはお気に入りのテキストエディタがあるものだ、仕事道具には拘りたい

- [ ] viを使ってテキストデータの修正ができる
↑,↓,→,← 各方向に 1 つ移動
i カーソルのある場所に挿入、インサートモードになり,文字を入力できる.終了は [Esc] キー
a カーソルのある次の場所に挿入インサートモードになり,文字を入力できる.終了は [Esc] キー
x カーソルのある場所の1文字削除
r カーソルのある場所の1文字置き換え

- [ ] お気に入りのテキストエディタがある
Visual Studio Code

- [ ] プラグインを導入してテキストエディタをカスタマイズすることができる
Visual Studio Codeの場合
拡張機能　関係ありそうな文字を検索窓に入力して検索

- [ ] テキストエディタで使えるショートカットを3つ以上知っている
Visual Studio Codeの場合
F10 Debugを開始
Ctrl ＋o ファイルを開く
Ctrl ＋ｓ　保存

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

- [ ] バージョン管理システムがなんのために存在しているか説明することができる
自分で完全にプロジェクトに取り組むことはまれであり、他の人と仕事を始めるとすぐに、お互いの仕事と競合するリスクを冒し始める。これは、両方が同じ作品を更新しようとするときに、同時にコードの発生を管理し、結果として作業の損失を回避するために、何らかのメカニズムを用意する必要がある。
自分で、または他の人とプロジェクトで作業するときは、コードを中央の場所でバックアップできるようにしたいので、コンピューターが壊れても失われない。
また、問題が後で発見された場合、以前のバージョンにロールバックできるようにする必要があります。例えば、同じファイルの異なるバージョンを作成することで実際にエラーが発生しやすいと信頼することができない。
さまざまなチームメンバーは通常、独自のコードのバージョンを作成し、そのバージョンの新しい機能に取り組んでから、制御された方法でマージする。
https://developer.mozilla.org/ja/docs/Learn/GitHub

- [ ] GitとGitHubの違いを説明することができる
Gitはバージョン管理システムの１つ。
GitHubはWebサイト+インフラストラクチャであり、Gitサーバーに加えて、コードの問題の報告、ツールのレビュー、プロジェクトなど、Gitリポジトリを個別またはチームで操作するためのツール、タスクやタスクステータスの割り当てなどの管理機能を多数提供する。
https://developer.mozilla.org/ja/docs/Learn/GitHub
- [ ] Gitとは何かを説明できる
Gitは、分散コードベースを含むリポジトリの完全なコピーがコンピュータ（と誰も他の人の）で作られているバージョン管理システム。
情報のコピーに変更を加え、その後、管理者はマスター・コピーを使用して変更するかどうかを決定するサーバーまで戻って変更する。
https://developer.mozilla.org/ja/docs/Learn/GitHub

- [ ] リモートリポジトリ、ローカルリポジトリがそれぞれ何を指すか説明することができる
リモートリポジトリは、インターネット上あるいはその他ネットワーク上のどこかに存在するプロジェクト。
https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AE%E4%BD%9C%E6%A5%AD

ローカルリポジトリとは、ユーザ一人ひとりが利用するために、自分の手元のマシン上に管理するリポジトリ。ローカルリポジトリで編集した内容をリモートリポジトリにアップロードできる。
https://qiita.com/k_h_mirai/items/8003e2da31fff2db66cc

- [ ] コマンドを使ってブランチを切り替えることができる
add　【テキスト名】.text

- [ ] コマンドを使って作業を保存することができる
git add 【ファイル名】
git commit

- [ ] コマンドを使ってリモートリポジトリから差分を取り込むことができる
git checkout 【ブランチ名】
git rebase master

- [ ] ローカルからリモートリポジトリへ差分を反映させることができる
git diff リモート名/ブランチ名

- [ ] 必要に応じてGitコマンドを調べて使うことができる
△

- [ ] Gitを使ってアプリを開発したことがある
ないです。

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

- [ ] HTMLファイルとはどういうものかを説明することができる
HTML は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか？箇条書きなのか？表の一部なのか？) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか？コンテンツを３段組にするのか？ナビゲーションメニューを持つのか？) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができる。

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML

- [ ] HTMLファイルを記述することができる
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
<img　class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
</div>

<span class= "fa fa-bars menu-icon"></span>

<div class="header-right">
<a href="#">レッスン</a>
<a href="#">新規登録</a>
<a href="#" class="login">ログイン</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>LEARN TO CODE.</h1>
<h1>LEARN TO BE CREATIVE.</h1>
<p>Progateはオンラインプログラミング学習サービスです。</p>
<p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
<div class="btn-wrapper">
<a href="#" class="btn signup">新規登録はこちら</a>
<p>or</p>
<a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
<a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
</div>
</div>
</div>
<div class="lesson-wrapper">
<div class="container">
<div class="heading">
<h2>Learn Where to Get Started!</h2>
</div>
<div class="lessons">
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/html.png">
<p>HTML & CSS</p>
</div>
<p class="text-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/jQuery.png">
<p>jQuery</p>
</div>
<p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/ruby.png">
<p>Ruby</p>
</div>
<p class="text-contents">オープンソースの動的なプログラミング言語で、シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/php.png">
<p>PHP</p>
</div>
<p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="message-wrapper">
<div class="container">
<div class="heading">
<h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
<h3>Let's learn to code, learn to be creative!</h3>
</div>
<span class="btn message">さっそく開発する</span>
</div>
</div>
<footer>
<div class="container">
<imgsrc="https://prog8.com/images/html/advanced/footer_logo.png">
<p>Learn to code, learn to be creative.</p>
</div>
</footer>
</body>
</html>

- [ ] HTMLのタグとは何かを説明することができる
HTML文書内で、ホームページの動きをあらわす命令やコメントを書き込むための書式

- [ ] 基本的なタグが分かり使い分けることができる
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>
- [ ] タグにclass属性を指定できる
<p class="text-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>

- [ ] タグにid属性を指定できる
<div id="contain"≻○○</div>

- [ ] HTMLファイルとJavaScript/CSSファイルとの関係性・役割を説明することができる
HTMLは、段落、見出し、データテーブルの定義、ページへの画像やビデオの埋め込みなど、Webコンテンツを構造化して意味を与えるために使用するマークアップ言語。
CSSは、HTMLコンテンツにスタイルを適用するために使用するスタイルルールの言語です。たとえば、背景色とフォントの設定、コンテンツの複数列へのレイアウトなど。
JavaScriptは、動的に更新されるコンテンツの作成、マルチメディアの制御、画像のアニメーション化などを行うスクリプト言語。

- [ ] bodyタグ、headタグの違いが説明できる
headタグ
検索エンジンやWebブラウザに向けた情報を定義するコードを記述し、画面上に表示されない部分全体を囲うタグ
bodyタグ
コンテンツ自身を構成するコードを記述し、画面上に表示される部分全体を囲うタグ

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

- [ ] テキスト入力フォームを作成できる
<form></form>
<form name="" action="" url="" method=""></form>

- [ ] 入力文字を伏せ字にしたパスワード入力フォームを作成できる
<input type = "password" name = "pw-box">

- [ ] チェックボックスを使った入力フォームを作成できる
<input type="checkbox" name="名前" value="値"/>表示</input>

- [ ] ラジオボタンを使った入力フォームを作成できる
<input type="radio" name="名前" value="値"/>表示</input>

- [ ] セレクトボックスを使った入力フォームを作成できる
<select><option></option>..</select>
<select name = "abc">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
- [ ] 日付入力フォームを作成できる
<script type="text/javascript">
//今日の日時を表示
window.onload = function () {
//今日の日時を表示
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()

var toTwoDigits = function (num, digit) {
num += ''
if (num.length < digit) {
num = '0' + num
}
return num
}

var yyyy = toTwoDigits(year, 4)
var mm = toTwoDigits(month, 2)
var dd = toTwoDigits(day, 2)
var ymd = yyyy + "-" + mm + "-" + dd;

document.getElementById("today").value = ymd;
}
</script>

<input type="date" id="today">
- [ ] labelタグと入力フォームを関連づけることができる

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

- [ ] ブラウザのキャッシュとは何かを説明できる
一度アクセスしたサイトのデータ（画像やHTMLなど）をブラウザで一時的に保管しておく仕組み。帯域幅の混雑を避けページの表示を高速化する。

- [ ] ブラウザのキャッシュを削除することができる
・Internet Explorer
ツールアイコン／インターネットオプションを選択
全般タブの「閲覧の履歴」セクションで「削除」ボタンをクリック
お気に入り Web サイトデータを保持する以外のオプションのチェックを入れ、「削除」ボタンをクリック

・Microsoft Edge
画面右上の「設定など」をクリック
「設定」をクリック
設定ウィンドウで「クリアするデータの選択」をクリック
「キャッシュされたデータとファイル」にチェック
「クリア」ボタンをクリック

・Firefox
画面右上の設定アイコンから「オプション」をクリック
「プライバシーとセキュリティ」を選択
「Cookie とサイトデータ」セクションで「データ消去」をクリック
データを消去ウィンドウで、「ウェブコンテンツのキャッシュ」にチェックを入れ「消去」ボタンをクリック

・Chrome
ウィンドウ右上のメニューから／履歴／履歴を選択
左側のメニューをクリック
「閲覧履歴データを削除する」をクリック
「期間」で「全期間」を選択
「キャッシュされた画像とファイル」にチェック
「データを消去」ボタンをクリック

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

- [ ] 文字の色を変えることができる
タグ{
color:red;
}

- [ ] 背景の色を変えることができる
.【class名】{
background-color: white8;
}

- [ ] 文字のサイズを変えることができる
【タグ名】
font-size：〇px;
fza：〇px;

- [ ] 画像のサイズを縦横比を崩さずに小さく表示することができる
.【クラス名】img {
max-width: 100%;
height: auto;
}

いいなと思ったら応援しよう！

あ