vueかreactを使っている企業さんが多い

フリーランスや正社員の応募要項などを見ると、javascriptはもうjQueryではなくvueかreactの2択になってきています。
ブランク時期が丁度その切り替え時期にあたっていたので、とりあえずvueから手を出してみました。

作成したサイト

No such app

tasks-4188.herokuapp.com

超シンプルなタスク管理アプリです。
タスク管理アプリはなぜかチュートリアルなどで山ほど見るのでそこは困らなかったのですが、そのまま写経してしまうと同じになってしまうので、7つの習慣という本で４つのセクターに分けてタスクを消化するともっと幸せになれるよというのを参考に4つのカテゴリーから選ぶ様にしました。

Amazon.co.jp

amzn.to

苦労した点

今回作成したサイトがSPAに向いているかは置いておいてvueを使うとかなり簡単にSPAを作成する事が出来ました。
ただやはりvue自体に慣れていない事もあって苦労する点は多かったです。

・苦労した点１：デバック
これは単純にAPI経由のデバックのやり方が分かっていないせいもあるのかもしれませんが、APIで投げたリクエストでlaravelのコントローラーでキャッチするのですが、なぜかvar_dump+exitで止まってくれませんでした。
結局APIの中身を見てオブジェクトを書き換える事は出来たので、その関数を通っている事は間違いないのですが、なぜ止まってくれないのか謎です。
なぜかリスト一覧の時は止まってくれたので、vueのルーター機能でコンポーネント化すれば見れたかもしれません。
ここはもう少し掘り下げて学習が必要です。

ただPHP側でデバックがやりにくいのはありましたが、Vue.js Devtoolsというクロームのアドオンを入れると持っているデータが見れるのでこれを使えば何とかなりました。

Vue.js devtools - Chrome Web Store

DevTools browser extension for Vue.js

chromewebstore.google.com

・苦労した点2:値渡し
今回全部vueで書いたかというとそうではなく結局jqueryも使っています。
ボタンを押した時に自動でセクションの部分が変わるようにしたのですが、その情報をvue側のテンプレートで拾ってくれない・・・。
vueに慣れてる方ならその方法も分かると思うのですが、今回はその部分とリスポンシブ実装の部分をガッツリjqueryで書いてしまいました。

個人的にはやっぱりjqueryって便利だなと再確認したのと、SPAを作るのに関してはvueはかなりお手軽かと思いました。

ただ今回作ったのはタスクを入力してDBに登録、リストを表示する時もDBを読みに行くのでvueで完全な？SPAを作るとしたらnuxt.jsというのを使うみたいです。
検索するとvueはjavascriptのアプリケーション(jqueryとかと同じ)でnuxtはフレームワークみたいです。
nuxtはvue派生ですが、書き方などが少し違うようです。

次学習するのはnuxt、react、swiftもしたい。
この3つの自分の中のポジションは、
■弱点が潰せる
nuxt、react
■強みになるかも
swift

swiftで遊びたいところですが、弱点を潰すのが先かなぁ。

投稿 vueの勉強の為に超シンプルなサイトを作りました は ゴロ寝 に最初に表示されました。