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...