ThunderMiracle's Blog - Page 4

Anthony Fuさんの記事「[Reimagine Atomic CSS](https://antfu.me/posts/reimagine-atomic-css)」に感動され、UnoCSSを使いたくなってきました。ちょうど自分のHPをGatsbyJSからNext.jsへ移行する予定なので、Next.jsにUnoCSSを導入してみました。

関数型プログラミングと言えば、再帰処理を思い出すでしょう。再帰処理には末尾再帰の有無がスタックオーバーフロー、いわゆるメモリの過消費を防ぐために必要です。末尾再帰について、[こちらのwiki](https://ja.wikipedia.org/wiki/%E6%9C%AB%E5%B0%BE%E5%86%8D%E5%B8%B0)をご覧ください。JavaScriptのes6から、末尾再帰を実装できるようになりました。ただし、JavaScriptの世界にわずかのところにしかサポートされていません。V8エンジンがサポートしていないため、nodejsはまずアウト

Github Actionsを作る時には、Rest APIを使うのが一般的です。「GithubのGraphQL APIをも快適に使えるか」という質問がありました。いろいろ調べてみて、答えは「Yes」でした。今日は設定方法を紹介したいと思います。

先日チームメンバーと「TypeScriptのinterfaceとtypeのどっちが好み」を話しました。振り返ると、個人的にinterfaceを多く採用しているが、特に理由がありません。今日interfaceとtypeを比較してみようと思います。

もっとカッコよくVSCodeを使うように、便利なショートカットをご紹介します。

gatsby-plugin-mdxと違い、コンポーネントの入れ替えはできないため、コードブロックにコピーボタンの追加は簡単にできません。ただ、gatsby-transformers-remarkで生成されるMarkdownASTを解析すれば、難しくなくコピーボタンを作れます。今日この方法を紹介します。

Netlifyのビルドに現れたビルドエラーを避けるために、Github Actionsへ移行しました。Github ActionsにてGatsbyJSのWebサイトをNetlifyへデプロイする方法をご紹介します。

dotnet coreプログラムでIPアドレスを取得するのに難しくないです。しかし、Dockerの中に起動したら、上記の方法はサーバのローカルIPアドレスしか取得できません。本来のIPアドレスを取得するために、NGINXの設定が必要です。Pleskを例として設定してみましょう。

packageのバージョンアップに伴い、Next.jsを12.0.8にアップデートしました。しかし、今まで動いたソースコードがruntimeエラーになり、動かなくなりました。軽く調べてみると気づいたが、class中のfunctionにthisがundefinedになっているので、this.xxxにアクセスすることができなくなりました。そして、create-next-appで新しいプロジェクトを作って試してみても同じエラーが出ているので、これはNext.jsのバグだとわかりました。しかし、一体どこに問題があり、どう解決すればいいですか？自分のアプローチを紹介します。

material-ui + styled-components + TypeScriptの組み合わせは簡単に設定できるわけではありません。material-uiのthemeに自分が定義したスタイルを入れたい時にはさらに困難になります。今日はこの設定方法を共有したいと思います。