styled-componentsはスタイル付きの要素を手軽に作れる一方で要素の数が多くなると行数がかさみ読みづらくなってしまいます。 そこでスタイリングした要素だけを別のファイルに切り出して、フォルダにコンポーネントのファイルとまとめるとスッキリさせることができました。 スタイリングした要素のみファイルを分割 コンポーネント名となるフォルダを作りその中に下記の2ファイルを作り...
SPAのアプリケーションを実装する時にREST APIでなくGraphqlを利用することが増えてきました。 Graphqlを利用することで各ページに必要なデータのみを取得できるのは便利ですね。 表示するデータはGraphqlのデータフォーマットだけではない たとえば下記のようなデータを返すqueryがあるとします。 { data: { user: { ...
styled-componentsでFontAwesomeを擬似要素で読み込もうとした時にうまく表示されないという現象に出会いました。 今回はnpmパッケージではなく外部CSSのFontAwesomeを擬似様相で使うときに出くわしました。 調べてみたところ指定方法に一工夫が必要なので紹介します。 通常の読み込み方法 通常無料のFont Awesomeを読み込むには下記のように指...
Vue.jsやっていますか? 仕事でもプライベートでもばかり他のライブラリを使わなくなるくらい集中的にVueを触っているうちに自分なりのプラクティスが固まってきました。 わかりやすくメンテナンスしやすいVueのコードを書くためにやったほうが良いことを紹介します。 変数とメソッド名に命名規則を設ける 変数やメソッドには種類があるため命名規則を設けるコードで読みやすくわかりやすいコ...
こんにちは、コウジです! Nuxt.jsでgenerateするとルーティング上のファイルをすべて生成されてしまうので、困ることってありませんか? たとえば開発環境だけ管理画面を使えるようにするために/adminのようなルーティングが設定されているなど。 必要ないファイルを生成しない方法を紹介します。 Nuxtのgenerateをフックして生成ファイルを制御 このブログはNux...
こんにちは、コウジです Vue.jsで開発するとページ単位のコンポーネントを作りますよね? その時に用意しておくと便利なコンポーネントがあるので紹介します! ページ上下のマージンを調整するコンポーネント Vue.jsでの開発に限ったことではありませんが、ページの上下にサイト共通のマージンをつけることありますよね? 完全に全ページ共通なら良いのですが、このページだけマージン無く...
Nuxtを使っていてグローバルなイベントをPubSubしたいという機会がありました。 Vue.jsでのPubSub Vue.jsでは下記のように$onと$emitが用意されています。 インスタンスの$onと$emitを使うことでEventEmitterのようなライブラリを使うことなく、イベントの発行と購読を行うことができます。 import Vue from 'vue'...
axiosでAPIを叩いている時にレスポンス内容が改変されるという現象に出会いました。 ブラウザやAPIを叩くツールで確認すると正常なレスポンスなのに、axiosだとレスポンス内容が違う・・。 意図しないレスポンスは桁数が多い数値でした。 回避方法 ぐぐってみるとそれらしきStackOverflowを発見しました。 Read more