032 HTMLドキュメントマークアップ

032.1 HTMLドキュメントの仕組み (総重量: 2)

主な知識分野:

• 簡単なHTMLドキュメントを作成する。
• HTMLの役割の理解。
• HTMLスケルトンの理解。
• （タグ・属性・コメント等の）HTMLの文法の理解。
• HTMLのheadの理解。
• Metaタグの理解。
• 文字エンコーディングの理解。

利用されるファイル・用語・ユーティリティ:

• !DOCTYPE html
• html
• head
• body
• charset(uff-8), name, content属性を含むmeta

032.2 HTMLの意味とドキュメントの階層 (総重量: 2)

主な知識分野:

• HTMLドキュメントのコンテンツにマークアップを作成する。
• 階層化HTMLテキスト構造の理解。
• blockとinline HTML要素の区別
• 重要性な意味構造のHTMLエレメントの理解

利用されるファイル・用語・ユーティリティ:

• h1, h2, h3, h4, h5, h6
• p
• ul, ol, li
• dl, dt, dd
• pre
• blockquote
• strong, em, code
• b, i, u
• span
• div
• main, header, nav, section, footer

032.3 HTML参照と埋め込みリソース (総重量: 2)

主な知識分野:

• 外部リソースへのリンクとページのアンカーの作成。
• HTMLドキュメントに画像を追加する。
• PNG, JPG, SVGを含む、一般的に用いられているメディアのファイルフォーマットの、主な特性の理解。
• iframeの知識。

利用されるファイル・用語・ユーティリティ:

• id属性
• hrefと(_blank, _self, _parent, _top)のtarget属性を含んだa
• srcとalt属性含んだ img

032.4 HTMLフォーム (総重量: 2)

主な知識分野:

• 簡単なHTMLフォームの作成
• HTMLのformタグのmethod属性の理解
• HTMLのinput要素と種類の理解

利用されるファイル・用語・ユーティリティ:

• method(get, post), action enctype などの属性を含むform
• (text, email, password, number, date, file, range, radio, checkbox, hidden等の) type属性のinput
• (submit, reset, hidden, button等の) type属性のbutton
• textarea
• (name, value, id等の)form要素の共通属性
• for属性を含んだlabel

033 CSS コンテンツ スタイリング

033.1 CSS基礎 (総重量: 1)

主な知識分野:

• HTMLドキュメントないにCSSを組み込む
• CSS文法の理解
• CSSにコメントを付加する。
• アクセシビリティの特徴と要求の知識

利用されるファイル・用語・ユーティリティ:

• HTML のstyleとtype(text/css)属性
• style
• rel (stylesheet), type (text/css), src属性を含んだlink
•  ;
• /*,*/

033.2 CSSセレクタとスタイルの適用 (総重量: 3)

主な知識分野:

• CSSの規約を要素に適用するためセレクタを利用する。
• CSS pseudo-classesの理解
• CSSにおけるルールの順序と重要性の理解
• CSSにおける継承の理解

利用されるファイル・用語・ユーティリティ:

• element; .class; #id
• a, b; a.class; a b;
•  :hover, :focus
• !important

033.3 CSS スタイリング (総重量: 2)

主な知識分野:

• 基本的なCSSプロパティの理解
• CSSにおいてよく利用されるユニットの理解

利用されるファイル・用語・ユーティリティ:

• px, %, em, rem, vw, vh
• color, background, background-*, font, font-*, text-*, list-style, line-height

033.4 CSS ボックスモデルとレイアウト (総重量: 2)

主な知識分野:

• CSSレイアウトで、要素のdimension, position, alignment の定義
• 他の要素の周りのテキストをどのように記述するか。
• ドキュメントフローの理解
• CSSグリッドの知識
• レスポンシブ ウェブ デザインの知識
• CSSメディアクエリの知識

利用されるファイル・用語・ユーティリティ:

• width, height, padding, padding-*, margin, margin-*, border, border-*
• top, left, right, bottom
• display: block | inline | flex | inline-flex | none
• position: static | relative | absolute | fixed | sticky
• float: left | right | none
• clear: left | right | both | none

034 JavaScript プログラミング

034.1 JavaScriptの実行と文法(総重量: 1)

主な知識分野:

• HTMLドキュメント内のJavaScriptを実行する
• JavaScriptの文法を理解する
• JavaScriptコードにコメントを付加する
• JavaScriptコンソールへアクセスする
• JavaScriptコンソールへ書き込む

利用されるファイル・用語・ユーティリティ:

• type(text/javascript)属性とsrc属性を含むscript
•  ;
• //, /* */
• console.log

034.2 JavaScriptデータ構造 (総重量: 3)

主な知識分野:

• 変数と定数の定義と利用
• データ型の理解
• 型変換と型強制の理解
• 配列とオブジェクトの理解
• 変数スコープの知識

利用されるファイル・用語・ユーティリティ:

• =, +, -, *, /, %, –, ++, +=, -=, *=, /=
• var, let, const
• boolean, number, string, symbol
• array, object
• undefined, null, NaN

034.3 JavaScriptの制御構造と関数 (総重量: 4)

主な知識分野:

• 真偽値の理解
• 比較演算子の理解
• 緩い等価性と厳格な等価性比較の違いについての理解
• 条件節の利用
• ループ節の利用
• 独自関数の定義

利用されるファイル・用語・ユーティリティ:

• if, else if, else
• switch, case, break
• for, while, break, continue
• function, return
• ==, !=, <, <=, >, >=
• ===, !==

034.4 ウェブサイトのコンテンツとスタイリングの、JavaScriptによる操作(総重量: 2)

主な知識分野:

• DOMの概念と構造の理解
• DOMを利用してHTML要素のコンテンツとプロパティの変更
• DOMを利用してHTML要素のCSSスタイリングの変更
• HTML要素からJavaScript関数を機能させる

利用されるファイル・用語・ユーティリティ:

• document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName(),document.querySelector(), document.querySelectorAll()
• DOM要素のinnerHTMLプロパティと、setAttribute(), removeAttribute() メソッド
• DOM要素のclassListプロパティと、 classList.add(), classList.remove(), classList.toggle()メソッド
• HTML要素のonClick, onMouseOver, onMouseOut属性

035 NodeJSサーバプログラミング

035.1 NodeJSの基礎 (総重量: 1)

主な知識分野:

• Node.jsの概念の理解
• NodeJSアプリケーションの実行
• NPMパッケージのインストール

利用されるファイル・用語・ユーティリティ:

• node [file.js]
• npm init
• npm install [module_name]
• package.json
• node_modules

035.2 NodeJS Expressの基礎(総重量: 4)

主な知識分野:

• 静的ファイルとEJSテンプレートへのルートの定義
• Expressによる静的ファイルの提供
• ExpressによるEJSテンプレートの提供
• 非ネスト構造の簡単なEJSテンプレートの作成
• HTTP GETとPOSTパラメータにアクセスして、HTMLフォームにより送信されたデータを処理するために、リクエストオブジェクトを利用
• ユーザ入力値評価の知識
• クロスサイトスクリプティング(XSS)の知識
• クロスサイトリクエストフォージュリ(CSRF)の知識

利用されるファイル・用語・ユーティリティ:

• expressとbody-parserノードモジュール
• Express appオブジェクト
• app.get(), app.post()
• res.query, res.body
• ejs node module
• res.render()
• % … %, %= … %, %# … %, %- … %
• views/

035.3 SQL基礎(総重量: 3)

主な知識分野:

• NodeJSからデータベースのコネクションを確立する
• NodeJSでデータベース内のデータを検索する
• NodeJSからSQLの問い合わせを実行する
• joinを含まない、簡単なSQLクエリを作成する。
• プライマリキーの理解
• SQLクエリ内で利用される変数のエスケープ
• SQLインジェクションの知識

利用されるファイル・用語・ユーティリティ:

• sqlite3 NPM module
• Database.run(), Database.close(), Database.all(), Database.get(), Database.each()
• CREATE TABLE
• INSERT, SELECT, DELETE, UPDATE