概要
開発体験コンテンツの読み方、進め方について說明します。
コンテンツの前提
本コンテンツは開発や技術の習得がゴールではなく、ドキュメントを作成するに際し、「開発や技術というのはこんなものなんだな」ということを体験し、肌感覚を持ってもらうことをゴールにしてます。
そのため、以下のような特徴・注意点があります。
- 細かな技術說明はしません
- コピペで開発を体験できるようにしています
参考：技術を学習するために
開発や技術を学習したい方は、ネットの専用コンテンツ（他社）を見ていただくのが一番かと。
開発の基本的な内容であれば、
といったサービスが有名です。
本コンテンツをよりスムーズに理解するために、先に上記サービスにてHTML、CSS、JavaScript等を学習しておくのもありかと思います。
コンテンツの構成（読み方）
本コンテンツ、特にソースコード（プログラム）はコピペをしやすいよう、少し変わった構造になっています。基本サンプルは以下の通りです。
まだ、表現手法を模索中です。。。
実装内容の説明
コピペコードの前後に、何のための操作をしているのかを記述しています。
それぞれの操作がどの実装に影響を及ぼすのかが簡単に理解できるようにしています。
編集対象のファイルのコード
編集対象のファイル名が左上部に表示されているので、編集するファイルを確認します。
変更部分はハイライトされており、コード中には、左側に「＋」「−」が記載されており、以下の意味があります。
- 「＋」は編集で追加するコードを表しています
- 「−」は編集で削除するコードを表しています
+ 追加（もしくは変更）を表す
- 削除を表す
この表現はソースコード管理で一般的なGit(hub)等で採用されている一般的な表現です。
編集する箇所がどこなのか、どんなコードを追加するのかを確認したり、コピペするために使います。
コピペの仕方（コピペ部の表現）
まとまった複数行のコピペ
コピペしやすいよう、（まとまった）複数行のコードは、コードの下部に「コピペ用」コードが記載されています。上の編集対象ファイルコードの「＋」「−」見て、追加する場所を確認し、コピペ用のコードを該当部にコピーしてファイルにペーストすることを想定しています。
新規作成ファイルの場合は、コピペ用コードはありません。編集対象のファイルコードをそのまま新規作成したファイルにコピペして使ってください。
1行のみのコピペ
変更箇所が1行のコードについてはコピペ用コードは用意しておらず、変更箇所のコードをそのままコピペしてください。
複数行に渡る変更
変更が複数行かつ飛び飛びに存在する場合は、差分だけではなく全体をコピペ用として記載していますのでコードのどの部分かを確認しながら進めてください。
完成版の全てのコードが記事の最後にあります
コピペ迷子になった場合は、各コンテンツの最後に「最終的なコード」を記載していますので、最終的なコードと見比べて進めてください。
各STEPを踏まず、一気に完成品を確認したい人は全てのコードを利用ください。