猫でもわかるWebプログラミングと副業

本業Webエンジニア。副業でもWebエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

Next.js で React の Server-side Rendering と Static Generation をやる #5 デプロイ

前回の記事 Vercel にデプロイする 今回使うコード Next.js と Vercel の相性が良い理由 プルリクエストするごとにプレビュービルドする Static Generation されたファイルを Netlify にデプロイするにはどうするのか 前回の記事 今回は Next.js を Vercel …

Next.js で React の Server-side Rendering と Static Generation をやる #4 Dynamin Routes

前回の記事 Dynamic Routes とは Markdown で書かれた記事を表示する 日付をきれいに表示する(CSS) fallback について Catch-all Routes 404 ページをカスタマイズする場合 API を叩く際の注意点 次回 前回の記事 この記事は第4回の記事です。 今までの記…

Next.js で React の Server-side Rendering と Static Generation をやる #3

前回の記事 今回の概要 Pre-rendering とは 2種類の Pre-rendering Static Generation vs Server-side Rendering Static Generation with Data を行う getStaticProps について Server-side Rendering を行う Client-side Rendering を行う SWR(React Hooks…

Next.js で React の Server-side Rendering と Static Generation をやる #2

前回の記事: Docker で Next.js 開発環境を用意する 今回の概要 Next.js チュートリアルのページ ソースコード 新しいページを追加する ページ遷移(リンク) 画像などのアセットの配置方法 title などのメタデータの設定方法 CSSの書き方 Layout グローバル…

Next.js で React の Server-side Rendering と Static Generation をやる #1

なぜこれを勉強しようと思ったか React の Server-side Rendering 技術は重要 Next は Server-side Rendering ではなく Static Generation Next.js を動かす準備 次回 なぜこれを勉強しようと思ったか この記事がたまたま twitter にの記事が流れてきたので…

Scala Play + Vue.js の多言語対応

LGTM画像生成サイト LGTMoon で多言語対応してみましたので、どのような対応を行ったかをまとめます。 LGTMoon - 最もシンプルなLGTM画像ジェネレーター Vue.js フロントエンドは Vue.js で組まれています。 多言語化には vue-i18n を使います。 yarn add vu…

Akashic Engine でニコニコ生放送対応ゲーム「アドリブ紙芝居」を作った

はじめに Akashicでニコ生のゲームを作った 作ったもの リポジトリ 遊び方 「アドリブ紙芝居」の実装について 生放送ゲームの作り方 アドリブ紙芝居の実装の方針 実装にあたっての注意点 ゲームの解像度 ES6以降の文法は使えない ビルド 苦労した点 制限時間…

とりあえず TypeScript を動かすまで

前提 npm init npm install typescript index.ts を用意 コンパイル 動かす 前提 node, npm はインストール済み npm init npm init を叩いて適当に package.json を作成する。 npm install typescript npm install typescript 以下が package.json に追記さ…

Macにnpmをインストールする方法 in 令和(2019年)

僕が考える最強の「Macにnpmをインストールする方法」in 2019 環境 nodebrew nodebrewでnodeを入れる npmを入れる 環境 macOS Mojave Homebrewはインストール済みである前提 nodebrew npmを動かすためにはnodeを入れなければ入れないのだが、簡単にnodeのバ…

LGTMoonで最新の画像が更新されない不具合がありました

不具合の概要 LGTMoonで「最近の画像」が更新されない部具合が発生していました。 LGTMoon - 最も簡単なLGTM画像ジェネレーター LGTMoonはの「最近の画像」ページでは、最新の画像が存在しているかどうかを常にポーリングしており、画像の生成が完了したら自…

Vue CLI で TypeError: u is undefined componentNormalizer.js:24 エラー

状況 Vue CLI 3(3.2.1) nom 6.4.1 yarn 1.12.3 の環境で、yarn serve だと問題なく動作するが、yarn build した結果だとうまくレンダリングされず、TypeError: u is undefined componentNormalizer.js:24 エラーが出る。 詳細はこんな感じだ。 Uncaught Ty…

Vue CLI 3を使う

はじめに 2018年8月にVue CLIのVersion 3が来ましたが、検索するとまだVue CLI 2の記事が多い。 npm install vue-cli とすると2系がインストールされてしまうのが罠でもある。Vue CLI 3を使ってみると、2よりかなり便利になっていると思ったので、Vue CLI 3…

JavaScript の正規表現で、改行も含めた全ての文字列マッチがうまくいかない

結論 JavaScriptでの正規表現の書き方 正規表現で改行も含めた文字列にマッチする方法 文字列結合して正規表現を使いたい場合 改めて結論 結論 new RegExp('[\\s\\S]', 'gm') です JavaScriptでの正規表現の書き方 JavaSctiptの正規表現のドキュメントはこち…

JavaScriptのundefined判定、jQueryのdomが見つからなかった時の判定

Javascriptのundefined判定 if(hoge === undefined) { // } ただし、 undefined の再定義ができるので、注意が必要だが、普通そんなことしないので、基本的には undefined と === 比較したらいいと思います。 例えば行かのようにundefinedの再定義ができます…