カテゴリー: JavaScript・jQuery

Nuxt.jsめちゃくちゃ便利なのですが、使うならNuxtやVueに特化して作られたもののほうが、トラブルも少なくて積極的にそっち系のライブラリを選んで利用しています。

この記事で私がよく使っているライブラリを紹介します。

UIライブラリ

buefy

buefyはbulmaをNuxt用に作られたUIフレームワークです。

WebアプリやWebサービスで使いやすいUIがたくさん揃っています。

buefy

vuetify

vuetifyはGoogleが設計しているMaterial Designベースで作られているUIフレームワークです。

使うとめちゃくちゃGoogleっぽくなります。
UIComponentの数がとても豊富にあります。

個人的には管理画面などシステマチックな案件のときによく使います。

vuetify

scroll系ライブラリ

vue-scrollto

nuxt-linkなどをクリックしてページ内scrollをいい感じにアニメーションで動作させてくれるライブラリ。

特徴としては、下記になります。

• 設定が簡単
• オプションが便利
• SSR対応済み

nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。

デモ

vue-scrollto

vue2-scrollspy

vue2-scrollspyはh1h2などのHeddingに合わせてナビゲーションにclassをつけるものです。

LPなど縦長のページやブログサイトで利用します。

デモ

vue2-scrollspy

画面固定系ライブラリ

vue-sticky-directive

vue-sticky-directiveはスクロールして特定のどこかで指定したブロックを画面固定するやつです。

固定時の判定がされたときに専用のclassが着いたりするのでCSSでもいい感じにしやすいです。

選定のときにvue-stickyも合ったのですが、なぜか私が使ったときは動かなかったので、vue-sticky-directiveを使うようにしています。

デモ

vue-sticky-directive

package.jsonを作る

この書き方だと何も聞かれずにいい感じのpackage.jsonが作られる。

npm init -y

packageのインストール方法

npm install ––save-devの省略系です。
書き方が短くなって便利。

npm i -D （package名）

これの実行後package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されているのを見ることができます。

カウントダウン系のライブラリは結構ありますが、Vue.jsとmoment.jsを使うだけで簡単にカウントダウンの数字を生成できるのでご紹介します。

vue.jsとmoment.jsを使う理由

vue.jsは簡単にデータの受け渡しができるので、リアルタイムにデータの反映ができるようになります。
また、moment.jsはDate()を直感的にというか便利に加工できるので使います。

“Vue.jsとmoment.jsでカウントダウンタイマーを作る（サンプルコード有り）” の続きを読む

最近Vue.jsを使う機会が増えたのもあってjQuery依存しないライブラリを探していました。

“jQuery不要のスクロール時の起動で使えそうなJSライブラリ” の続きを読む

Nuxt.jsを使ってみるとSCSSで設定した変数やMixinがVueファイルで使えなかったのでVueファイルでも使える用に設定する方法を紹介します。

インストール

まずはnpmで下記をインストールします。

npm add --dev node-sass sass-loader

npm add --dev nuxt-sass-resources-loader

nuxt.config.jsを編集する

nuxt.config.jsに全体で読み込ませたいファイルを設定します。

module.exports = {
  modules: [
    ['nuxt-sass-resources-loader', [
      '@/assets/sass/config/variable.scss',
      '@/assets/sass/config/mixin.scss',
    ]],
  ],
}

私はNuxt.jsは下記のディレクトリ構成にしていますので、必要に合わせてパスは変更してください。


これで設定完了です。
簡単でしょ(*ゝω・*)

ここ3ヶ月くらい気になっていたVue.jsを使うようになりました。
私はJSがそれほど得意ではないのですが、Veu.jsは日本語の情報も多くて、調べると結構情報が出てきます。

とはいえ、初めて使うあるあるだと思うのですが、何から手を付けていいかわからない問題に出くわすと思います。

手探りですが、どうやって私がVue.jsを覚えたかをご紹介します。

やった事

顔合わせするレベルで身近にVue.jsを触ってる人がいなかったもので、人に聞くことは基本的にしていません。

ネットで調べたことばかりです。
学んだサイトは書籍やサイトは以下になります。

• ドットインストール
• 速習Vue.js 速習シリーズ
• Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク

ドットインストール

一番最初にやったことはドットインストールです。
あるかなーと思って調べたらVue.jsがあったので、すぐさま受講しました。

安心のクオリティですので、Vue.jsの触りの部分はすぐに理解できました。
応用みたいなのはやっぱりやって覚えないとって感じです。

Vue.jsの講座は一部有料ですが、一ヶ月980円で学べるのでコスパは良いです。
講座自体は短いので半日くらいで終わらせれます。

速習Vue.js 速習シリーズ

Kindleですので、自分のペースで戻ったり飛ばしたりして気になるところを中心に学びました。
ドットインストールの講座に比べ、幅が広く解説してあります。

プログラミングの書き方というより、学び方や調べ方が書いてあってその当たりが非常に役立ちました。

Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク

Vue.jsといえばNuxtというくらいの評判を聞いてこっちにも手を広げました。

未だにNuxtがなんなのかよくわかっていないのですが、Vue.jsでSPAを作るためのフレームワーク群というイメージです。

触ってみるとVue.js以上にややこしくて、理解するのに時間はかかりましたがこの本とこれまで学んだことの質がちょうどマッチしていて、調べたり何度か繰り返すうちに分かるようにはなりました。

実際にネットに公開されてるHTMLテンプレートを自分だけで、nuxtに組み込んむくらいはできるようになりました。

評判の良い本

私はまだ全部は読み切っていないのですが、フロントエンジニア界隈の人がべた褒めしてる本がこちらです。（これのおかげでハンズオンがしやすくなったという評判です。）

基礎から学ぶ Vue.js

公式サイトを見て、「なるほど、わからん」ってなる人はこれを読むと中身が入ってきやすいくらいのでレベル感で書かれています。

本自体がそれなりに分厚いので、プログラムが苦手な人はちょっと最初から読むと大変かもしれませんが、機能ごとに丁寧に解説されてる（図解入り）ので、何度も読める・調べれる本でした（流し読みはしました）

書籍専用のサポートページもあります。

 

インストールしておくと良いもの

Vue.js devtoolsをインストールしておくとvue.jsのデバックがしやすくなるのでオススメです。

Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう！