$shibayu36->blog;スマートフォン用の表示で見る$shibayu36->blog;株式会社はてなでエンジニアをしています。プログラミングや読書のことなどについて書いています。CloudFront/S3/Fargate)techNext.jsをproduction環境で使うために外観を掴んでおきたいと思い、Next.jsアプリケーションを動かすAWS環境をaws-cdkを使って構築するサンプルを作ってみた。荒削りだけど、参考になる例にはなったと思う。CloudFront/S3/Fargate)2020-02-03Next.jsアプリケーション用のDockerイメージを作るtechNext.jsアプリケーションをECSで動かしたいと思い、Dockerfileを作ってみたのでメモ。Dockerfileと.dockerignoreを用意し、ビルドコマンド用にMakefileも用意した。WORKSHOPをやった2020-01-15Next.jsのドキュメントを全部読んでみたtech最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。見て設定したが、特にstatusCode周りでハマったのでメモ。FoundページやISEページをカスタマイズする2020-01-07Next.js利用時の静的画像配信の方法tech静的な画像を使いたくなったら、基本はnext-imagesを使っておけば良い。このライブラリはNext.jsを使う時のwebpackのfile-loaderの推奨設定を書いてくれているだけの薄いライブラリ。ようにワークスペースを二つに分けて開発したいときがある。workspaceを使っている時でもvscodeでeslintプラグインが動くようにする2019-12-11Next.jsのpages/ディレクトリ以下にはページ用のファイル以外は置いてはならないtechNext.jsではpages/ディレクトリ以下にページ用の実装ファイルを置く規約となっているが、それに追加して、このディレクトリ以下にはページ用以外のファイルは置いてはならないということが分かった。このページにあるような例をテストしたいとする。blo</p></layout>...Next.jsのrouterをモックして、ページの単体テストをする2019-12-03「初めてのGraphQL」読んだtech最近は開発でGraphQLを使うようになってきたので、一度基本から勉強しようと思い、読んだ。2019/11/1...「初めてのGraphQL」読んだ2019-12-03Next.jsのページ遷移・ページロードの仕組みをコードリーディングで追いかけたtechNext.jsのLinkとRouterの挙動がよく分からなかったので、Next.jsのコードリーディングをした。ページ遷移やページロードの仕組みが結構つかめたのでメモ。next/...Next.jsのページ遷移・ページロードの仕組みをコードリーディングで追いかけた2019-12-02vscode-powertoolsを使って、VSCodeの挙動を自分好みに変えるtechVSCodeを使っていると、より便利にするために挙動を少し変えたいと思うときがある。ほんとにちょっとした変更の場合、拡張を書くまではしたくないので、いい方法がないかなと思っていたところ、vscode-powertoolsを使うと自分好みにできそうだった。3.7.2でjsonをimportした際に、json構造によっては二度目の代入が型エラーになるバグを踏んだtech表題のとおり。3.8.0-dev.20191126では直っていたので、3.8.0が来るまで気長に待ちましょう。Renderingの仕組みも知っておいたほうが良いと感じ、Next.jsについて学んでみた。チュートリアルがよく出来ていたので、これをベースに学んだ。チュートリアルをやった感じ、Next.jsは以下のようなものがメインの機能のフ...Next.jsチュートリアルやった2019-11-20「エンタープライズアプリケーションアーキテクチャパターン」を読んだtechソフトウェア設計に関する知識が昔のままで止まっていて、最近の設計のためのワードはぼんやりと理解できるものの、はっきりと分かっていないなと感じていた。Explorerを素早く操作できないことにストレスを感じていた。そこで素早く操作できるようにキーバインドを調整してみた。新しいキーバインドを覚えられないので、Emacs風になるようにセットアップしてみた。emacsからperltidy実行tech最近業務で久々にPerlを書いている。emacsから手動でperltidyを実行できる環境を整えてみた。Apolloを使ったコンポーネントのテストをするtechReactを使ったコンポーネントのテストのやり方を知らなかったので、やってみた内容をメモ。hatena/go-Intern-Diaryをお試し環境として利用した。