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