Vue.js学習備忘録#1 「学習環境について」
記事説明
自分用の備忘録です。そこまで詳しく調べたりしていないのでお気を付けください。
目次
概要
Vue.js勉強用の開発環境について迷ったので、解決策をメモ。
参考
- とあるVue研修資料
- Vue公式チュートリアル https://jp.vuejs.org/v2/guide/index.html
- BootstrapVue公式リファレンス https://bootstrap-vue.org/docs
- Bootstrap公式リファレンス https://getbootstrap.jp/docs/4.3/getting-started/introduction/
背景
目的
個人的にVue.jsに興味があり、これから仕事で使うことになったので、本格的に勉強することにした。
結構開発期間がシビアなので、Vue単体を効率的に勉強していきたい。
そもそも何でVue.js？
一度Reactを勉強したことがあり、印象として慣れるまでかなり時間がかかりそうだと思ったため。
さらに仕事ではチーム内でフロントエンドエンジニアが自分のみで、バックエンドは別の開発会社に任せるような現場なので、少しでも学習コストを抑えたい。
自分が持つ前提知識
開発するにあたって、今持っている自分の知識をまとめる。
- HTML5、CSS、JavaScript基礎（ES2015含む）
- Bootstrap（jQuery）
- Vue.js
- 「基礎から学ぶ Vue.js 2.x対応版」のChapter6まで（Vueの基本的なコーディングがわかっているが、ファイル分けやVuexはわからない程度） www.amazon.co.jp
- node.js（npmがわかり、webpackを何とか使える程度）
学習環境の調査
前提
2段階（cdn → node.js）で学習していくことになる。
また仕事ではMDBootstrapのVueバージョンを使っていくことになると思うので、最終的にそこに結び付くように学習したい。
自分にとって効率的な学習環境とは
まず今までBootstrapを使って開発して来たので、以下のような構成にしようと思った。
| 技術領域 | ライブラリ |
|---|---|
| CSS | Bootstrap |
| JS | Vue.js |
しかしBootstrapはjQueryありきのものなので、Vue.jsとの競合が気持ち悪い。
（一応便利に使う方法はある。 Vue.jsでjQueryと共存させる方法 - Qiita）
なので他のCSSフレームワークで「自分の前提知識が使える」「Vueとセット or CSS単体で使える」という条件で、良いものがないか調べてみた。
Vue.jsのUIフレームワーク選定 - Qiita
目を付けたのは、以下の３つ（すべて英語リファレンスしかない...）
- BootstrapVue
- Tailwind
- Bulma
1. BootstrapVue
はじめの使い方だけみると、どうやらnode.jsでコンパイルして使うのを推奨していそう。 一応htmlから読み込めるようにもできるが、インポート用の記述が多いしその他ライブラリで機能が重いので、学習環境には向かない。
だが、単一ファイルコンポーネントやVuexを学ぶ際には一緒に導入してみても良いと思った。
2. Tailwind
「高速で柔軟性があり、信頼性が高い」とのこと。
リファレンスや参考記事の実装例を見ると、CSSを書くのと同じようにクラスをつけられて、JSフレームワーク（特にReact）との相性はかなりよさそう。
CSSに詳しいデザイナーは使いやすいかなというイメージ。
ただ、自分はBootstrap上がりなので、機能が細かすぎてなれるのが大変そう。
3. Bulma
「簡単な組み合わせですぐに使用できるCSSコンポーネント」とのこと。
qiita.com ※Tailwindの参考記事と同じ。
まずリファレンスがすごく見やすく、英語読めなくてもなんとなくわかる。
次にBootstrapと記述方法が似ていて、書きやすい。
Tailwind と Bulma の違い
Bulmaと記述方法が違いすぎて、そもそもCSSの設計思想でどんなのがあるのか気になった。
印象としては、
Tailwind ... CSSに書いていたスタイルをHTMLに直接書いてしまおう、というような思想を感じた。かなり自由度が高いが記述量が多い。
Bulma ... 有名なOOCSS、SMACSSとかを取り入れている、一般的によく使われるUIありきのCSSという感じ。記述量は少ないが自由度はそこそこでBulmaっぽさが出やすそう。
最終的な学習環境
| 技術領域 | ライブラリ |
|---|---|
| CSS | Bulma |
| JS | Vue.js |
極力Vue.jsの学習に専念したいので、Bulmaのドキュメントのわかりやすさと記述量の少なさが魅力的だった。
個人的な備忘録なので、これで終わりです。
