JavaScriptへの苦手意識をなくし、なんとなく実装をやめる方法

[Increments × cyma (Ateam Inc.) Advent Calendar 2020](https://qiita.com/advent-calendar/2020/increments-cyma) の12日目は、
株式会社エイチーム EC事業本部の@river_grl55が担当します。

## はじめに
はじめまして。
グラフィッカースタート、現在フロントエンド担当のWebデザイナーです。

本格的にフロントエンドの道に進むため、
ここ数か月、JavaScriptの基礎を学び直していました。

学び直していく中で、
**JavaScriptの基礎を知らないと「なんとなく」の実装になってしまうこと**
を痛感しました。
また、JavaScriptはそこまで難しくないということにも
気付くことができました。

そこで、
基礎を知ったことにより、私がJavaScriptと向き合えるようになった
考え方と、方法を紹介したいと思います。

JavaScriptに苦手意識があって、なかなか向き合うことができない...
という方の、デビュー第一歩となれば幸いです。



## こんな方に向けて
- JavaScriptを理解したいが、苦手意識がある方
- JavaScriptってどう書き始めればいいの?という方

## この記事でわかること
- 「なんとなく実装」をなくす考え方
- 理解しながら実装する順序

基礎と読み方のコツを理解して、「脱・なんとなく実装」しましょう！

## 「なんとなく実装」をなくす考え方

### 【読むとき】JavaScriptは難しいものではない
JavaScriptが苦手な方は「JavaScript＝難しい」という
先入観を持っているように感じられます。
（実は私にもこの先入観がありました）

JavaScriptの技術記事に書いてあるコードを読むと想定します。
漠然とJavaScriptのコードを見ると、目からの情報のみで
「とにかくコードの量が多い」
「見慣れない単語や記号が並んでいてよくわからない」
という印象を受けてしまうかと思います。

難しそうにみえるのですが、**単純な処理をいくつも書いているだけ**です。

書かれているコードを
**上から順に、ひとつひとつの処理を読み進めると、
自然と全体の処理が理解できます。**

### 【書くとき】処理はこちらで全部書いて指定する

自分でJavaScriptを書く場合、
プログラムの開始位置、要素の数の取得、指示を出したい要素のID等...
**一から指定してあげる必要があります。**

例えば、横にスクロールするスライダーの実装をするうえでは、

- スライダーが存在するかどうか見る
- スライダーの開始位置を指定する
- 開始のスライダーは複数要素があるうちの何番目か見る
- スライダーひとつ分の幅を取得する　等

上記以外にも指定してあげないと動かない部分が多くあります。

**たった一か所の指定処理漏れで、プログラムすべてが動かなくなってしまう**
ことがあることを、覚えていてください。




## 理解しながら実装する順序

簡単なJavaScriptとHTML（例A）を使用し、説明します。

### 【例A】divタグの中にpタグを追加する

```sample.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="box">
    </div>
    <script type="text/javascript" src="js/sample.js"></script>
  </body>
</html>
```

```sample.js
const getBox = document.getElementById("box");
const addContents = document.createElement("p");
getBox.appendChild(addContents);
```


### 【手順1】 HTML側：一度完成させる
書き出されると想定されるHTML（css）を、
あらかじめコーディングしてしまいます。
**JavaScriptによってどう動いてほしいかを「見える化」しておく**と、
ゴールが明確になり、非常に書き進めやすいです。

```sample.html
<!-- 書き出されてほしいものを見える化 -->
<div id="box">
  <p></p>
</div>
<!--  -->
```


### 【手順2】JavaScript側：HTML側のデータを参照させる
書き出されると想定されるHTMLと参照し、「ここにJavaScriptの動作をあてる」と
先に指定していきます。

```sample.js
const getBox = document.getElementById("box");

```

**┗ HTML側のdivタグにあるidを見に行き、それを”getBox”という名前で定義しています**

- `const 変数名 = 処理` : 変数の宣言（簡単に言うと、処理に名前をつけている感じ）
- `document.getElementById(id)` : HTML側のidを取得する

参考：[リファレンス：const](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const)
※ぜひ、[変数宣言の種類](https://techacademy.jp/magazine/14872) も併せてご覧ください。

参考：[リファレンス：document.getElementById()メソッド](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)


### 【手順3】JavaScript側：何をするかを書く

```sample.js
const addContents = document.createElement("p");
```
**┗ pタグを生成し、それを”addContents”という名前で定義しています**

- `document.createElement("タグ要素")` : HTML側にタグ要素を生成する

参考：[リファレンス：document.createElement()メソッド](https://developer.mozilla.org/ja/docs/Web/API/Document/createElement)


### 【手順4】JavaScript側：実行する

```sample.js
getBox.appendChild(addContents);
```
**┗ 定義した”getBox”に対し、”addContents”で生成した要素を、子要素として追加しています**

- `親要素.appendChild(子要素)` : 親要素に子要素を追加する

参考：[リファレンス：Node.appendChild()メソッド](https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild)

### 【手順5】ブラウザ側：挙動を確認
ブラウザの検証画面などで、書き出されたHTML要素を確認してみてください。
[手順1](#手順1-html側一度完成させる)で記述した、書き出されると想定されるHTMLになっていれば成功です。
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/896118/33760948-1251-39b5-cd63-780bf53b766a.png)



## さいごに
この記事では、JavaScriptに対する考え方、
実装して理解する順序をご紹介しました。

より早く理解度を深めたい方におすすめの方法として、
**簡単なJavaScriptを作って、手元で動かしてみる**
という方法もあります。


専門の本や、技術系の記事を読むことに加え、自分で手を動かして
プログラムをつくってみることも効果的です。

書くことによって、言語への理解度が深まるだけではなく、
「自分で書いたものが動いた」という感動を味わうことができます。
この経験は、きっと苦手意識をなくすきっかけになるはずです。

この記事を機に、JavaScriptにチャレンジする方が増えれば
とてもうれしく思います。

最後までご覧いただき、ありがとうございました！

＊＊＊

[Increments × cyma (Ateam Inc.) Advent Calendar 2020](https://qiita.com/advent-calendar/2020/increments-cyma) の13日目は、
Increments株式会社の @fussy113 がお送りします。お楽しみに！