子供の想像力を無駄にしません！想像したものは溜めておこう！

## アニメ「ONE PIACE」にハマっている息子
小学２年生の息子はワンピースにハマっています。毎日、どの悪魔の実が最強かを熱く語ってくれます:relaxed: そして、HPで悪魔の実ランキングを眺めてはニヤニヤしています。
どんな悪魔の実が欲しい？と聞くと、どんどん出てきます。おぉ、すごい想像力だ！想像した悪魔の実を記録できるWebアプリを作ることにしました:thumbsup:

## 実装結果
https://twitter.com/yuko6891/status/1660789964488192000

旧：twitterで実装しているものです！

https://646b831e7c72d8049703aa2d--hilarious-souffle-36e20c.netlify.app/

新：Local　Storageを追加しました！

https://64751397cc503555716b253d--bejewelled-marigold-88ab22.netlify.app/

## 実装環境
Code Pen
<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="ZEqmVQz" data-user="YukoOnuma" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/YukoOnuma/pen/ZEqmVQz">
  オリジナルの悪魔の実図鑑</a> by yuko6891 (<a href="https://codepen.io/YukoOnuma">@YukoOnuma</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ソースコード
<details><summary>HTMLコード</summary>

```HTML: index.html
<h1>ワンピースのあくまの実　オリジナル版</h1>
 
<!-- Vueで指定された"app"要素、この中でのみVueが有効 -->
<div id="app">
  <input type="text" size="100" v-model:value="task" placeholder="あたらしいあくまの実を作る…"><br>
  あくまの実の内容：{{ task }}
  <p></p>
  <button v-on:click="addTask">あくまの実を作る</button><br>
  <button v-on:click="clear1record">あくまの実が１コ消える</button><br>  
  <button v-on:click="clearAll">全てのあくまの実が消える</button><br>
  <p v-for="todo in todoList">{{ todo }}</p>
  
</div>
```
</details>


<details><summary>JavaScriptコード</summary>

```JavaScript: script.js

const app = new Vue({
  el: '#app', // Vueが管理する一番外側のDOM要素
  data: {
    // Vue内部で使いたい変数は全てこの中に定義する
    task: '',
    todoList: [], // これは配列
  },
  methods: {
    // 関数はここ
           addTask: function() {
      console.log('次のあくまの実が発見されました：', this.task);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
        this.todoList.unshift(this.task);
      console.log('現在のあくまの実一覧：', this.todoList);
    },
    //
    clear1record: function() {
      console.log('次のあくまの実は幻だったようだ…：', this.task);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
        this.todoList.shift(this.task);
      console.log('現在のあくまの実一覧：', this.todoList);
    },
    // 以下を追加、関数名はなんでもよい
    clearAll: function() {
      this.todoList = [];
      console.log('全てのToDoが消去されました');
    },
  },
});
```
</details>

## コードの説明
HTML、JSが初心者なので、困った部分を説明します。
JSの赤線部分がHTMLで指定したボタンの名称です。先にJSで指定します。
![スクリーンショット 2023-05-23 6.18.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310538/fdd1738d-2746-5455-5de2-1b8a66b5bd45.png)
その後にHTMLでボタンの指定をします。
先にHTMLを指定したところ、JSに指定されていないとなり画面からボタンが全て消えました。コーディングする順番に注意してください。
![スクリーンショット 2023-05-23 6.16.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310538/aaeb32b2-c495-3ed7-532a-867ef967aac6.png)


## これから改良したい部分
ランキングを楽しんでいる息子、子供ってどれが最強なのか戦わせるの好きですよね。どうして強いのかまで説明してくれます。:joy:
そのため、以下の機能が増えると面白いと思っています！

・想像した悪魔の実の中でどれが最強だと思うか投票する機能をつけたい
・投票ボタンを押すと、票数が加算できるようにしたい
![スクリーンショット 2023-05-23 7.55.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310538/8a2c5987-837c-f04c-c231-577837e66bda.png)


## 参考にした記事
- [html･CSSでinput(テキストボックス)のサイズ(幅)の変更方法](https://csshtml.work/input-size/)