#はじめに

夏といえばスポーツ！
スポーツといえば野球！
野球といえば100本ノック！

ということで、
どんなことでもスキルを高めるには、
とにかく量をこなすことが重要ですよね。

それもただ量をこなすだけではなく、
RPGのように自分のレベルにあった敵（課題）を倒していきながら、
レベルアップを図っていくことが大事です。

とはわかっているものの、いま学習中のプログラミングにおいては、
自分でこのレベル感の調整ができず、常に自分よりはるかに強い敵と対峙してしまい、うまくいかないことの日々を繰り返しています。

ただ、繰り返していくうちに少しずつ一歩一歩の感覚が掴めるようになってきた気がするので、自分が苦労して理解してきた軌跡の一歩一歩をトレーニングという形で記録していきます。

その名も100本ノック。
野球のように、とにかくひたすらノックを受けていたら、どんどんスキルが上がっていく。Progateとかはそういうものだと思うけど、エンジニアを目指さない人でも学んでおくと良いような内容のプログラミングのトレーニングを作っていければと思っています。

#つくっていくもの

その第一弾がこれ。
やっぱり、データを扱えるようになることはビシネスパーソンにとって必須だと思うので、データサイエンス×プログラミングの基礎をマスターできる、トレーニングツールを作ろうと思います。

具体的には、WEBAPIから取得したデータをchart.jsで表現するスキルを高める100本ノックを作っていきます。（100本になるかは不明。）

知識ゼロからでも、ステップバイステップでできるようになるためのトレーニングメニューを作り、WEBアプリとして公開していこうと考えています。

そして、使い方の解説をintro.jsでわかりやすく解説するようなものにしていこうと現状考えています。

#WEBアプリの現状

現状こんな感じ
スタートしたばっかりなので、全然形になっていません。

まだ私のレベルは、axiosで取得したデータをchart.jsのデータに挿入するところで
つまづいているので、まだまだ時間がかかりそう。

現状では、axiosで取得した約30のデータを、Vueで7つのデータだけ取得することができた。それがこちら。（htmlのbody部分だけコピペ）


<body>
    <div id="app-4">
        <ol>
            <li v-for="(todo, currency , index) in todos" v-if = "index > 24" >
                {{ currency }}：{{ todo }}
                 
            </li>
        </ol>
    </div>
    <script>
        
        var app4 = new Vue({
            el: '#app-4',
            data: {
                todos: [],
            },
            async created() {
                let response;
                try {
                    response = await axios.get('https://api.ratesapi.io/api/latest');
                    this.todos = response.data.rates;
                } catch (error) {
                    console.error(error);
                }
            },
        });

    </script>

</body>

ここで取得した７つのデータを、chart.jsでグラフ化したいので、ひとまず７つのデータを棒グラフで表せるものをつくった。
そのchart.jsのコードがこちら。


        var ctx = document.getElementById("myBarChart");
        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['TRY', 'JPY', 'RUB', 'KRW', 'USD', 'HUF', 'AUD'],
                datasets: [
                    {
                        label: '対EUR通貨レート',
                        data: [{{todos}}], //ここに取得したデータを挿入したい。
                        backgroundColor: "rgba(219,39,91,0.5)"
                    }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: 'レート'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            suggestedMax: 2000,
                            suggestedMin: 0,
                            stepSize: 400,
                            callback: function (value, index, values) {
                                return value + 'レート'
                            }
                        }
                    }]
                },
            }
        });

現状、２つの課題があるかなと思う。

１つは、axiosで取得したデータは約30個あり、それをVueで表示させるところ（つまり、scriptタグ外）で制御して、7つだけ表示させるようにはできたが、そうじゃなくて、scriptタグ内で完結させるために、axiosのデータ取得段階で、7つだけ取得する必要があるのではないか。

もう１つは、chart.js内のデータに当たる部分に取得したデータを代入する時の記述の仕方。

この２つがクリアできればいいのかなと思うので、このあたりもクリアできたら、トレーニングメニューに追加していきます。

もし、ぜひ解決方法など、教えていただけると嬉しいです。

#100本ノック基礎編のタイトルを公開

いまのところ、こんな構成で考えています。

##基礎トレ編

###ステップ１：axiosの基礎トレ

###ステップ２：chart.jsの基礎トレ

###ステップ３：Vue.jsの基礎トレ

##実践編

###ステップ４：axiosとVue.jsの連携トレーニング

###ステップ5：axiosとVue.jsとchart.jsの連携トレーニング

#基礎トレ編

##ステップ１：axiosトレーニングメニュー

ノック１：WEBAPIのデータを色々見てみよう
ノック２：axiosを使って、node.jsでデータを取得してみよう
ノック３：axiosで狙ったデータを取得してみよう　〜その１〜
ノック４：axiosで狙ったデータを取得してみよう　〜その２〜
ノック５：axiosで狙ったデータを取得してみよう　〜その３〜

##ステップ２：chart.jsのトレーニングメニュー

###chart.jsトレーニングメニュー

ノック６：まずはchart.jsを使ってみよう

順次公開・・・

#まとめ

自分がゼロからプログラミングを始めて、
つまづいたところを全てトレーニングメニューとして公開しながら、
誰もがプログラミングを使って、仕事やサービス開発ができることを目指して、
つくっていこうと思います。