MacBook Proで外部ディスプレイやキーボードを使いたいということありますよね？
だけどUSB TypeCしかついていないからそのままだと少し不便です。
ディスプレイやキーボードがTypeCに対応していればそのまま使うことができますが、世の中に広く普及しているTypeAのUSBでは使うことができません。
そんな時のためにMacBook Proを使うなら1つは持っておきたいのがMa...
Gatsby.jsでlocalStorageを使っているとビルド時にエラーが出る場合があります。
開発時にはエラーにならないので気づいにくいですがgatsby buildのコマンドを実行するとエラーになります。
どうすればエラーを回避できるかコードで紹介します。
コンポーネント読み込みの時にlocalStorageを使うとエラー
GatsbyのビルドでlocalStorageの...
エンジニアとしてコードを書くのに欠かせないのはキーボードを始めとした設備です。
長時間触るものだから自分にとって心地のよいものを使いたいですよね。
フリーのエンジニアとして毎日自宅でコードを書いているので使っているものを紹介します。
一目惚れしたおすすめキーボード
コードを書くのに一番大事なものがキーボード。
PCはMacですが自宅にいる時はキーボード、マウス、ディスプレイはす...
このブログは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...
運営者のプロフィール
フリーランスのフロントエンドエンジニアです。
2016年から独立してこのサイト「MK Dev」の運営をしながら企業のプロダクト開発のお手伝いをさせてもらっています。
詳しいプロフィールはこちらをどうぞ
Twitter
フロントエンドのことをつぶやいています
お気軽にフォローしてください
お気軽にフォローしてください