"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

Nuxt(JavaScript)

画像ファイルをドラッグ&ドロップで受け取り一覧表示する/Nuxt.js+Buefy

Nuxt.jsで画像ファイルをドラッグ&ドロップで受け取り、Base64に変換してから、IMGタグで表示する・・というのをやってみます。ついでに、Fileオブジェクトの情報(名前。タイプ・サイズ)を加えて複数ファイルをうけつけた時に一覧表っぽく表示します。

Nuxtでライブラリ「Vuex」で状態を管理し、vue.jsの「v-if」で状態を参照して分岐する

今回は、 「Vue.js アプリケーションのための 状態管理パターン + ライブラリです」などと紹介されているVuexとヘルパの基本的な使い方を確認しつつ、画面遷移しても状態を表すデータを保持できていることを確認するデモを作ってみます。いちおう、自己流チ…

JavaScriptのテストフレームワーク「ava」の基本的な使い方をまとめてみる。

JavaScriptのテストフレームワークの「ava」の使い方を簡単に整理してみます。

Nxut+CSSフレームワーク「Buefy」でアイコンセット「Font Awesome」を使う方法

UIフレームワークの「Buefy」を使うと、モダンなアイコンセット「Font Awesome」を簡単に使えるようになります。

Nuxtアプリの体裁を整える「Bulma」ベースのUIフレームワーク「Buefy」をざっくり

今回は画面にUIフレームワーク「Buefy」を適用して、画面の体裁を整えます。ちょっとだけ「マシに見える」程度にはしたいなと思います。

NuxtでavaScript プラグインを定義して作る/thisで参照とコンテキストで参照の2パターン

今回は、Nuxt.jsで「プラグイン」を2種類作って、asycData()とmethodsの各ブロックの中で使ってみます。

Nuxtアプリケーションで使うVue.js/Select選択値の変数バインドと@changeイベントハンドリング

今回は、Selectの選択値の変数へのバインドです。あわせて2つのSelectを並べて、片方の選択内容にあわせて、もうひとつのSelectの内容を更新するのをやってみます。

Nuxtアプリケーションで使うVue.js機能の確認/input入力内容の変数へのバインドと@clickイベントハンドリング

今回は、テキストボックス(Input)への入力バインドと、@clickを使ったイベントハンドリングとメソッドの呼び出しと画面の部分更新などをやってみます。

Nuxtアプリ開発で使うVue.jsのディレクティブ・テンプレート構文/API-KEYが必要なWeb-Apiの利用など

今回は条件付きレンダリング(v-if)やリストレンダリング(v-for)および変数参照方法などのVue.jsベースの基本的なところを確認していきます。

Nuxtアプリケーションの基本/各フォルダの役割・画面遷移・静的アクセス・WEB-APIからデータを取得

NUXT.JSの基本的な機能や利用方法を整理したチュートリアルをまとめてみます。しばらく「NUXT自己流チュートリアル」というテーマで、続き物を書いていく予定で、今回は、その1回目です。

Windows10でNuxt.js(Vue.js)を開発・実行確認できる環境を構築/Nvm・Node.js・Nuxt.js(Vue.js)

Nuxt.js(Vue.js)を、Windows10にインストールして使える環境を作ります。実は、Nuxt.jsを理解するのに七転八倒した経験を踏まえて、こんなんがあったら助かったのにな・・を「自己流流チュートリアル」にまとめようと思ってたりします。なので、今回は、そ…