react-create-appでアプリケーションを作るとwebpackのaliasの指定できないのか？と思いつつimportのパスを書いてました。 使う頻度が増えるに連れていい加減なんとかできないかと思って調べてみるとnpmパッケージを一つインストールすれば設定することができました。 react-app-rewiredをインストール react-create-appのwebpac...

Visual Studio Code（以下VSCode）でTypeScript書くと補完もいい感じなので快適！ なのですがひとつだけ鬱陶しくて仕方ないのがconsoleの自動補完。 コード内でimportしていないメソッドやクラスを書くとVSCodeが自動的にimportを追加してくれます。 ありがたい限りなのですがconsoleの場合も勝手にimportされてしまうので解決方法を調べ...

外部リンクにアイコンがついているとどんなリンクか分かるしおしゃれ！ ということでFontawesomeを使ってWebサービスのリンクにアイコンを付ける方法を紹介します。 リンクにFontawesomeのアイコンをつける aタグにアイコンを表示するには疑似要素のbeforeかafterを使います。 Beforeならリンクの前、afterならリンクの後につけることができます。 ``...

このブログはGatsbyを使ってNetlifyで公開しています。 コードはGithubに置いてContentfulで記事を管理する今流行？のスタイルにしました。 Netlifyでコードの変更と記事の更新をトリガーに自動公開 Netlifyでは2つのポイントをきっかけにビルドして公開するようにしています。 - Githubへpush - Contentfulで記事を更新 コードを...

JavaScriptで文字数を計算するときはどうしていますか？ よくあるのは文字列のlengthを取得するパターンです。 ですがそれだと半角でも全角でも1文字として計算されてしまいます。 半角は0.5文字、全角は1文字と計算する場合は少し工夫がいるので方法を紹介します。 文字列をループさせて半角全角を判定 単にlengthでは駄目なので文字列を一文字ずつ半角か全角か判定して、文...

グラデーションの文字をCSSで実装したいと思ったことはありませんか？ CSS3のプロパティを使うことで文字をグラデーションにすることができるので方法を紹介します。 CSSで文字の切り抜きと透過 実装の方法は文字の背景をグラデーションにするのと合わせて、文字の形に切り抜いて文字色を透過することで実現することができます。 必要なCSSは下記です。 background-i...