実践 HTML,CSS,JavaScript初級者向け解説 作りたいものから逆算して作るWebアプリ

# 0.はじめに

どうも、はじめして　いっぺい　です。
HTML,CSS,JavaScriptは使いこなせるようになってくると楽しいです。:sunny:

# 1.作りたいイメージ

突然ですが、ネットワークグラフってご存知ですか？

![スクリーンショット 2020-08-23 22.17.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542219/c7fdbcda-c36d-2960-bb31-ef877a2d4dc1.png)

ネットワークグラフって物事の可視化するのに便利ですよね。

私も考えを整理したくて様々なツールを使ってみたりはしたのですが、

（マインドマップ、マキネーションツール、フローチャート、図形ツール・・・）

どれもピンと来ていなくて

<details><summary>【詳細】それぞれのツールの感想について</summary>
・ マインドマップ → 中心から広げられるのはいいけど、枝葉を中心にして伸ばすのは狭い
・ マキネーションツール　→　流れを動かして見れるのはいいけど、もうちょっとシンプルのが欲しい
・ フローチャート → こんな感じでいいけど、情報の保存が難しい。図の保存？編集も大変？
・ 図形ツール　→　文字サイズとかの調整が大変？
</details>

:pen_ballpoint:ノートにメモするようにグラフをかいて、整理したり保存したい。（そして、見やすく編集しやすくてシンプルなのがいい）


:star:今回はネットワークグラフを完成させるところまでいきませんが、
HTMLとCSSとJavaScriptが連携して動くところを掴めると思います。

# 2.欲しい機能

・ 葉っぱを配置する
・ 葉っぱをドラッグで移動させたい
<details><summary>ほんとはもっとある</summary>
・ シンプルにテキスト保存したい
・ 保存したテキストは、人に読める形にしたい
・ ブラウザを開けばすぐ書き始められて書き出しもしたい
・ 文字サイズは見やすくしたい
・ 自由に葉っぱを動かしたい（そして枝も追従したい）
・ 葉っぱを追加したい位置に追加したい
・ 保存したデータの読み込みに対応したい
・ 無限に広がるタイプにしたい
・ 葉っぱを素早くドラッグしたら枝を伸ばしたい&つなげたい
・ もちろん葉っぱの名前の編集もしたい
</details>


# 3.それっぽくコーディングしてみる
#### 実装すること
* テキストボックス
* 追加ボタン(形だけ)
* HTML要素をドラッグしたい
* ほどほどのスタイリング
* データ構造を決める


![スクリーンショット 2020-08-23 23.08.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542219/5526a666-4b02-07de-66c5-a179a1d29f76.png)




## HTML

タグはシンプルです。

```index.html
<!-- 省略 -->
<body>
  <div id="inputBox"><!-- インプット領域 -->
    <!-- テキストボックス -->
    <input type="text" id="textContent">
    <!-- 送信ボタン -->
    <input type="button" id="addButton" value="done" onclick="done()">
  </div>
  <div id="drawArea"><!-- アウトプット領域 -->
  </div>
</body>
<!-- 省略 -->

```

## CSS

葉っぱの要素はposition: fixedにして要素を動かせるようにします。

```style.css
/* 余白を取らない設定 */
body {
  margin: 0;
  padding: 0;
}

/* インプット領域 */
#inputBox { 
  padding: 5px;
  top: 0;
  width: 100%;
}

/* テキストボックスの横幅 */
#textContent {
  width: 85%;
}

/* ボタンサイズ */
#addButton {
  width: 10%;
}

/* 葉っぱの設定 */
.nodes {
  position: fixed;
  background-color: palegreen;
}
```

## JavaScript

* 配列にオブジェクトを入れてデータの形を決める
* 配列からcreateElementで要素を作る
* その要素をいろいろ設定してdivに追加する

```script.js

//JSONの配列に葉っぱのオブジェクトを入れる
let JSON_Data = [{
  id: 0,
  PosX: 100,
  PosY: 100,
  title: "葉っぱ"
}]

//アウトプット領域の部分を選択
const drawArea = document.querySelector("#drawArea")

//葉っぱを追加する処理を書きたいけど今回はconsole.log
function done() {
　　console.log("done")
}

//上で書いたJSONオブジェクトの配列をループする
//value:配列の中身 index:現在の配列の順番 array:元の配列
//※今回使うのはvalueのみ
JSON_Data.forEach((value, index, array) => {
  //ラベルタグを作成
  const label = document.createElement('label')
  
  //タグの文字列
  label.innerHTML = value.title;

  //要素の位置　'px'をつけるのは忘れがち
  label.style.left = value.PosX + 'px'
  label.style.top = value.PosY + 'px'
　　
  //取得できるようにidを設定
  label.id = value.id

　//ドラッグ機能をつける
  label.draggable = true;

  //スタイリング用にクラスをつける
  label.classList.add("nodes")

  //ラベルにイベントリスナーをつける
  label.addEventListener("dragend", (event) => {
    //ドラッグが終わった位置にラベルを配置する
    event.target.style.left = event.clientX + 'px'
    event.target.style.top = event.clientY + 'px'
    
    //ラベルの座標の位置も更新する
    JSON_Data[event.target.id].left = event.clientX
    JSON_Data[event.target.id].top = event.clientY
  })

　//画面に追加
  drawArea.appendChild(label)
})


```

# 4.結果

Webアプリとしての出来としてはしょっぱいですかね？

[JSFiddleのサンプル](https://jsfiddle.net/feh8nwdq/)

![スクリーンショット 2020-08-23 23.26.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542219/eafe6eda-c983-3a4a-c0e7-f56409f4a902.png)

実は、このWebアプリの[欲しい機能](#2欲しい機能)を全部実装したものがあります！

もし、そんなツールが欲しかったんだよねっていう人は使ってみてください:blush:
→[OnlineMapTool](https://m-ippei.github.io/OnlineMapTool/)

ここまで記事をご覧いただきありがとうございました。:bow:

ぜひ今回のサンプルコードを見比べながら実行してみてください:computer: