Vimで使っている簡単キーマッピングたちを共有
この記事はVim駅伝の2024-09-13の記事です。 前回の記事はryoppippiさんのNeovimで記録したマクロを後から編集するです。 次回の記事はyuys13さんのNeovimのコメンティングプラグインの選び方です。 筆者がVimの設定ファイルに定義しているキーマッピングの中から、簡単に書けるものをいくつか紹介します。 1行書けばVimが便利になるようなものを集めました。 どれも外部プラグインや複雑な関数は必要ありません。 Yで行末までコピー 有名なので既に使っている方も多いとは思いますが紹介。 デフォルトのマッピングでは、以下の機能が割り当てられています。 cc:行全体を編集 C:行末まで編集 dd:行全体をカット D:行末までカット yy:行全体をヤンク Y:行全体をヤンク Yだけちょっとずれているんですよね。そもそもyyと機能が被ってしまっています。 「行末までヤンク」にマ
Go製のTaskでクロス環境タスクランナーを書く方法
えらく、反響があったのでちょっとまとめてみようかなと。 Taskとは？ ドキュメントホーム： リポジトリ： 特徴 タスクランナーやビルドツールとしてのGNU Makeよりもシンプルに記述 シンタックスはYAMLによる宣言的でトリッキーな記述方法を含まない インストール手順はほとんどの環境むけに整備済みで最悪GoとGitさえあれば簡単にインストールできる Makefileの代わりにTaskfile.ymlを書く Goのtext/template機能がプリプロセッサの役割を担っている どういった用途に向いている？ 主にMakefileをタスクランナー代わりに使っていた人向けです 複雑な依存を少ない行数で記述するビルドツールとしてはGNU Makeのほうが優れています GoやRustでは依存解決しつつビルドするツールを自前で持っているのでこれらのタスクランナーとして向いています（が、Rustには
言語環境の管理は *env や *vm を超えて、 mise へ
mise はミーズと読みます。 mise とは *env や *vm が担っていた言語環境(コンパイラ・インタプリタ)のバージョンを管理するツールです。 rbenv や nvm のように単一言語に対するサポートではなく、標準で Go、 Node.js、 Python などの複数の言語に対応しています。 類似のソフトウェアに asdf が存在しますが、 mise はその精神的後継となっています。asdf が shell で書かれていたのに対し、 mise は rust で実装されており、起動速度も asdf と比べて格段に早くなっています。 mise は The front-end to your dev env. と自称しており、上記の言語環境のみならず、アウトオブボックスで使用できる複数の開発向けの機能を提供しているので、本稿で紹介します。 言語環境の用意 mise が提供する言語環境は
Rust on Rails!? Rust 版の Rails と呼ばれる "Loco" を試す！
Rust 版 Rails "Loco" Loco は Rails にインスパイアされた Rust の比較的新しい Web フレームワークです。 2024 年 9 月 1 日時点でバージョン 0.8.0 がリリースされています。 Loco の特徴 タイトルにもある通り、Loco is Rust on Rails. [1] を謳っており、 Ruby on Rails の開発体験の良さを Rust でも再現しようとしています。 また、小さいサービスや個人開発に適したフルスタックフレームワークとして開発されているようです。 内部実装では、コントローラーやルーティングは Axum で実装されていたり、 ActiveRecord は SeaORM で実装されていたりするそうです。[2] Axum や SeaORM については、別の記事で触れているので良ければご覧ください！ Rust | Axum と
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
多段 ssh するなら ProxyCommand じゃなくて ProxyJump を使おう
概要 AWS とかで踏み台ホスト経由（ここでは AWS っぽく bastion と呼ぶ）で ssh する必要があるなら ~/.ssh/config は↓みたいにしとくのが良いんじゃないかな？ Host bastion Hostname bastionのIPアドレス User bastionのユーザ名 # ↓は規定のファイルだったり ssh-agent 使ってれば不要 IdentityFile bastion接続用の秘密鍵ファイル名 # ↓の3つはWindowsでは使えないので諦めて ControlMaster auto ControlPath ~/.ssh/cp-%r@%h:%p ControlPersist 10m Host 好きな接続先名 Hostname 接続先のIPアドレス User 接続先のユーザ名 # ↓は規定のファイルだったり ssh-agent 使ってれば不要 Identi
新たな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
仕組みと嬉しさから理解するeslint FlatConfig対応
重い腰を上げて FlatConfig 対応をした ESLint が新しい設定形式として FlatConfig を導入してから随分と経ち、最新バージョンの v9 では FlatConfig がデフォルトになりました。一方で利用者の多い plugin でもなかなか対応が進まず、周りでは思ったよりも FlatConfig への移行が進んでいない印象を受けます。 とはいえ次のバージョンである v10 では FlatConfig しかサポートしないことが予定されており、今まで移行を見送ってきた方も「さすがにそろそろ移行するか...」と思っているのではないでしょうか。自身の所属チームで管理している ESLint の rule セット : @cybozu/eslint-config でも遅ればせながら FlatConfig 対応を進めています。（現在はアルファ版で提供中です） そんな @cybozu/e
MarkdownベースのGo製タスクランナー「xc」のススメ
Goにおけるタスクランナーの歴史 npmならnpm run、denoならdeno taskなど言語ツールにタスクランナー機能が付属していることがありますが、Goではそのような機能は提供されていません。 そこでGoのプロジェクトではMakefileがタスクランナーとして用いられることがしばしばありますが、独自の文法、.PHONYを大量に書く必要がある、Makefile警察が飛んでくる、などの問題があります。 Makefile警察「ぐぬぬぬ…」 #taskfile - Qiita タスクランナーとしてMakefileを使うことから脱却すべく、巷ではYAMLベースの「Task」やGoベースの「Mage」が用いられている印象です。 どちらも多少試したことはありますが、主に以下の点が気になりました。 Taskfile.ymlやmagefile.goといったツール独自のファイルを置く必要がある これは
React 19によって状態管理はどのように変わるのか
React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js（特にApp Router）においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティスが見えてきます。ですが、実際の開発現場ではApp Routerを採用しているケース以外にもVite+ReactやPages Router, Remixなどと様々な実装があるのが現実です。 そこでこの記事では、特にVite+Reactのスタックを前提にReact19の新機能をいかに活用できるか整理したいと考えています。 また、React19の新機能を見た時にTanStack QueryやSWRのようなサードパーティの状態管理
VHS で楽に Neovim のデモ動画を録る
この記事は Vim 駅伝 の 07/15 の記事です。 前回の記事は staticWagomU さんによる、 06/12 の「mini.nvimを使って環境構築したら優勝した」という記事でした。 次回は 07/17 に投稿される予定です。 はじめに 1ヶ月ほど前に Vim のマイナーなテクニックを紹介する記事を公開し、ありがたいことに非常に多くの方に読んでいただきました。 この記事では特にデモ動画を多く載せることを意識していました。数えてみると8つもの GIF 動画が例に用いられています。Vim を用いた編集のスピート感を視覚的に示すことで、紹介したテクニックの魅力がより効果的に伝わったのではないでしょうか。 元記事の末尾に書いた通り、「中級 Vim 操作」では VHS というコマンドラインツール (CLI) と Neovim、そして nvim-keycastr というプラグインを用いてデ
【T3 Stack】フロントエンド・バックエンドTypescript開発入門
はじめに フロントエンドもバックエンドもTypescriptで書きたい！ということで、T3 Stack（T3スタック）について調べてみました。 T3 Stackを利用したプロジェクトを作成するためのCLIツールcreate-t3-appが用意されており、簡単に雛形プロジェクトが作れるため、実際に使ってみました。 この記事は以下の内容をメインに紹介します。 create-t3-appの環境構築手順 雛形プロジェクトの解説（特にtRPCを用いたAPIの呼び出し方法について） T3 Stackとは T3 Stackとはsimplicity（簡潔さ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）を追求した思想に焦点を当てています。 そしてそれらを実現するために以下6つの技術スタックが採用されています。 ✅ Next.js ✅ tRPC
GraphQL 界の Babel こと Envelop を使ってスキーマの破壊的変更をごまかす
この記事は LayerX のエンジニアブログがたくさん出る #ベッテク月間 の8記事目になります。こちらのカレンダーに、これまでの記事と今後出る予定がまとまっています。 LayerX のバクラク事業部には GraphQL Gateway というバクラク全プロダクトから参照される GraphQL スキーマが存在します[1]。今回の記事は、その GraphQL Gateway のスキーマをより良い状態にしていくためにぶつかった課題を強引に突破したときの話です。 モチベーション GraphQL スキーマの破壊的変更によって GraphQL Document がスキーマに適合しなくなる場合、そのリクエストはエラーになります。例えば以下のようなケースが考えられます： 使わなくなったフィールドを削除したい 削除されたフィールド（存在しないフィールド）を含む Document を処理することはできない
[提案]テーブル名はもう全部単数形にしようや
こんにちは、データベース愛好家のみなさん！今日は、データベース設計で永遠の議論となっている「テーブル名、単数形 vs 複数形問題」について、徹底的に掘り下げていきます。私は単数形派です！でも、なぜそうなのか、一緒に深掘りしていきましょう。 イントロダクション：我らが主人公、単数形くん みなさん、こんな経験ありませんか？ You: テーブル名って、users? user? どっちがいいんだろう... 先輩: いや、絶対usersだよ！Rails使ってるし。 You: でも、user_idって書くときは単数形だよね？ 先輩: あ、そうだね...でもやっぱりテーブルは複数形！ You: （心の中で）なんかモヤモヤする... 実は、この「モヤモヤ」には理由があるんです。今日はその理由を解き明かし、単数形テーブル名の魅力をお伝えします。準備はいいですか？Let's dive in! 言語の壁を突破せ
![[提案]テーブル名はもう全部単数形にしようや](https://cdn-ak-scissors.b.st-hatena.com/image/square/488202253b2a767aee88b454177ed40b86f0fa47/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--WIyVziu_--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B%2525E6%25258F%252590%2525E6%2525A1%252588%25255D%2525E3%252583%252586%2525E3%252583%2525BC%2525E3%252583%252596%2525E3%252583%2525AB%2525E5%252590%25258D%2525E3%252581%2525AF%2525E3%252582%252582%2525E3%252581%252586%2525E5%252585%2525A8%2525E9%252583%2525A8%2525E5%25258D%252598%2525E6%252595%2525B0%2525E5%2525BD%2525A2%2525E3%252581%2525AB%2525E3%252581%252597%2525E3%252582%252588%2525E3%252581%252586%2525E3%252582%252584%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ASakura%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hNbkZBUW9tSkF0bktaeXZVMmRKN3NPTUU4ZE1QbjB0cTNiMkx1bHc9czk2LWM%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Next.jsを使い続けたい好きなトコロ
ムーザルちゃんねるのzaruです。今回はムーさんと、Next.jsを使い続けたい好きなトコロについて話しました。Next.jsが合うか合わないかは、正直プロジェクトとチーム体制や方針に大きく左右されます。僕たちが好きなトコロにピンときた方にはきっと合うと思いますのでぜひさわってみてください。 フロントとバックの境界線がなくなる フロントエンドとバックエンドの境界線がなくなるって、何、なくなるわけないだろ！と思うかもしれません。確かに実際には境界線がなくなるわけではなく隠蔽されているのが実態ではありますが、それによる開発体験の向上がとても好きです。 バックエンドの処理を簡単に実行できる Next.js（実態はReact）のServer Componentを使えば、コンポーネント内でSQLの実行などがそのままできます（以下のコードは例のために直接SQLを書いているので「うぇ？」と思うかもしれま
Vim前線 2024年版
はじめに 本記事はTechFeed Experts Night#32 〜 【VSCode, Vim, Emacs】エンジニア向けエディタ最新動向！の発表資料です。 2024年7月時点までのVim界隈の動きをざっくばらんと紹介していきます。 Vim界隈の雰囲気を感じ取ってもらえたらと思っています。 Bram氏の訃報、そして新たな Vim 開発体制へ Vimの生みの親であるBram氏が2023年8月3日に亡くなりました。 Vimを生み出し、これまでずっとVimの開発を支えてきたBram氏が居なくなり、ぼくも含め多くの悲しい声がありました。 改めて御冥福をお祈りします。 そんな中で、長年Vimの開発に貢献されたmattn氏が「追悼 Bram Moolenaar ～Vimへの情熱と貢献を振り返る」という記事を書かれています。 Vimの歴史やBram氏の人物像、mattn氏との逸話などが書かれていて
ターミナルで画像を表示する Sixel Graphics について
はじめに エンジニアの皆さんの中には、一日のほとんどをターミナルに引きこもって暮らしている方も多いのではないでしょうか? 多くの作業においてターミナルを中心に行うようにすることで、日常作業のほとんどの操作をキーボードで完結することができ、また工夫次第でスクリプティングによって自動化できる範囲も広がるので慣れるととても快適です。 一方、どうしても文字ベースの入出力を中心に発展してきたターミナルは画像の扱いが弱点になります。それでも実は、一部のターミナルでは画像を表示できることはご存じでしょうか? 例えば、libsixel (homebrew) を使うと、img2sixel というコマンドを用いてターミナル中にインラインで画像表示を行うことができます。 img2sixel による画像表示の例 単発の画像表示だけだとなかなか使いどころが限られてしまいますが、工夫次第では画像版 ls ともいえる
暗号化に対応した次世代dotenvツールdotenvxを使う
特に一番最後の暗号化サポートは非常に嬉しい進化です。dotenv単体で環境変数を運用すると、秘匿情報が含まれたdotenvファイル自体の管理に困ることや、デプロイする際にどうやって環境変数を提供するかが課題になることがありました。 現代ではクラウドプラットフォーム上にシークレットマネージャーのような仕組みが用意され、そこで中央管理するというのが一般的になっているかと思います。ただ、それだと変数のバージョン管理やレビューの仕組みを別途用意しないといけなかったりと完全ではありません（個人的主観です）。 dotenvファイル自体が暗号化され、Gitでバージョン管理でき、そのままデプロイして環境変数を適用できたら運用の手間が一気に減ります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsの考え方
