NOBODY:PLACE

Vue.jsをCDN経由で読み込みつつコンポーネントを別ファイルに分ける

簡単に実装するためにVue.jsをCDNで読み込んでいるような環境で、パーツをコンポーネントに分け、かつ、コンポーネントを別ファイルにするようなとき、どうしたら良いかについてのメモ書きです。

JavaScriptでデータからCSVファイルを生成しダウンロードさせる

管理アプリケーションから任意のレコードを選択してボタンを押すと、用途に合わせた情報が抽出されてCSVファイルとしてダウンロード出来る……という要件を満たすために、最初はPHP主体で処理することを考えていたのですが、色々調べてみるとほとんどJavaScriptで出来ることがわかりました。あとで記載する参考リンクの情報を組み合わせるとこんな感じ。

【メモ】BootstrapVueで見出しのないtableを作る

BootstrapVueを使うと簡単にテーブルを作成することができます。ドキュメントを参考に簡単に書くとこんな感じ。

【JavaScript】Audioオブジェクトを再生停止する

最近、JavaScriptのAudioオブジェクトを使って音楽再生するコードを書いてるんですが、再生と停止を繰り返す中で気付いたことがあります。なんかね、ただ止めただけでは他の曲を再生したときにオブジェクトが重複して作られちゃうことがあるんですよね。なんだろう。

【Vue.js】Vuexで他のモジュールのアクションを呼び出す【メモ】

ストアオブジェクトを複数のモジュールに分けていた場合に、1つのモジュールから他のモジュールのアクションを呼び出した方が効率的ということがあります。それぞれ名前空間が決まってるわけだし、呼び出すことは出来ないんじゃないか……と思ってたんですけど、普通に出来るみたいですね。

Vue.js+Chart.js（vue-chartjs）+Laravelでグラフを作成しました。【#np2020】

このブログではこれまでFlashを使ったグラフを採用してきたのですが、ブラウザ側のFlashへの対応が厳しくなっている今、Flashじゃないよなあということでリニューアル後はJavaScriptによるグラフを採用することにしました。

【vue-chartjs】グラフのオプションを一括設定したい【#np2020】

Vue.js と Chart.js を連携させてグラフを描画する場合、ラッパーとして「vue-chartjs」を使うと面倒なことがかなり省略できて楽です。ファイルさえ準備しておけばデータを入れて簡単にグラフが描画できるというイメージでしょうか。導入に関しては公式サイトなどを参照してください。

【メモ】npmからyarnに乗り換え【#np2020】

少しずつ開発している新サイト（プロジェクト名：np2020）では、環境の設計以来ずっとnpmを使っていたんですけど、業務でこれまた新しく設計された環境（設計したのは前任者）で開発をしていて、そこでyarnを使っていてインストールがとても速くて使いやすいので、こっちでもそれに乗り換えましょうということで乗り換え。 npmとyarnの違いについてはこの辺がわかりやすいです。 Yarnとnpmの違い：JavaScriptパッケージマネジャーを比較する – WPJ npm vs yarnどっち使うかの話 – Qiita 手順は以下の通り。

npmでyarnをインストール
yarnコマンドを実行

以上です。それだけ。

Amazonの検索を簡易に行うツールをLaravel + BootstrapVueで作ってみました【#np2020】

「npm run production」でエラー（メモリ不足）が出てコンパイル出来ない【#np2020】

今現在のフロントエンドはBootstrapVueで、Laravel Mixを使って

npm run dev

コマンドで開発用コンパイルをして動作チェック、問題なければmasterブランチにマージしてデプロイというかたちになっています。「npm run dev」コマンドは複数のファイルを1つにまとめてくれるんですが、minifyはしません。一方で本番用コンパイルである

npm run production

の方は、まとめた上でminifyしてくれます。どれくらい小さくなるかは環境によると思いますが、僕の環境ではおおむね1/4程度にはなるようです。jsファイルやcssファイルは参照される頻度も高いので、これが小さくなるのはとてもデカい。というわけで、デプロイ前にはそれをしたかったんですが……これまでエラーが出て上手く行かなかったんですね。それがようやく解決出来ましたというお話。