概要

開発体験コンテンツの読み方、進め方について說明します。

コンテンツの前提

本コンテンツは開発や技術の習得がゴールではなく、ドキュメントを作成するに際し、「開発や技術というのはこんなものなんだな」ということを体験し、肌感覚を持ってもらうことをゴールにしてます。
そのため、以下のような特徴・注意点があります。

開発や技術を学習したい方は、ネットの専用コンテンツ（他社）を見ていただくのが一番かと。
開発の基本的な内容であれば、

といったサービスが有名です。

本コンテンツをよりスムーズに理解するために、先に上記サービスにてHTML、CSS、JavaScript等を学習しておくのもありかと思います。

本コンテンツ、特にソースコード（プログラム）はコピペをしやすいよう、少し変わった構造になっています。基本サンプルは以下の通りです。

まだ、表現手法を模索中です。。。

コピペコードの前後に、何のための操作をしているのかを記述しています。
それぞれの操作がどの実装に影響を及ぼすのかが簡単に理解できるようにしています。

編集対象のファイル名が左上部に表示されているので、編集するファイルを確認します。
変更部分はハイライトされており、コード中には、左側に「＋」「−」が記載されており、以下の意味があります。

+ 追加（もしくは変更）を表す
- 削除を表す

この表現はソースコード管理で一般的なGit(hub)等で採用されている一般的な表現です。

編集する箇所がどこなのか、どんなコードを追加するのかを確認したり、コピペするために使います。

コピペしやすいよう、（まとまった）複数行のコードは、コードの下部に「コピペ用」コードが記載されています。上の編集対象ファイルコードの「＋」「−」見て、追加する場所を確認し、コピペ用のコードを該当部にコピーしてファイルにペーストすることを想定しています。

新規作成ファイルの場合は、コピペ用コードはありません。編集対象のファイルコードをそのまま新規作成したファイルにコピペして使ってください。

変更箇所が1行のコードについてはコピペ用コードは用意しておらず、変更箇所のコードをそのままコピペしてください。

変更が複数行かつ飛び飛びに存在する場合は、差分だけではなく全体をコピペ用として記載していますのでコードのどの部分かを確認しながら進めてください。

コピペ迷子になった場合は、各コンテンツの最後に「最終的なコード」を記載していますので、最終的なコードと見比べて進めてください。

各STEPを踏まず、一気に完成品を確認したい人は全てのコードを利用ください。