技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
独力でWebサービスを開発・構築できるフルスタックエンジニアへのロードマップ─幅広いスキルを「Udemy夏のビッグセール」で学ぶ！ - はてなニュース
Webで新規サービスを立ち上げる際に、UIからインフラ周りまで一人で面倒を見られるエンジニアは、少人数のスタートアップでなくとも非常に頼れる存在です。どんな課題に直面しても技術力で乗り越える、そんなスキルフルなエンジニアに憧れる方も多いでしょう。 この記事では、フロントエンドのプログラミング（JavaScript周辺）からサーバーサイド、インフラ、さらに開発手法まで、Web開発で必要になるさまざまなレイヤーのフルスタックなスキルの現在地と、関連するUdemyの講座を紹介します。 株式会社ヘンリーでVPoEを務める松木雅幸（@songmu）さんの執筆です。 フルスタックエンジニアに必要なスキル さまざまな講座でまとめて学習してみよう Udemyでは夏のビッグセールを開催中！ ※この記事は、株式会社ベネッセコーポレーションによるタイアップ広告です。記事末に、はてなブックマークした方にAmazo
はじめに 知らない間にGitHub Copilotが結構進化していたので、それらの内容を紹介します。 GitHub Copilot Chatは知っていたのですが、単なるChatGPTみたいな会話機能を追加しただけだと思っていました。 要約 右クリックメニューや#fileのようなコマンドが登場し、それを入力するだけでChatに見てほしいコンテキストを伝えることができるようになった。 ファイル単位だけでなく、選択した行やブロックに限定することもできる。 テストコードや新しいプロジェクトをコマンド一つで生成できるようになっている。 推薦の候補も複数を同時に比較できるようになった。 一度に最大10個くらい出る上、タブで保管できる。 ターミナルや編集中のファイルからコマンド一つでChatを立ち上げることができる。 特別なプロンプトを入力しなくても、開いた場所の文脈を読み取ってくれる。 右クリックメニ
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
ジャンプTOON Next.js App Router の活用〜得られた恩恵と課題〜 | CyberAgent Developers Blog
目次 はじめに Colocation を意識した設計方針 Parallel Routes と Intercepting Routes を用いた設計パターン サーバー側に処理を寄せたことによる恩恵と課題 Next.js が抱える課題 おわりに 参考文献 はじめに ジャンプTOON のWeb版（以降、ジャンプTOON Web）の開発を担当している浅原昌大（@assa1605）です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON のフロントエンドには、Next.js を採用し開発をしています。 本記事では、Next.js の最新機能や設計パターン、Next.js を採用した恩恵と現在の課題について紹介します。 Colocation を意識した設計方針 Parallel Rou
Goのテンプレートエンジン「templ」が便利（TinyGoでも動くよ） - kasu.log
あらすじ Go で素朴な HTML を返すアプリケーションを動かしたくなり、 Wasm に変換してデプロイすることができる Cloudflare Workers を使うことにしました。 Cloudflare Workers に Go アプリケーションをデプロイする際には、id:f_syumai さんのテンプレートがオススメです。 github.com Go + text/template まずは、素直に text/template 使ってビルドしてみます。 ❯ ls -lh ./build total 15656 -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs -rw-r--r-- 1 ergofriend staff 16
はじめに 背景 やりたいこと Why MSW？ 導入手順 詰まったこと defaultのtimeout設定時間が短い CIで落ちた時の検証方法がわからない 認証後のストレージの状態が入ってこない 今後の展望 おわりに はじめに enechainでフロントエンドエンジニアをしている@Shunya078です！ 自分の所属するGXデスクでは『日本気候取引所 - Japan Climate Exchange』(以下JCEX)のサービス開発を行っており、その中でReactを使用したフロントエンドの開発を担当しています。 リグレッションテストは運用を考えると、設計から導入した後、どう管理していくかまで検討する点が多く存在します。 JCEXは去年の年末にリリースされたばかりのサービスで、まだブラウザまで含めたリグレッション相当になるテストレイヤーが導入できておらず、存在しませんでした。 今回は新たに自チ
新人プログラマにとって「タイプミスなのか」「型が違うのか」典型的なエラーの種類やデバッグの仕方を知ってるだけで、劇的に開発が速くなる話
おばあちゃんのプログラミング教室（ばあプロ）As A Service @Pythonist19 12年間の開発と5年間の新人教育の経験を活かしやさしく解説。初学者向けにWeb制作の歩き方公開。VSCode。Python, PHP, Perl,モダンJS,React, ラズパイ,ML。Djangoが好き。MBAほるだぁ。組込,Svelte。AI小説（baapuro.com/story/one/） baapuro.com おばあちゃんのプログラミング教室（ばあプロ）As A Service @Pythonist19 タイプミスなのか。型が違うのか。典型的なエラーの種類やデバッグの仕方を知ってるだけで、劇的に開発が速くなるので、新人以外にも超重要じゃと思ったのう👵 pic.x.com/eok6s7mogo
graphql-code-generator から gql.tada に移行した話 - Gaudiy Tech Blog
こんにちは。ファンと共に時代を進める、Web3スタートアップのGaudiyでエンジニアをしているkodai（@r34b26）です。 Gaudiyでは、以前からフロントエンド(Next.js)とGateway(Node.js)の通信においてGraphQLを使用しています。 techblog.gaudiy.com その際に、GraphQLスキーマからコードを自動生成するツールとしてGraphQL-Codegenを活用してきましたが、開発者体験やユーザー体験においていくつかの課題を抱えていたため、今回、gql.tadaに移行しました。 この記事では、課題背景から実際の移行プロセスを紹介してみるので、gql.tadaが気になっている人やGraphQLの運用に課題感のある人の参考になれば嬉しいです。 1. GaudiyとGraphQL 2. GraphQL-Codegenにまつわる課題 3. gql
Web会議のウィンドウ共有中に別のウィンドウをサクッと見せるHTMLを作ったらそこそこ便利｜TechRacho by BPS株式会社
Google Meetなどで画面共有するときに、 単一のブラウザタブを共有 単一のウィンドウを共有 デスクトップ全体を共有 が選べますが、僕はほとんどの場合単一のウィンドウ共有を使います。 動作デモを見せたり議事録を映したりするので、タブ共有では足りません。 かといってデスクトップ全体共有だと、領域が広すぎます。老眼が始まった参加者から文字が小さいと苦情を受けるでしょう。メインで作業する4Kディスプレイとは別に、画面共有用にフルHDくらいの小型ディスプレイも接続しておくのがビジネスマンのマナーだとは思いますが、それでも広すぎるということも多いものです。ウィンドウのように自在にリサイズできるのには敵わない。 こんなの共有したら非難が殺到します ※デスクトップ共有で、うっかり通知が入り込んでしまう事故も良く見かけますね。どうしてもデスクトップ共有するときは、マルチディスプレイでサブディスプレイ
Leaving Neovim for Zed
A journey through text editors and how I landed on Zed after years of Neovim I think every developer has their own text editor journey and how they landed on the tool they use today. Perhaps I’m a geek but I love those stories. I have a great appreciation for developer tools and the work that goes into them. This post is for the other geeks out there that also care, and I hope my journey and persp
新たなWebブラウザ「Verso」など: Cybozu Frontend Weekly (2024-08-20号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/08/20のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 feat(next): next.config.ts by devjiwonchoi · Pull Request #63051 · vercel/next.js Next.jsの設定ファイルをTypeScriptで書けるようになりました。next.config.tsに設定ファイルを記述することができます。 Using pnpm on Heroku HerokuのNode.js buildpackが、パッケージマネージャの1
TSKaigi Kansai 2024 で登壇してみませんか？トークテーマの探し方・プロポーザルの書き方のヒントを紹介します！ - TSKaigi 公式ブログ
こんにちは、TSKaigi Kansai プログラムチームです。 現在 TSKaigi Kansai 2024 ではトーク登壇のプロポーザルを募集中です。この記事では改めて登壇のお誘いと、登壇に挑戦される方への応援として、トークテーマの探し方やプロポーザルの書き方のヒントをご紹介します。「登壇に応募はしたいがテーマに自信がない」「良いプロポーザルの書き方がわからない」という方にも、この記事が少しでも応募の助けとなりましたら幸いです。 TSKaigi Kansai 2024 とは トークテーマの探し方 自身の経験や疑問・発見をテーマにする 興味のある分野を深掘りする プロポーザルの書き方 トークの内容をわかりやすく伝える フィードバックを取り入れる TSKaigi 2024 登壇者の方にも聞いてみました kosui さん (TSKaigi 2024 セッション登壇者) Q. トークテーマはど
VS Code で文字コードを確認できる拡張機能「Display character code」 | DevelopersIO
VS Code でもサクラエディタみたいに文字コード確認できたらいいなと思ってたらズバリそのまんまな拡張機能があったので紹介します。 たまに文字コード（コードポイント）を確認したいときってありますよね？ 私はそういう場合はサクラエディタを使って文字コードを確認していたこともありました。 ※サクラエディタでは以下のようにカーソルの右側の文字コードがステータスバーに表示されます。 ただ VS Code 内で完結できないのと、サクラエディタが無い、動作しない環境だとサクッと確認できません。 そういったことを解決できる VS Code 拡張機能があればいいのにな〜と探したらズバリそのまんまな拡張機能を見つけたので紹介したいと思います。 Display character code こちらが今回紹介する拡張機能「Display character code」です。 名前: Display chara
CursorのComposer 機能を使った要件定義・設計の方法:生成AI活用｜遠藤巧巳 - JapanMarketing合同会社
はじめに - Cursorについてシステム開発に携わっている皆さんはCursorはご存知ですか？また利用していますか？Cursorは、VSCodeを基に作られたエディタです。特徴としてはChatGPTはじめとする生成AIがエディタに統合されており、ファイル内やターミナル内で自然言語で依頼することで、コードを自動生成してくれます。 これを使うことで、プログラムやフレームワークの理屈さえ頭に入っていれば、実際のコーディングレベルに頭を使う必要はなくなります。プログラム言語が異なれば、ループ分のやり方が異なったりしますが、それらを意識せずにただ自然言語でループ処理をしてと言えば書いてくれます。 また、ターミナルについても pwd , ls, cdぐらいであれば誰でもすぐにわかりますが、ちょっと凝ったことをする際にこれまでだといちいちGoogle検索していたかと思いますが、それも自然言語で依頼すれ
Tracingを用いたRustのロギング理解の図とメモ
Rustでそれなりにちゃんとしたロギングをしようと思いtracingを調べた結果の理解図やサンプルコード等を備忘のため残しておきます。ただバージョンが1未満なので実装は色々変更されるかもしれません。[tracing 0.1.40, tracing-subscriber 0.3.18] 私の理解が解説のように書かれていますが、便利ツールとして使用するだけであればこの認識で問題なさそう、というような内容のため厳密性はありません。Quick startのコードがdocs.rsに載ってなかったり、必須コンポーネントのSubscriberが別クレートになってたり、色々な方法が提供されており逆に混乱したりでそれなりの理解にすらなかなか時間がかかりました。 概要 前提 use tracing::{event, span, Level}; fn main() { tracing_subscriber::f
ねこばく！幼女が猫を爆発させて限界に挑むゲーム https://unityroom.com/games/yoko スマホでも動きます（Androidは未確認） タイトルがひどいのはAIのせいです。相談してこんなものが出てきたら採用するしかないじゃない。 よくYouTuberが取り上げてアクセス数が急上昇する現象がありますが、はてなにはどれほどのバズ力があるのか、というテスト。 過去にこういったことを試した人はいないと思います。いる？いない…よね？ まあ、この日記が人目に付かず終わる可能性が一番高いとは思っていますが。 で、はてなーが知りたいのは結果よりも経過でしょ？わかります。 さて、いきなり重くなりますが、実は今、うつで休職中です。 うつは良くなったり悪くなったりを繰り返しながら治っていくものですが、悪いときはとにかく寝ているしかできません。 問題なのはそこそこ良いときで、何もしないと暇
この記事で伝えたいこと AstroNvim というフレームワークを使っていましたが、カスタマイズのやり方がよくわからず結局 vscode を使い続けてしまっていました。 しかし、 lazynvim をもとに 1 から neovim をセットアップしたことで理解が進んで自分がこうしたいな〜というカスタマイズができるようになり、とてもよかったです。 そのため、本記事は「フレームワークを使うのもよいのですが、腰を据えて 1 からセットアップするのもいいよ」という記事です。 記事の記載方法について どうしてフレームワークを使うとだめだったのか、どうして 1 からセットアップしたのかを伝わりやすさの観点から経緯順で記載します。 vim のキーバインドだけを使い始めた 学生のころに CLI 環境を整えたいなとなっていろいろ調べたところ vim に出会いました。 ゴリラさんの vim 本を読んで、当時使
今回作成したdotfliesです。 github.com chezmoiとは Go製のクロスプラットフォームのdotfiles管理ツールです。dotfilesとは .zshrc や .gitconfig といった設定ファイルを指す言葉です。 chezmoiの名前はフランス語の chez-moi (シェモア)に由来し、意味は「自宅」を表します。 www.chezmoi.io 主な機能としては以下となってます テンプレート機能 パスワードマネージャーをサポート アーカイブからのファイル読み込み ファイル暗号化 スクリプトの実行 dotfilesの管理をシンボリックリンクで行っていましたが、もっとシンプルにできないかと思って調べみると dotfiles管理ツールがあることを知りました。 chezmoiはGitHubスター数が多く、ドキュメントが整理され情報量が多かったので今回使ってみることにしま
350M Tokens Don't Lie: Love And Hate In Hacker News | Outerbounds
Geeks, nerds, and hackers should find themselves right at home! Interestingly, while the community tends to be visionary and forward-looking (with technical matters at least), it definitely has a soft spot for (technical) nostalgia. While the modern world is amazing, we miss ZX Spectrum, Z80 assembly, and 8086 dearly. At least we find some comfort in PICO-8. On the anger-inducing side, most topics
『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 』個人的推しポイント 2024年7月8日、microCMSのメンバーが執筆した『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた』が翔泳社より発売となりました（書籍情報はこちら）。今回は、こちらの本についての内容と個人的な推しポイントをご紹介していきたいと思います！ 書籍内容本書は、Next.jsとmicroCMSを用いてモダンなWebサイトを構築する方法を、やさしく解説した入門書となっており、初心者〜中級者向けの内容となります。 次のような方に特におすすめです HTML/CSSやWordPressでのサイト実装の経験はあるが、Next.jsなどのJSフレームワークはさわったことがない人Next.jsの基本的な使い方を知りたい人
Language Server Protocol from Debug Symbols August 12th, 2024 I was recently writing some Jai code and ran into a problem - no intellisense. Unfortunately Jai is a closed beta language and no one has yet written an extension that allows for features such as goto definition. Lack of intellisense makes me sad. Being able to tap F12 to goto any function is so helpful for learning your way around an u
Haystack Editorとは Haystack Editorは、Y Combinatorのプログラムに参加しているUSのエンジニア2人が開発しているVSCodeベースのエディタです。*1主な機能は、キャンバス上にコードを展開してグラフィカルに閲覧できる点と、展開したグラフに対してコードを生成して追加・編集できる点です。SNS上では、派手なデモ動画にみんな驚いているようでした。 公式サイトからダウンロードできます。 haystackeditor.com ただし、コード生成の過程でソースコードがOpenAIのAPIに送信される可能性があり、FAQにはオプトイン方式と記載されている一方で、実際の設定ではオプトアウト設定がデフォルトオフになっているという点があります。どっちやねん。 この記事では、Haystackのコード閲覧機能に絞って紹介します。 Haystackのコード閲覧機能 Hays
Haystack-editorとは 公式ページ なんだか，VRみたいなIDEですね。 VSCodeからForkされているのでExtensionsや設定が引き継げる。 Mac OS, Linux, Windowsで使える。 ということなので導入は割と容易そうです。 Does Haystack log or send my code anywhere? We do not store ore log your code anywhere. We do sedn snippets of your code to Open AI as input for our navigational copilot if you opt into it. BY default, you are opted out. Haystackは私のコードをどこかに記録したり送ったりしますか？ あなたのコードをどこかに保
夏の自由研究連載2024の1日目です。 生成AIが人気です。生成AIに対しては自然言語で指示を与えられますが、自然言語を構造化してやりとりする方法としてはよくMarkdownが使われます。その生成AIフレンドリーなMarkdownで設計ドキュメントを作るとしても、要約をしたりといった生成AIが得意なタスクではなく、コード生成だったり、構成チェックをする場合は生成AIではなく再現性の高い従来方式のツールを併用するといったことが今後行われそうな気がするので、ルール（テンプレート）に従ったMarkdownのパース処理の実装方法をいろいろ試した結果、パーサーコンビネーターが良いかなということで試してみた記録になります。 構文解析の実装方法何かしらのルールに従ったドキュメントやソースコードなどのテキストをパースするにはパーサーを使います。パーサーを作る場合は、LR法などの構文解析のパーサーなど作った
uv から始まる Python 開発環境構築
0. はじめに 株式会社ディー・エヌ・エーに入社し，MLOps エンジニアをやっている @a5chin です． 0.1. 背景 2024/08/20 に Astral 社から以下のブログが発表されました． Python のランタイム・パッケージングを uv 一つで置き換えることができるという発表でした． Today, we're announcing a series of features that extend uv beyond a pip alternative, and into an end-to-end solution for managing Python projects, command-line tools, single-file scripts, and even Python itself. 本記事では，以前に紹介した『【Rye + uv + Ruff】Doc
はじめに Google CloudのCloud Shellってご存知でしょうか？ 私は仕事ではAWSを使うことが多いので、周りでGoogleのCloud Shellを使っている人はあまり見たことがありません。 しかしながら使ってみればみるほど素晴らしいサービスなのでGoogle Cloudを使ってない人にもぜひ知っておいて欲しいです。 Cloud Shellとは 正確な説明は公式のドキュメントに譲るとして、ざっくり言ってしまうと、ブラウザからアクセスできるLinux開発環境です。 開発者がよく使うコマンドラインツールやプログラミング言語がプリインストールされており、アクセスしてすぐに使い始めることが可能です（Python、Node.js、Goなどの言語や、Docker、Minikube、Git、Terraformといったツール）。Minikubeまでデフォルトで使える状態になってるの凄いで
【今後の登壇者募集中】 本 Meetup はユーザーコミュニティイベントです。 VS Code をテーマに、技術発信したい方の登壇をお待ちしております。 VS Code を最近使い始めて気づいたところの紹介から、VS Codeのディープな使い方まで、様々なテーマを募集しています。 登壇したい方がいらっしゃれば、VS Code Discordにご参加いただき、ご連絡ください。 【主催】 VS Code Meetup 【諸注意】 登壇の内容やタイムスケジュールは変更となる場合がございます。 当日は写真・動画を撮影し、後にイベントレポート等、メディアで公開させて頂く事がございます。 採用・営業等の目的での参加は禁止致します。 VS Code Meetupへようこそ！ 【VS Code Meetupとは】 強力かつ軽量なオープンソースのコードエディター「Visual Studio Code」のミー
Visual Studio CodeでOpenAPI (Swagger) Editorを使用｜Web制作プラスジャムのなかやすみ
はじめに今回はVisual Studio CodeでOpenAPIを利用する手順を簡単に紹介しようと思います。Swagger Editor（https://editor.swagger.io/）も利用できますが、ローカルで作業してバージョン管理に組み込みたかったのでOpenAPI (Swagger) Editorを導入してみました。 OpenAPIとはOpenAPIはRESTful APIの仕様を記述するフォーマットのことをいいます。YAMLかJSON形式で記述します。 決まったフォーマットなので開発者間で書き方を統一できたり、Excelやドキュメントなどのツールに比べてバージョン管理が楽にできます。 この記事ではVisual Studio Codeに拡張機能を入れてYAML形式で書いていく方法とOpenAPIの基本的な構造を紹介します。 OpenAPIとSwaggerについて OpenA
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
VSCodeのGitHub Copilotが色々便利になっていた件
Playwright+MSW でのリグレッションテスト事始 - enechain Tech Blog
✨️増田でゲームを宣伝したらアクセス数が伸びるのかテスト✨️
フレームワークをやめて 1 から neovim をセットアップしたら理解がとても進んだという話
dotfiles管理をchezmoiに移行する - 肉球でキーボード
『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 』個人的推しポイント
Language Server Protocol from Debug Symbols
Haystack Editorファーストインプレッション - laiso
【新時代の開発環境】Haystack-editorでモニター数をかさ増しする - Qiita
パーサーコンビネータをもっと身近にする | フューチャー技術ブログ
Google CloudのCloud Shellがとても便利なのでおすすめしたい - Qiita
VS Code Meetup #31 (2024/09/30 19:30〜)