エンジニアならコード追うな！データを追え！！

#はじめに
最近、React.jsを勉強して基礎が終った段階で、Todoアプリを作ったのですが、いつから記事等のチュートリアルを見なくても０から実装できるようになったのかな？？と、ふと自分の成長に浸りながら考えてみたので<strong>なぜできなかったのか？</strong>、<strong>どうやって乗り越えたのか？</strong>を<strong>データの流れを意識する</strong>重要性とTodoアプリを例にしながらそれらをみなさんと共有していきたいと思います。

##記事の対象者
チュートリアルを何周もしているが、０からコードを書く時、手が動かなくなってしまう初学者の方。


##前提知識
+ 変数や関数に対する理解。
+ TODOアプリを、記事またはチュートリアルに添って作成した事があるとイメージしやすい。

##今回のゴール
+ ``データ``を意識しながらプログラムを組めるようになる。

＊目標としては、記事等を参考にせずともTodoアプリを完成させる。

##データとは？
データとは、アプリケーション内外に存在する値で、大きく分けて<strong>3種類のデータ</strong>があり、アプリケーション内に存在する『``ローカルな値``』と『``グローバルな値``』そしてDB等のアプリケーション外にある『``永続的な値``』のことです。

今回は、『ローカルな値』と『グローバルな値』の2種類を対象にしていきます。

フロントエンドだと、そう言った値を『<strong>State</strong>』、『<strong>状態</strong>』と言った呼び方をします。

###グローバルな値
『**持っているべき値**』

その***アプリケーション内***で存在しないと、***アプリケーション自体が機能しない値***で、様々な箇所に関与される重要な値です。
###ローカルな値
『**持つと予測される値**』

***アプリケーションに直接関与はしない***がグローバルな値を追加、変更する際に必要な***一時的な値***です。

###永続的な値

『***アプリケーション外に存在する値***』

***アプリケーション外***に存在していて、ユーザーが***ブラウザを閉じてしまったとしても消えることの無い値***です。
DBに保存されている値を想像していただけると良いです。


##なぜできなかったのか？
結論から言うと<strong>データ</strong>を<strong>ベース</strong>としてコードを書けていないからです。

データをベースとする？どゆこと？

10の結果を出したい！と言う状況で***10というデータをベースにして式（コード）***を書くというように求める結果に対してコードを考えていく事です。

もっというと、『**何を**』『**何処から**』『**何処に**』『**どのような形で**』『**どうやって**』の基準でコードを積み重ねていくことで、結果にたどり着きます。
そして、結果に至るまでの過程を細分化してこれらを基準に小さなサイクルを回すことで徐々に結果に近ずけて行けるようになります。

ハンズオン形式のものは良くも悪くも最初から答えが出ています。
このコードを書けばこの結果が出る、と***コードに対して結果が出る***という認識の仕方をしてしまいがちです。
しかし、本来コードを書く際には、***結果に対してコードを書く***という組み立て方をしています。

1から何も作れなかった時はコードから結果が生まれるという真逆の学習をしていたからです。

####例えば、

***コード => 結果***が出るような学習していると

```2 * 5 = 10```
```3 * 3 = 9```
```2 * 4 = 8```

のように、この数式を出せばこの結果になるという九九に近い***覚える***学習方法になってしまいます。


***結果 => コード***の学習を意識すると

***結果：10を出したい!***

```2 * 5 = 10```
```2 + 2 + 2 + 2 + 2 = 10```
```7 + 1.5 + 1.5 = 10```

のように10を出すための方法を考えて学習するようになり***やりたいことの手段として***コードを書けるようになる。

##どう乗り越えたか？(できるようになる為に)
<strong>データ</strong>と<strong>その流れ</strong>を意識する事を何度も繰り返し考える事で改善していきました。

もちろん、これを意識すればすぐにプログラムをスラスラ組めるようになるような魔法の考え方ではありませんが、何度も意識していればイメージが鮮明になっていくでしょう。

何度も結果を出す為に式を反復するというのも無駄ではないですが、ひとつの処理を覚えて使い回すというのは非常に効率が悪く応用が利きません。

TodoアプリではCRUDが使用されていてその中の<strong>Create(追加)</strong>と<strong>Reference(参照)</strong>を例にデータの流れを見ながら理解していきましょう。

そして、なぜできなかったか？の章でもお伝えした、『**何を**』『**何処から**』『**何処に**』『**どのような形で**』『**どうやって**』を、細分化した中での各データを移動させる処理を書く時に強く意識しましょう。

###Create(追加)
inputフォームを入力したら、ローカルな値に一時的に保存して、追加のボタンを押したタイミングで、ローカルな値をグローバルな値に追加する。

***Create全体のデータの流れ***
input -> ローカルな値 -> グローバルな値

***inputのデータからローカルなデータに移動するにはどうすれば良いか？***
『***何を***』
1.ユーザーから入力された値を
『***何処から***』
2.inputのvalueから
『***何処に***』
3.変数inputに
『***どのような形で***』
4.inputに入力された状態で
『***どうやって***』
5.イベントを作成して受け取ったevent.target.valueを変数inputに代入して

ユーザーからinputを通して入力された値をchangeイベント内でeventを受け取り変数inputに代入

上記の事をコードにすると以下のように実装できる

```jsx:todo.jsx
/////////HTML/////////
<input id="input" /> 
//////////////////////

/////////JS/////////
const inputElement = document.getElementById('input')
let input = '' 

inputElement.addEventListener('change',function(e){
   input = e.target.value
})
//////////////////////
```

次に、<strong>ローカルな値をその地点からグローバルな値にデータを移動させるにはどうすれば良いか？</strong>

<strong>ローカルな値からグローバルな値に移動する</strong>
『***何を***』
1.ローカルな値を
『***何処から***』
2.変数inputから
『***何処に***』
3.グローバルな値を格納する変数に
『***どのような形で***』
4.ローカルな値をそのままで
『***どうやって***』
5.イベントを作成してローカルな値をグローバルな値にpushで代入して

変数inputからclickイベント内でpush関数を使って格納

上記の事をコードにすると以下のように実装できる

```jsx:todo.jsx
/////////HTML/////////
<input id="input" />

<button id="globalButton">送信</button> // 追加
//////////////////////

/////////JS/////////
const inputElement = document.getElementById('input')
const globalButtonElement = document.getElementById('globalButton') // 追加
/* 初期値を配列にしているのはlocalValueを受け取る度に列挙して保存する為 */
const globalInput = [] // 追加
let input = '' 


// local
inputElement.addEventListener('change',function(e){
   input = e.target.value
})

// global
globalButtonElement.addEventListener('click',function(){ // 追加
  /* globalButtonを押下でローカルな値をグローバルな値に追加 */
  globalInput.push(input)
})
//////////////////////

```

##Reference(参照)
グローバルな値をそのまま参照してDOMへと変換してHTMLとして出力

***Referenceの流れ***
グローバルな値->DOM->HTML

<strong>グローバルな値を参照してDOMに変換してHTMLに出力</strong>
『***何を***』
グローバルな値を
『***何処から***』
globalInputから
『***何処に***』
HTMLに
『***どのような形で***』
DOMとして
『***どうやって***』
createElementなどのエレメント作成関数を使用して

上記の事をコードにすると以下のように実装でユーザーから入力された値を画面に出力させるCreate,Referenceの実装が完了です。

```jsx

/////////HTML/////////
<div id="list"> // 追加
  /* グローバルな値を表示する*/
</div>

<input id="input"/>

<button id="globalButton">送信</button>
//////////////////////

/////////JS///////////
const inputElement = document.getElementById('input')
const listElement = document.getElementById('list')
const globalButtonElement = document.getElementById('globalButton')
const globalInput = []
let input = ''

// reference
window.addEventListener('load', function(){ // 追加
  globalInput.forEach(item => {
    /* データをDOMに変換する処理*/
    const list = document.createElement('li')
    list.innerText = item

    /* DOMをHTMLに出力する処理*/
    listElement.appendChild(list)
  })
})

// local1
inputElement.addEventListener('change',function(e){
   input = e.target.value
})

// global
globalButtonElement.addEventListener('click',function(){
  /* globalButtonを押下でローカルな値をグローバルな値に追加 */
  globalInput.push(input)

　/* 本来ならinputのテキストがグローバルな変数にセットされた時点で新しく画面を描画する */
})
//////////////////////
```

##まとめ
今回は,データの流れのイメージを掴んでもらう為の記事となる為、とても簡単なtodoのcreateとreferenceのみで解説していきましたが、ここからupdateとdeleteも実装できると思うので今回解説したデータの流れを考えながらチャレンジしてみましょう。

以上、データの流れについての解説でした。

最後まで読んでいただきありがとうございました。