jQueryの作者による「毎日コードを書く」習慣の効果と自分で半年やってみた感想

公開日: カテゴリ: Essay

jQueryの作者John Resig氏による「Write Code Every Day」というブログを読んだ。初めはサイドプロジェクトで休日が消費され、しかもいいコードが書けなかった時の喪失感やプレッシャーを抱えていたそうだ。ある日、Je... 記事を読む

NetlifyでGatsbyJSのキャッシュを設定してレスポンス速度を爆速にしよう

公開日: カテゴリ: GatsbyJS

この記事では、GatsbyJSのファイルごとのキャッシュの違いを記載した後、GatsbyJS製のサイトの表示速度をさらに爆速にするためにNetlifyでの最適なキャッシュ設定を紹介します。Netlifyとは、静的サイトのためのホスティングサ... 記事を読む

Vercel + GatsbyJSの最適なキャッシュ設定を紹介します

公開日: カテゴリ: Vercel

VercelとはVercel社(旧ZEIT)が開発しているサーバレスなホスティングサービスです。VercelはCDNであるためJAMStackなアプリケーションをデプロイするために最適で、Vue、Nuxt.js、React、Next.js、... 記事を読む

GatsbyJS公式推奨のキャッシュ設定を理解する

公開日: カテゴリ: GatsbyJS

GatsbyJSとは、React.js製の静的サイトジェネレータです。SSRをすることでビルド時に最適化された静的ファイルを生成するため、サイトの表示速度が爆速になります。ブログで使われているケースが多いです。この記事ではGatsbyJSで... 記事を読む

Next.jsからSlackに通知を送る

公開日: カテゴリ: Next.js

この記事ではNext.jsからSlackに通知を送る方法を紹介します。Slackに通知を送るにはWebhook URLを取得します。始めはWebhook URLをブラウザからPOSTすれば簡単に実現できると考えていました。しかし、ブラウザで... 記事を読む

Next.jsにTailwind CSSを導入する

公開日: カテゴリ: Next.js

この記事は、Next.jsにTailwind CSSを導入する方法を紹介するものです。Next.jsはVercelが作成しているReactのフレームワークです。また、Tailwind CSSはユーティリティファーストのCSSフレームワークで... 記事を読む

Next.jsでGoogle Analyticsを使えるようにする

公開日: カテゴリ: Next.js

Next.jsはVercelが作成しているReactのフレームワークです。面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です... 記事を読む

【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい

公開日: カテゴリ: React

SWRは、Next.jsを作成しているVercel製のライブラリです。SWRはuseSWRというReact Hooksを提供し、APIを通じたデータの取得をラクに記述する手助けをしてくれます。このライブラリはGitHubスター数を10,70... 記事を読む

Netlifyでリダイレクトの設定をする

公開日: カテゴリ: Netlify

ブログのURLを正規化するためにNetlifyでリダイレクトを設定する方法を調べました。ブログの正規化は検索エンジンのために行います。検索エンジンは以下のURLを全て異なるものとして認識するからです。当サイトではhttpsで/なしで統一(=... 記事を読む

GatsbyJS製の本ブログをAMP対応しました

公開日: カテゴリ: GatsbyJS

AMPはウェブサイトを高速で表示するためのHTML/CSS/JavaScriptの書き方です。AMPは「Accelerated Mobile Pages」の略で、Googleはニュースサイトに対して何ができるかという問いから始まったプロジェ... 記事を読む

GASをclasp(CLIツール)+ TypeScriptでローカルで開発する

公開日: カテゴリ: Google Apps Script

Google Apps Script(以下、GAS)はGoogleが開発したサーバレスな関数の実行環境です。GASはGoogleの各種サービスと連携してプログラムを実行できるため、業務やルーティンワークの自動化に最適です。まずclaspを導... 記事を読む

Gmailの新着メールをLINEに転送する by Google Apps Script

公開日: カテゴリ: Google Apps Script

私事ながら2019年に結婚しました。それから結婚式の式場を選び、日取りを決めて、当日の準備に当たります。すると、式場から打ち合わせのメールが不定期に飛んできます。私はメールの受信箱を頻繁に見ないので、やりとりはSlackにしたいと式場に申し... 記事を読む

GASで議事録のテンプレ作成と周知を自動化する

公開日: カテゴリ: Google Apps Script

この記事では、Google Apps Script(以下、GAS)を使って毎週の議事録作成を自動化する方法を紹介します。Google Driveに保存されているGoogle Documentをコピーするコードを解説した後、祝日は実行をスキッ... 記事を読む

スプレッドシートとUMLで診断チャートを作成するGoogle Apps Scriptのコードを紹介します

公開日: カテゴリ: Google Apps Script

この記事では、GASを使ってスプレッドシートのデータをUMLで表現できよるように変換します。スプレッドシートに記載した診断チャートのような選択肢を選んでいくデータ用意します。そして、この選択肢と結果の関係をPlantUMLの記法に落とし込ん... 記事を読む

Stripeの全てのSubscriptionsのstatus(active, trialing)を集計する方法を紹介します

公開日: カテゴリ: Stripe

この記事では、StripeのAPIを使って、Subscriptions(定期払い)のユーザーのステータスをGASで集計する方法をご紹介します。StripeはSaaSの決済サービスです。その中でも今回はSubscriptionsという定期払い... 記事を読む

Google Apps ScriptからSlackとLINEを連携するbotを作る手順を紹介します

公開日: カテゴリ: Google Apps Script

この記事は、Google Apps Script(以下、GAS)からSlackやLINEにメッセージを投稿する方法を紹介します。また、GASのコードを記述しているので、コピーしてそのまま使うことができます。Slackのチャンネルにメッセージ... 記事を読む

Tailwind CSS入門 - フロントエンドで素晴らしい開発体験を得るために

公開日: カテゴリ: Tailwind CSS

Tailwind CSSはユーティリティファーストのCSSフレームワークです。Tailwind CSSの特徴は、「1つのクラス名は1つのstyleに対応する」です。例えば`mx-auto`は「マージンの横方向をautoにする」というものです... 記事を読む

Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する

公開日: カテゴリ: Next.js

Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、... 記事を読む

技術ブログ「積ん読」のススメ

公開日: カテゴリ: Essay

エンジニアに情報収拾は欠かせません。技術は日進月歩で進化し、日々新しいツールが登場します。最新情報をキャッチアップすることは、エンジニアの基本動作です。しかし、最新情報を追うだけでは不十分です。技術は過去の積み重ねの上に成り立っているからで... 記事を読む

Reactコンポーネントの雛形生成のシェルスクリプトを書いた

公開日: カテゴリ: React

コンポーネントは「経年劣化に耐える ReactComponent の書き方」を参考にしています。この記事を読んだ時、自分が求めていたものはまさにこれなのだと感銘を受けました。以来、実務や個人開発ではずっとこのように書いています。コンポーネン... 記事を読む