初めてのJavaScript~ペンの色・太さが変更できるお絵かきアプリを作ったよ~

Webアプリを作りたいなと思いながらなんとなーく先延ばしにしてたところ
初心者向けのJavaScript，HTML，CSSを使ったワークショップを見つけたので参加してみました。
その時作ったお絵かきアプリに機能を追加してペンの太さ・ペンの色の変更・画面の全消しができるようにしてます．
#動作環境
あんまりよくわかってないけどCodeSandboxにsign inしてVanillaを使って作りました笑

おそらく…
・CodeSandbox
・Vanilla
・HTML
・JavaScript
・CSS
があればできるんだと思います．
違ってたらすみません．
#やること
###１．HTMLで部品を作ります
今回はお絵かきする部分とボタンを作成しました．

```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <!--お絵かきする画面を消すボタン-->
    <div>
      <button id="pen-ss">極細</button>
      <button id="pen-s">細</button>
      <button id="pen-m">中</button>
      <button id="pen-l">太</button>
      <button id="pen-ll">極太</button>
    </div>
    <!--お絵かきするところ-->
    <div>
      <canvas
        id="draw-area"
        width="400px"
        height="400px"
        style="border: 1px solid #000000"
      >
      </canvas>
    </div>
    <!--色を変えるボタン-->
    <div>
      <button id="color-red">赤</button>
      <button id="color-blue">青</button>
      <button id="color-green">緑</button>
      <button id="color-black">黒</button>
      <button id="eraser">消しゴム</button>
      <button id="clear-button">全消し</button>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

```

おそらくこんな感じになるかと…
<img width="415" alt="スクリーンショット 2019-12-14 17.25.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549846/33635843-ed7e-4fff-df67-44a7bfdf3489.png">



これでは動かないのでJavaScriptさんに動かしてもらいましょう
###２．JavaScriptの登場
特にどうってこともないのでコード載せます

```JavaScript
import "./styles.css";

const canvas = document.querySelector("#draw-area");
const context = canvas.getContext("2d");

canvas.addEventListener("mousemove", event => {
  draw(event.layerX, event.layerY);
});
canvas.addEventListener("touchmove", event => {
  draw(event.layerX, event.layerY);
});
//パソコンでクリックしてる間だけ描けるようにした機能
canvas.addEventListener("mousedown", () => {
  context.beginPath();
  isDrag = true;
});
canvas.addEventListener("mouseup", () => {
  context.closePath();
  isDrag = false;
});
//スマホで描けるようにする機能
canvas.addEventListener("touchstart", () => {
  context.beginPath();
  isDrag = true;
});
canvas.addEventListener("touchend", () => {
  context.closePath();
  isDrag = false;
});
//お絵かきするところをきれいにする機能
const clearButton = document.querySelector("#clear-button");
clearButton.addEventListener("click", () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});
//ペンの色を変える機能
const colorRed = document.querySelector("#color-red");
colorRed.addEventListener("click", () => {
  context.strokeStyle = "red";
});
const colorBlue = document.querySelector("#color-blue");
colorBlue.addEventListener("click", () => {
  context.strokeStyle = "blue";
});
const colorGreen = document.querySelector("#color-green");
colorGreen.addEventListener("click", () => {
  context.strokeStyle = "green";
});
const colorBlack = document.querySelector("#color-black");
colorBlack.addEventListener("click", () => {
  context.strokeStyle = "black";
});
//消しゴムの機能
const eraser = document.querySelector("#eraser");
eraser.addEventListener("click", () => {
  context.strokeStyle = "white";
});
//ぺんの太さを変える機能
const penSS = document.querySelector("#pen-ss");
penSS.addEventListener("click", () => {
  context.lineWidth = 1;
});
const penS = document.querySelector("#pen-s");
penS.addEventListener("click", () => {
  context.lineWidth = 5;
});
const penM = document.querySelector("#pen-m");
penM.addEventListener("click", () => {
  context.lineWidth = 10;
});
const penL = document.querySelector("#pen-l");
penL.addEventListener("click", () => {
  context.lineWidth = 15;
});
const penLL = document.querySelector("#pen-ll");
penLL.addEventListener("click", () => {
  context.lineWidth = 20;
});

let isDrag = false;
//線をかく機能
function draw(x, y) {
  if (!isDrag) {
    return;
  }
  context.lineTo(x, y);
  context.stroke();
}

```

ここまでできればとりあえず動きます
デザインにも凝りたいって方はCSSをいじってください
###３．CSSでも書きますか
今回はこだわりがなかったのでとりあえず実装しました程度です

```CSS
/*お絵かきするところからはみ出た部分を隠してみた*/
body {
  overflow: hidden;
}
```

#完成
<img width="414" alt="スクリーンショット 2019-12-14 17.34.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549846/ab3223d6-dd15-fa68-c053-ae95367e43f4.png">


できました！
一応完成したやつのURL載せときます
パソコンでもスマホでも動くようにしました．
Androidで動くかはわかんないです
[完成版](https://04wjq.csb.app/)