blog.ojisan.io

ブログのためのブログ

NEWS

2020-08-05
記事「vercelでの環境変数の扱いが便利になった」が追加されました
2020-08-05
記事「はてブのネガティブなコメントからreact-helmetで守る」が追加されました
2020-08-03
記事「Gatsby製サイトをNetlifyにデプロイする前に見ておきたい設定2つ（ビルドと表示）」が追加されました
2020-08-03
記事「gatsby-plugin-netlify-cacheのキャッシュが効かない」が追加されました
2020-08-02
記事「ブログにmaterial-uiのDrawerを入れた」が追加されました

2020-08-05

はてブのネガティブなコメントからreact-helmetで守る

…

2020-08-05

vercelでの環境変数の扱いが便利になった

Vercel での環境変数周りでのあれこれ、ずっと苦しみ続けていたので自分なりのプラクティスをメモします。 辛さの原因は Vercel…

2020-08-03

gatsby-plugin-netlify-cacheのキャッシュが効かない

今朝更新した Gatsby 製サイトを Netlify にデプロイする前に見ておきたい設定 2 つ（ビルドと表示）のボツ原稿です。 この記事では Netlify でのビルドキャッシュを使う方法を紹介しました。 そこでは netlify-plugin-gatsby-cache…

2020-08-03

Gatsby製サイトをNetlifyにデプロイする前に見ておきたい設定2つ（ビルドと表示）

Netlify にはビルド時のキャッシュと HTTP のキャッシュをユーザー側で設定できる口があります。 このキャッシュの設定をすることで、ビルドや表示が早くなり良いこと尽くしなのでこれを気に見ていきましょう。 ビルド高速化 Netlify…

2020-08-02

ブログにmaterial-uiのDrawerを入れた

ヘッダーにナビゲーションを付けたくて、SP 対応を考えた結果 Drawer をつけることにしました。 ただアニメーションとか考えるのめんどくさかったのでコンポーネントライブラリを入れることにしました。 なぜいま material-ui material-ui…

2020-07-31

ソースコードからOGPを生成しシェアするOgp as a Serviceを作った(そして飽きたのでコードを公開する)

エンジニア向け OGP 画像作成サービスを作りました。 サービスはこれで、ソースコードはこれです。 ソースコード(HTML, JSX)から OGP 画像を生成し、それをシェアできるサービスです。 各種ソースコードを HTML に変換、それを DOM…

2020-07-30

No-Class CSS フレームワークをいろいろ比較するサイトを作った

No Class CSS Museumという No-Class CSS フレームワーク比較サイトを作りました。 簡単な demo 用のコードに何かスタイル当てたいけど、そんなに時間かけたくないしそもそもデザインセンスないしどうしようかなってときに No-Class CSS…

2020-07-28

Firebaseの存在をフロントエンドから隠蔽するために

「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore…

2020-07-26

三項演算子でstateを吹っ飛ばした

今からお話しすることは本当にしょうもないことである... たとえば、フォームの入力画面があって、送信前に確認画面(Confirm)を挟むとしよう。 そしてそれはいろんなフォームでやる操作なので、共通レイアウトファイルに書いてしまおう。 たとえば NextJS…

2020-07-22

Slay the Spireというカジュアルゲームたのしいよ！

明日から 4 連休だけど 東京都民は Go To トラベルができないらしいので、ちょっとした暇つぶしな情報を共有しようと思います。 最近まで Slay the Spire…

2020-07-20

絶対にお金を払いたくない精神での動的OGP生成は辛い

OGP 生成をタダでやろうとするとそのデプロイに意外と苦労したという話です。 アプリケーションの技術スタックは React/NextJS、クラウドサービスとして Cloud Storage, Cloud Functions, Vercel…

2020-07-18

ブラウザ上でJSXをコンパイルしてプレビュー環境を作る

少し前に ogpng というサービスを作りました。 これは HTML や JSX を使って OGP 画像を生成しシェアできるサービスです。 こういうエディタで OGP 画像を作り、 そこで発行された URL をシェアすると、OGP…

2020-07-17

Gatsby製のブログにタグ機能を追加するための方法を見直してみよう

このブログにタグ機能を作りました。 タグって自作ブログを作ると絶対に欲しくなってしまう機能なのですが、Gatsby でそれを作るのはちょっと敷居の高さを感じていたので、噛み砕きながら解説しようと思います。 一度わかってしまえば単純な話だとは思うものの、gatsby-node.js…

2020-07-11

ブログの1ヶ月を振り返る

ちょうどこのブログを初めて…

2020-07-02

Ajaxでコンテンツ取得するとページ内スクロールされなかった話（全面的に俺が悪かった編）

HTML の a タグではページ内リンクが使えます。 このブログでも右についてるタイトル（SP だと右下についてるオープナー）をクリックすると、その記事の該当箇所にジャンプできます。 これは、遷移先に id を付けて 遷移先 URL に #{id…

2020-07-01

Hover時に他の要素にスタイルを当てたい

(iframe の実験用の記事) Twitter のメニューなどそうなのですが、Hover した要素の中や隣接した要素のスタイルが変わるデザインってありますよね。 ↓ こういうの ↓ これって実装しようとしたらちょっとめんどくさそうじゃないですか。 hover…

2020-06-28

S3 に NextJS 製 App をデプロイできるか

できる場合とできない場合があります。 SSR(つまり NodeJS での実行)するなら、当然 S3 単体ではできません。 Lambda@Edge が必要で、さらに Lambda をルーティングごとに実行させる口として CloudFront も必要です。 Static HTML…

2020-06-28

S3にSPAはデプロイできるのか -HostingとRouting-

できます。 ここにある通り、S3 の設定ページで エラードキュメント に index.html をセットするだけで良いです。CloudFront がなくてもできます。 （完） ただ、たとえば /about でリロードして、404 Not Found…

2020-06-26

css-loader と style-loaderを間違えない ~css-loaderを使わずにcssを使ってみる~

css-loader と style-loader どっちがどっちかってたまになるので、そうならないための備忘です。 これらは webpack の loader であり、JS で構築されるアプリケーション内で CSS を扱うために利用されます。 最近は CSS in JS…

2020-06-24

ESLint と Prettier の共存設定とその根拠について

以前, ESLint の plugin と extend について解説した記事を書いた際に、Prettier と ESLint の共存設定について触れました。 いま Google で「Prettier ESLint…

2020-06-18

JavaScriptライブラリを読むときのコツ

少し前からライブラリを読むトレーニングを始めたのですが、最近ようやく読み方がわかってきたので、やり始めた頃に知っておきたかったことをまとめます。 これから JavaScript/TypeScript…

2020-06-15

ESLint の Plugin と Extend の違い

ESLint の Plugin と Extend の違いを説明できますか？ 違いを知っている人からすれば（というかそもそも全然違うものなので）、「え、それ悩む？」となるところなのですが、ユーザー向けドキュメントには Plugin の定義が書かれておらず、Extend…

2020-06-12

Babelの変換処理と向き合う

そういえば Babel をちゃんと勉強したことなかったなと思ってちゃんと勉強してみたって言う話です。 つまり Babel をノリで使ってたことになるのですが、自分がプログラミングを始めたときは @babel/preset-env…

2020-06-10

Gatsby + TypeScript で技術ブログを書くための知見

Blog を作りました！！！！！ 会社を辞めて 5 ヶ月経とうとしており、ついに堕落しきった生活による危機感が生まれはじめました。 その危機感が結実したものがこの Blog です。 で、Blog…