2019.05.15styled-componentsでのファイル管理方法を改善するstyled-componentsはスタイル付きの要素を手軽に作れる一方で要素の数が多くなると行数がかさみ読みづらくなってしまいます。 そこでスタイリングした要素だけを別のファイルに切り出して、フォルダにコンポーネントのファイルとまとめるとスッキリさせることができました。 スタイリングした要素のみファイルを分割 コンポーネント名となるフォルダを作りその中に下記の2ファイルを作り...styled componentsReact
2019.05.14Graphqlのデータを表示するためのDecoratorSPAのアプリケーションを実装する時にREST APIでなくGraphqlを利用することが増えてきました。 Graphqlを利用することで各ページに必要なデータのみを取得できるのは便利ですね。 表示するデータはGraphqlのデータフォーマットだけではない たとえば下記のようなデータを返すqueryがあるとします。 { data: { user: { ...GraphqlReactVue
2019.05.06styled-componentsでFontAwesome Freeを表示する方法styled-componentsでFontAwesomeを擬似要素で読み込もうとした時にうまく表示されないという現象に出会いました。 今回はnpmパッケージではなく外部CSSのFontAwesomeを擬似様相で使うときに出くわしました。 調べてみたところ指定方法に一工夫が必要なので紹介します。 通常の読み込み方法 通常無料のFont Awesomeを読み込むには下記のように指...React
2019.01.01Vueで開発するときのプラクティス!メンテナンス性の高いコードを書こうVue.jsやっていますか？ 仕事でもプライベートでもばかり他のライブラリを使わなくなるくらい集中的にVueを触っているうちに自分なりのプラクティスが固まってきました。 わかりやすくメンテナンスしやすいVueのコードを書くためにやったほうが良いことを紹介します。 変数とメソッド名に命名規則を設ける 変数やメソッドには種類があるため命名規則を設けるコードで読みやすくわかりやすいコ...VuePractice
2018.12.25マークダウンをJSON化してNuxt.jsで表示するためのライブラリこんにちは、コウジ（@koojy3）です。 このブログはマークダウンファイルをjson化して記事をデータ化したものを、Nuxt.jsで表示しています。 今回は記事をマークダウンで書いてブログを自作するときに便利なライブラリを3つ紹介します。 マークダウンをHTMLに変...JSONMarkdownNuxt
2018.12.14Nuxt.jsで特定ファイルを生成リストから取り除く方法こんにちは、コウジです！ Nuxt.jsでgenerateするとルーティング上のファイルをすべて生成されてしまうので、困ることってありませんか？ たとえば開発環境だけ管理画面を使えるようにするために/adminのようなルーティングが設定されているなど。 必要ないファイルを生成しない方法を紹介します。 Nuxtのgenerateをフックして生成ファイルを制御 このブログはNux...Nuxt