仕事でソースマップのことをちゃんと調べなきゃいけない状況になったので調べることにしたのでその調査メモです。 発端 Next.js に Sentry を導入するということをやっている。 導入自体はとても簡単で、@sentry/nextjs というパッケージを使うことで実現できる。 @sentry/nextjs には withSentryConfig という関数があり、これによって next.config.js を拡張できる。そしてその設定の中に、hideSourceMaps という設定があり、これを有効化することで Sentry 側にソースマップを渡しつつも本番環境ではソースマップが見えないようにできる。 hideSourceMaps オプションの公式サイトの説明を読んでみると、このオプションを有効にすると Webpack の hidden-source-map を有効にした状態になるみたい

export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD

アルインコ(ALINCO) フィットネスバイク AF6200 見やすい大型液晶メーター エアロマグネティック 8段階負荷調節 テレビで紹介された 静音 サドル調整 組立簡単 心拍測定 簡単移動 タブレットトレー アルインコ(Alinco)Amazon今年買ってよかったもの記事でも書こうかなあと思ったのだけど、自分の場合これは一択（エアロバイク）しか存在しなかったので、むしろエアロバイク普及記事を書こうと突如思い至った。とにかくこれはよかったので、今更感もあるが、運動できない／したいと悩んでいる人、特に読書家やゲーマーにオススメしたい。何しろ、これなら運動しながら読書ができるし、ゲームだって（対戦系ゲームは難しいが）できるし無論のことゲーム配信や映画やドラマを見ることだってできるのである。 なぜ運動しようと思い立ったのか そもそもなぜ運動しようと思い立ったのか。その流れを最初に書いておくと、

久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ

同年代の方がブログに書かれていたことについて、自分の思うところを書いてみる。 starhoshi.hatenablog.com 「育児で勉強時間がとれない」という話がプログラマー界隈でバズってるの、人類の普遍的な悩みではあるけど、昔から「プログラマーは死ぬまで勉強しないと終わり」と口酸っぱく言われてた事と、それで良しとするコミュニティ全体の風潮がそもそも持続可能な物ではなかった、という事だよな〜と思ってる— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayosi) October 19, 2022 育児のしんどさ 勉強時間が取れなくなる ふとSNSを見ると、同年代の独身者や若者がバリバリ成果をあげている 自分の市場価値がみるみる下がっていくのを、ただ見ることしかできない恐怖感 俺たちは勉強をしないと死ぬのか プログラマー35歳定年説 デーブカトラーのような「闘うプログラマー」にならないと生き

子供が産まれて一年半近く経つが、時間が全然取れない。 ここ最近は新しい技術を何か積極的に勉強するということが特になく、20代の頃に得た知識でなんとか飯を食っている感覚がある。転職してから1年は業務でFlutterを始めていて、それだけ聞くと新しい技術を得ているように見えるが、自分の中では今までの延長線上にいるだけのような感覚がある。 20代の頃は必死になって技術書読んだり記事読んだり実際に手を動かしたりもしたけど、ここ最近は業務で必要な知識を業務時間内に得るだけで、業務では触らないような知識は全然身についていない。 モバイルアプリエンジニアはこの先オワコンになると思っており、上辺だけのエンジニアリングの知識では飯を食っていけなくなりそうな気がする。そのためバックエンドをもっと強くやっていくとか、ウェブフロントエンドなど手を広げたいが全然時間が取れない。業務でやるのが一番いいが、モバイルアプ

明治中期から後期の #多摩川 は上流部の森林が荒廃しており、渇水や濁水が頻繁に発生していました。そのため #尾崎行雄 東京市長は東京市が水源林の経営を行うべきと決断し、水源地帯の買収、植栽や崩壊地の復旧などの施策を講じました。その結果現在の豊かな水道水源林が形成されることとなりました。 pic.twitter.com/U8qHfdIXFm — 東京水道株式会社【公式】 (@Tokyo_Water_Co) July 19, 2022 先日、東京都の持っている巨大な水源林にいってきた。 デジタル技術も都市を支えるインフラの一つになりたい。その際、水道局、下水道局、港湾局、交通局などの既存の都市インフラの先輩部局の在り方が参考になるのではと思いインフラ系部門の現場に時間をみては行って話をきいてる。 これが毎回、滅法、面白い。今回は水道局の奥多摩から山梨県甲州市にかかる水源林に行ってきた。以前に行

Meetyでは、フルリモートワーク＆顔出し不要という働き方を推奨しています。 背景にあるのは「一人ひとりの人生を大切にし、自律的なハイパフォーマーが集まるチームをつくる」という組織の理想です。 それを実現するために、なぜ私たちがこの働き方を選んでいるのか。 全ての業種で成立する働き方ではないですが、私たちのようにWebサービスを提供するプロダクトドリブンな企業で、どんな実践ができるのか。 私たちの思想と取り組みをフルリモートワークのオープンソースのような形でドキュメントにしました。 Meetyで働くことに興味がある方には働き方の様子を、フルリモートワーク導入を検討している方にはメリットや課題を、体系的にお伝えできれば幸いです。

概要 Vueの作者であるEvan You氏は、Vueのデフォルトバージョンが2022年2月7日以降3.x系に切り替わる事を開発者ブログにおいて発表しました。 それに伴い、Vue2.x系の最後のマイナーバージョンであるVue2.7が2022年7月1日にリリースされ、こちらの LTS (long-term support)はリリースから18ヶ月であることから、Vue2.x系へのサポートは2023年12月を持って完全に打ち切られる事となりました。 以下の記事でも語られている通りVue2とVue3では破壊的変更が多く、移行コストが格段に高いことから、多くの開発チームがVue３.x系への移行を頑張るかReact等の他のフレームワークへの乗り換えをするかの選択を迫られています。 3.x系へ移行すべきかフレームワークを乗り換えるべきかの是非についてはこの記事では触れませんが、Vueの破壊的変更に伴って多

こんにちは！株式会社ラクスの@kzak_24と申します。 インフラ開発部 SRE課に所属しております。 さて今回は、現在アサインされている新規システムの開発プロジェクトにて、フロントエンドの技術選定を担当した時の経験をまとめようと思います。 フロントエンドは未経験だった為、色々と試行錯誤を行いました。 未経験なりにどのような基準を設けて技術選定を行なったか、皆さまの意思決定の参考になれば幸いです。 目次 SREチームの紹介 前提 チームの背景 検討内容と採用理由 言語 / FW 状態管理 スタイル テスト まとめ 最後に SREチームの紹介 まず始めに、少しだけSREチームについて紹介させてください。 ラクスのSREチームは2021年に発足した比較的新しい組織であり、下記の2つのチームに分かれています。 BP(Business Platform)チーム 社内業務システムの開発/保守/運用を

最近以下のような記事や本を読み読書法を変えてみたところ、知識の吸収速度・引き出し速度が上がったと感じるので紹介。 kentarokuribayashi.com 知的戦闘力を高める 独学の技法 作者:山口周ダイヤモンド社Amazon やり方 以下のような流れで読書している。 学びたいと思った知識が書いてありそうな本を2~5冊選ぶ 1冊ずつざっくり読みながら、面白かった部分・気になった部分はKindleで黄色にハイライトしておく 全冊読み終わったら、ハイライトした部分だけ眺めて、やっぱり面白いと思ったところは赤のハイライトを付け直す 赤のハイライトを眺めて、読書ノートに転記する 特に面白い部分については、自分の知見まとめノートにカテゴリごとに整理する 学びたいと思った知識が書いてありそうな本を2~5冊選ぶ 自分の中で学びたいテーマがあって本を読むはずなので、そのテーマについて書いてありそうな本

ソフトウェア開発において、なんらかの機能を提供する状態としてざっくり以下の状態があると思う。 機能をリリースしていないのでユーザがその機能を利用できない 洗練されてなくユーザがうまく使えない 洗練されてはないがユーザが迷いなく利用できる 洗練されておりユーザが迷いなく利用できる まずその機能を利用できないというのが一番の不利益だが、ユーザが使いこなせない形でのリリースはもっと邪悪かもしれない。 洗練されているのは良いことだが、洗練されていなくても、 ユーザが機能を迷いなく利用できること にまず大きな価値がある。 MVP 検証可能な最低限の形でまずリリースするのが良い、後から改善していけば良い。 勘違いしてはいけないのは、雑に作ればいよいということではなく、MVPとしての形を保ち、検証設計ができていること。でないとユーザからしたら利用価値のないクソ機能と見放されてしまうかもしれないし、分析や

TL;DR モチベーション ウェブページの背景に星空を見せたかった。それがちゃんと実際の星空の、リアルタイムの状況を反映していたら面白いよねと思った。 スタート時の状況 主に愛情のこもった手打ち HTML5 と 手打ち CSS でシンプルな Web ページを作っていた https://web.archive.org/web/20210212085818/celestian.io この前にどうやら React が世間では流行ってるらしいということで React と TypeScript を使った小さい 1 ページアプリを作った https://web.archive.org/web/20201202100627/https://celestian.io/ssr/ 今の https://celestian.io/sushi の前身 C# で WPF のデスクトップアプリとか作ってたことがあった

結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察してセミコロンを挿入してくれる 自動セミコロン挿入のしくみはECMAScriptで規定されており、自動セミコロン挿入はJavaScriptエンジン間で可搬性がある 自動セミコロン挿入には落とし穴があり、ルールを理解しておく必要がある 第１のルール：セミコロンが挿入されるのは、"}"トークンの前か、改行の後か、プログラムの末尾だけ

JavaScript でのstructuredClone関数が Chrome98 から使えるようになりました 🎉 structuredCloneを利用する事で、簡単にオブジェクトのディープコピーができるようになりました。 すごく便利そうだな...!!と思った関数なので実際に試してみました。 structuredClone 本題のstructuredCloneです。 structuredCloneは一言で言うと「構造化複製アルゴリズムに従って、指定された値のディープクローンを生成するメソッド」です。 つまり、構造化複製アルゴリズムに対応する値はstructuredCloneを使うとディープコピーした上で値を返してくれる、と言うことです。 IE には対応していませんが、Chrome、Edge、Firefox 等の主要なブラウザは対応してきているので、Object.assignやライブラリの

約5年5か月働いたTreasure Dataを7/22に退職した。7/25からShopifyに入社し、RustでJITコンパイラを開発してRubyを高速化する仕事をする。 仕事としてやりたい分野が変わってきて自分は今回転職したけど、とても良い会社なので、この記事がTreasure Data (以下TD) で働くことに興味がある人の参考になれば良いと思っている。*1 5年勤続記念にいただいたトロフィー やっていたこと APIチーム 元々TDにはJavaで分散システムを書きたくて入社したのだが、TD入社前に特にそういう経験があるわけでもなく主にRailsをやっていたこともあり、Railsでプラットフォームを開発するチームに入った。基盤開発をやりたいと思いながらサービス開発者として最初働き、後に基盤開発チームにジョインするみたいな過去の経験があったので、今回もそういう感じでいけると考えていた。実

はじめに 今回この記事を書こうと思ったのは、JavaScriptのパーサ関連の記事が定期的に投稿される中で、 ESTreeの話はよく出てきていて反響がありそうだけれど、それを利用したツールは実際にどのようにコードを解析しているかが詳しく書かれている記事が少ないなあと思ったためです。 この記事では、トランスパイラとしてモダンJSの一時代を築いたBabelを例にトランスパイルについて、詳しく解説できたらと思います。 詳しい仕様などは日本語訳がされたハンドブック もありますが、 あいまいな訳になっているため、英語版のハンドブックをわたしはお勧めします。 記事の対象者 JavaScriptやTypeScriptを利用している JavaScriptなどのコードは書けても実際にブラウザでどのように実行されているか気になる JavaScriptなどのパーサや言語処理、トランスパイラ、コンパイラに興味があ

at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました

はじめに 表題通り、Next.js 12.2でStableになったMiddlewareのbetaからの変更点を書いていきます。 基本的には公式ドキュメントの通りなのですが、実際に移行してみて少し詰まった部分があったので併せて書いていきます。 以前「Next.js 12でbetaになったMiddleware（Basic認証）を触ってみた」という記事を書いており、そのコードを移行したものになります。 環境 Next.js@12.2 Vercel 実際のコード import type { NextRequest } from 'next/server' import { NextResponse } from 'next/server' export const middleware = (req: NextRequest) => { if (req.nextUrl.pathname.start

概要 先日新規の Web サービス開発でフロントエンド側の技術選定を行いました。 利用する技術の中で GraphQL を提案した際に、RESTful な API で呼び出す方法と比較して納得感がないという意見があがりました。 そこで、なぜ、どういうときに GraphQL を選定すべきだと思うか、文章にして自分なりにまとめておこうと思います。 前提 構成が BFF か BE かで意見は大きく変わりません。 例えば BFF として利用されるケースでは、バックエンド側には BE チームとマイクロサービス的な API が存在しており、 BFF として GraphQL を配置するようなケースです。GraphQL のリゾルバは API を叩きます。 一方、 BE として利用されるケースとは、リゾルバが直接 DB を叩くような形です。 今回はフロントエンドのチームが管理する BFF として、JS のみで