JavaScriptで文字数を計算するときはどうしていますか? よくあるのは文字列のlengthを取得するパターンです。 ですがそれだと半角でも全角でも1文字として計算されてしまいます。 半角は0.5文字、全角は1文字と計算する場合は少し工夫がいるので方法を紹介します。 文字列をループさせて半角全角を判定 単にlengthでは駄目なので文字列を一文字ずつ半角か全角か判定して、文...
グラデーションの文字をCSSで実装したいと思ったことはありませんか? CSS3のプロパティを使うことで文字をグラデーションにすることができるので方法を紹介します。 CSSで文字の切り抜きと透過 実装の方法は文字の背景をグラデーションにするのと合わせて、文字の形に切り抜いて文字色を透過することで実現することができます。 必要なCSSは下記です。 background-i...
Expressでレスポンスヘッダーを設定しているのに、受け取る時には値が含まれていない時にチェックすることがあります。 通常Expressでは下記のようにレスポンスヘッダーを設定します。 例えばX-Auth-Tokenを埋め込む場合。 res.set('X-Auth-Token', 'token') ``` 設定は上記コードで完了ですが、これだけではまだクライアント側で受け取...
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...