ASTで僕の考えた最強のDXを実現する 〜自分のDXは自分で守っていけ〜
2020-11-12
ASTイジイジするのはいいぞ!! * 難しくない * 自分のDXを自分で守るというエキサイティングな体験ができる * 触れる範囲が広がる * プログラミングをやる限りお世話になる と良いことづくめで最高なので布教したい また, このブログは [https://docs.google.com/presentation/d/1Ykka2_NvseClPO2J_oFqRUb_sD6rZfYBU-XWnsdTn9U/edit?usp=sharing](https://docs.google.com/presentation/d/1Ykka2_NvseClPO2J_oFqRUb_sD6rZfYBU-XWnsdTn9U/edit?usp=sharing) の補助資料です. まあこの記事の方を読めば大丈夫です大丈夫です
CyberAgent主催『Web Speed Hackathon Online』参加ログ
2020-04-26
Cyber Agent主催のWeb Speed Hackathon Online 4/25, 4/26に参加してきました. 結果は残念ながらレギュレーション違反で選外でしたが, とても楽しく刺激を得られたイベントになりました. この混乱した情勢の中オンラインという形でシステムを整えて実施してくださったCyber Agentの皆さん, ありがとうございました
cloud flare workerで省エネSSRなBlogを目指す
2020-04-13
世は技術ブログ大時代. みんなはてなブログか[JAMstack](https://jamstack.org/)にその身を委ねていた. お手軽さを求めるならはてなブログ, あるいはそこにカスタマイズ性やスピードを求めてHeadlessCMSにコンテンツを追加して動的に静的サイトを更新していくJAMstackな構成を目指した. 実際今の時代, GatsbyjsなりNextjsでもcontentfulなどを組み込んだJAMstackのテンプレートがあるので, HeadlessCMSからAPIを取得して環境変数として設定して, 適切にCI/CDを組んであげればもうJAMstackによる高速でお手軽な技術ブログが完成します. すごい時代だ.でもそんな中, あえてSSRを用いた動的な構成にロマンを感じ動的なブログを構築しようとした男がいました, いや僕なんですけど. cloud runでNode.jsの上にexpressサーバーを生やして, そこでJSXをreact-domを通してhtmlにしています. しかし一回のアクセスごとにexpressが立ち上がると時間がかかる(特にTTFB), そもそも従量課金制なのでアクセスのたびにサーバーを立ち上げるのでなく, 出来るだけキャッシュを効かせたい. 特にこの場合本質となるブログ記事はCMS上にあるのでそこを参照したい. というのを叶えたく, edge-sideでスクリプトを動かしてキャッシュを動的に管理して更なる最適化を目指す, という取り組みをしてみます
Next.jsとnow.shでブログを新しく作り替えた
2019-12-14
[Next.js 9](https://nextjs.org/blog/next-9) 7月8日Next.jsのv9リリースが発表されました。 実はこのブログの前身もNext.jsで書かれていて書いた当時はまだv8でした。でv9リリースからおよそ5ヶ月が経ってやっと、重い腰を上げて自分のブログのアップデートを試みました。 ですが蓋を開けるとあら不思議、あまりの~~クソ~~コードぷりになかなか作業が進まない。 具体的に言ってしまうと@ts-ignoreとanyのオンパレードで下手したらJSのまま作業するよりも酷い代物が出来上がっていました。 そんなものをアップデートしようとしても全然コンパイルが通らず、しかもバカ遅い。 ちなみにこれが書き換える前のlighthouseのスコア、無慈悲な0点に涙を禁じ得ません。 そしてもう何もかもが無理になり一から作り直してしまうことにしました(
TypeScriptの反変とどう向き合うか
2019-08-28
お久しぶりです、しにゃいです。  TypeScript いいですよね、静的型付けにより今あなたが触っているプロジェクトをより安全に進めて行くことができます。 しかしそんな TypeScript さんもなんだこれは、といってしまうような一見よくわからない挙動をすることがあります。 この記事ではその中の一つともいえよう反変について扱っておこうかなと思います
webpackからReact Lazy+Suspenseを試す
2019-08-21
お久しぶりです。しにゃいです。 この記事ではまた React+webpack をやろうと思います。今回は Lazy+Suspense を用いてコンポーネントを動的に読み込むやつをやろうと思います。 よかったら前回の記事も読んでねん。 [脱 create-react-app、React アプリの小さめ構築](https://www.shinyaigeek.com/p/21) [React アプリ小さめ構成 with react-router 編](https://www.shinyaigeek.com/p/22
Reactアプリ小さめ構成with react-router 編
2019-08-12
この記事は前回の記事の続きという感じです。これまた初学者向け [脱 create-react-app、React アプリの小さめ構築](https://www.shinyaigeek.com/p/22) この記事を読めば create-react-app なしで react アプリを構築できる様になるのですが、その続きとしてこの記事では react-router について扱おうと思います(開発していて思いの外どぶったので) react-router のエラー、割とありますよね. ていうか公式の API なり Document なりがよくわからないって感じはします。 なんかよくわからないけど 404 エラーが出たり、CANNOT GET URL みたいなエラーが出たり、僕もこれでどぶって、いい感じの日本語記事が見つからなかったのもあってじゃあ紹介しておこうかなという感じです
脱create-react-app、Reactアプリの小さめ構築
2019-08-10
突然ですがみなさん、React アプリ構築に create-react-app 使わないと出来ないのにフロントエンジニア名乗ってるなんてまさかですけどないですよね???webpack の設定いつも適当にコピペしてたりなんてしていませんよね??? (まあ僕も割とこんな感じだったので人の事は言えませんが) 今回は上記の煽りであ、やばいかもと思った人向けの記事です。 タイトルの通り create-react-app 無しでの React アプリ構築の手順(というか比較的小さい構築)をやっていこうかなと思います。(思ったより適当な日本語記事がなかったので) webpack,TypeScript あたりを使ってやって行く予定です。 目標は"Hello React"と書き出すとこまでです。 え??しょぼくない??と思う方もいると思われますが、これ以降の簡単なアプリ作ったりってのは結構どの記事でもやられているのでそちらを参考にしてほしいなという感じです。 また特にモジュール積みのところでガンガン module についての記事を載せたり、公式のドキュメントを載せていますが、これはイマイチわからない人は読んだ方がいいんじゃない?というくらいの気持ちで載せたので読む体力がないのであれば今は飛ばしても結構かと思われます。いつか思い出した時にでも読んでください
東大に入り1年が経った
2019-04-12
どうも、しにゃいです いきなりですがこの写真はなんでしょう? 答えはちょうど一年前、2018年4月12日、東京大学入学式の日に僕が某テレビから受けたインタビューでの僕の返答だ。 確かこの時は経済学部に進学したいと答えていた気がする(なのに何故か文三) なんでかはもう覚えていない ただ新しく始まるであろう生活に胸を躍らせていたのは覚えている。 その憧れの東大で過ごしてもう一年が経ったが、あの頃の、一年前の僕と今の僕が会ったとして一年前の僕はどう思うだろう? 驚くだろうか?失望するだろうか?満足するだろうか?さっぱりわからん まあ少なくとも今の僕は今の僕に満足している。それでいいかもしれな
気付かぬ間にコピペコーダーになってた話
2019-04-07
お久しぶり?です。しにゃいです お元気ですか?僕は元気です、クソどうでもいいですねはい この記事はちょっとした僕のやらかしを書いています、恥ずかしいですねハイ コピペコーダー、怖いですよ。自分でも何書いてるかわかんないですもん。 しかもコピペコーダーのうちってなかなか自分がそうだと気づけないんですよ怖いことに、ああ怖い とりあえず今Googleで実装したいこと調べてQiitaで出てきたコードとかをあんまり中身を理解せずにコピペしていたり、teratailとかで質問しても、回答の内容が理解できずにコードをコピーしちゃって終わってる人とかはこれを絶対読もうなマジで