おーじぇいの夏休み1日目（8/1）・Vue.jsをはじめる

きたぜ俺の夏休み！！！！！！

おーじぇいです。4000字のレポートを討伐して、とうとうやってきました大学二年の夏休み。

今年の夏休みは💪✨圧倒的成長✨💪するということで、色々やりたいと思います。（ざっくりしてんなぁ）

とりあえず目標としては、Web系の技術を学ぶ！！ということで、Javascriptのフレームワークを中心に学んでいきたいです。

Vue.jsをはじめる

以前Reactをやろうとしましたが挫折しました。

某IT企業のセミナーに行ったときに質問したら、「いや、Reactは初心者向けというか、大希望な開発のときに使われているものだから取っ掛かりとしてはあまり……」と言われてしまったので、より始めやすいと言われているVue.jsをやり始めました。

開発はAWS Cloud9で行ったのですが、サーバを建てるときにエラーが出てしまうので、プロジェクトフォルダ直下に以下の内容の「vue.config.js」を作成しました。

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

これで一応サーバは動くのですが、リアルタイムに変更を適応してくれる機能が作動しません。（コンソール見るとlocalhostに接続できないというエラーが出てくる）詳しい方いましたら教えて下さい。

そして、今回Vue.jsを始めるにあたって参考にした記事がこちらです。

はじめにつくったのはこんな感じ。

Vue.jsの勉強を始める
データバインディングを知る pic.twitter.com/pGo5vg54Ax
— おーじぇい (@920OJ) 2019年8月1日

データバインディングとはなんぞやってことをなんとなく理解しました。これは去年のデジコン合宿のときにnever先輩が講演してた内容だな～と思い出して、あのときもう少しちゃんと取り組んでおけば……と後悔したり。。。

それから、HTTP通信を使って取得したデータをバインディングする、というのもやってみたくなったので、郵便番号を入れると住所を（分かる範囲で）出してくれるものを作りました。

郵便番号を入力すると住所出してくれるやつ作った pic.twitter.com/kXoyrhCvUc
— おーじぇい (@920OJ) 2019年8月1日

荒削りでコンポーネント化も何もしていないのでアレですが、一応コードも載せておきます。

これまでJavascriptで外部のAPI叩くときはXMLHttpRequest使ってましたが、最近は便利なのもあるんですね……はじめてfetchなるものを使いました。

fetchでURLを読み込ませて、その次に書いてある.thenは成功したときの処理、.catchは失敗したときの処理を書くようです。いろんな場所できく、Promise――「非同期処理」というものらしいです。

一応大学1年生のときにJavascript一通りやったはずだったのに何も知らなかったゾ……技術の進歩においてかれている……

ということで、とりあえず郵便番号プログラムができたところで今日の学習は終了。色々と記事や本を読んで、さらにレベルアップしていこうと思います。

パッケージマネージャのnpmとか、webpackあたりの技術に触れていたので、今後よりじっくり理解していきたい。