Vueを使っているアプリケーションでappendChildを使って動的にコンポーネントを入れたくなったことありませんか？ mountedのタイミングで外部のスクリプトを使用してUIを構築する機会がありました。 そこでVueのコンポーネントを使うという要件があったのですが、後から自分でDOMを作ってどうやってVueのアプリケーション内にいれるんだろう？と思い調べてみました。 最初に「Vu...

Gatsby.jsでlocalStorageを使っているとビルド時にエラーが出る場合があります。 開発時にはエラーにならないので気づいにくいですがgatsby buildのコマンドを実行するとエラーになります。 どうすればエラーを回避できるかコードで紹介します。 コンポーネント読み込みの時にlocalStorageを使うとエラー GatsbyのビルドでlocalStorageの...

このブログは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では駄目なので文字列を一文字ずつ半角か全角か判定して、文...