このブログはReact製のジェネレーターツールGatsbyで作っています。 Webpackによってコンパイルされていますが、aliasの設定がデフォルトではされていないためimportのパスを書くのがつらい状態でした。 ずっと放置したくもなかったのでgatsbyでwebpackのaliasを設定する方法を調べてみました。 gatsby-node.jsにwebpackの設定を追加す...
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...
Expressでレスポンスヘッダーを設定しているのに、受け取る時には値が含まれていない時にチェックすることがあります。 通常Expressでは下記のようにレスポンスヘッダーを設定します。 例えばX-Auth-Tokenを埋め込む場合。 res.set('X-Auth-Token', 'token') ``` 設定は上記コードで完了ですが、これだけではまだクライアント側で受け取...
styled-componentsはスタイル付きの要素を手軽に作れる一方で要素の数が多くなると行数がかさみ読みづらくなってしまいます。 そこでスタイリングした要素だけを別のファイルに切り出して、フォルダにコンポーネントのファイルとまとめるとスッキリさせることができました。 スタイリングした要素のみファイルを分割 コンポーネント名となるフォルダを作りその中に下記の2ファイルを作り...

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。