こんにちは、マイクです！今日は2024年12月6日、金曜日ですね。今日も「zenncast」へようこそ！今日はZennでトレンドの記事をいくつか紹介していきますよ。
さて、前回紹介した記事は「ブラウザ上でヌルヌル動作する流体シミュレーションを Rust + wasm-bindgen-rayon で実装する」「vLLMで独自実装モデルを高速推論させる」「【Rails】Sorceryがサポート終了しているって本当？」といった内容でした。気になる方はぜひチェックしてみてくださいね。
それでは、今日の紹介する記事の本数をお伝えします。今日は全部で5本の記事を紹介します！
まずは1つ目の記事です。タイトルは「モテるGit管理 (gh, ghq, git-cz, lazygit)」です。この内容では、エンジニアがGitをスマートに管理するためのツールとその使用法について説明しています。具体的には、GitHub CLIの`gh`、ローカルリポジトリ管理ツールの`ghq`、コミットメッセージを整形する`git-cz`、そしてGit管理を簡素化する`lazygit`の4つのツールを紹介しています。
まず、`gh`を使ってターミナルから直接GitHubリポジトリを作成し、`ghq`でそのリポジトリをローカルにクローンします。これでディレクトリの移動や管理が簡単に！次に、`git-cz`でコミットメッセージを標準化して、美しく整えることができますよ。プロジェクトごとに異なるプレフィックスを設定でき、絵文字を使ったコミットメッセージも作成可能です。
さらに、`lazygit`はTUIツールとしてGitの操作を視覚的に行えるので、ファイルのステージングやコミット、プッシュが直感的に行えます。プロジェクトルートに素早く戻るためのエイリアス設定や、直前のディレクトリに戻る方法も紹介されており、Gitでの作業がより快適で効率的になることが期待されます。
次に2つ目の記事です。タイトルは「長い処理には通知音コマンドを仕込んでおくと捗るぞ」です。この内容では、開発中にコマンドの実行待ち時間が長いと、作業に集中できなかったり、処理完了に気づかず無駄に時間を過ごしてしまうことがある問題を解決する方法を紹介しています。
著者はMac環境での実装方法を提案していて、`afplay`コマンドを使って音を再生する方法を説明しています。音声ファイルを使って、コマンドの末尾に`; beep`を追加することで、処理完了時に音を鳴らせる設定が可能です。さらに、音が短すぎて聞き逃す場合には、ループして音を鳴らすこともできるんですよ！
また、`Ctrl-Z`で一時停止し、`fg`や`bg`コマンドで再開させることで音を鳴らす設定も追加できるとのこと。著者はゼルダの音楽を使った独自の音声通知コマンドを設定していて、作業完了時にテンションが上がると述べています。このように、通知音を設定することで長い処理の待ち時間を有効活用し、効率的な開発が実現できるんです。
。.
。.
それでは、3つ目の記事に進みます！タイトルは「import / exportの記法だけではない、CommonJS modulesとES modulesの違い」です。2024年にNode.jsがCommonJS modulesからES modulesを利用できるようになったことがテーマです。
この内容では、CommonJSの`require`を使ってES modulesを読み込むことができるようになったという点がポイントですね。ES modulesは`.mjs`拡張子や`package.json`に`type: "module"`が指定されたファイルとして扱われ、CommonJSは`.cjs`拡張子やデフォルトの`.js`ファイルとして扱われます。
主な違いは文法の違いで、ES modulesでは`import`や`export`が使われ、CommonJSでは`require`と`module.exports`が利用されます。Node.jsでは、互いのモジュールを読み込む際に構文の違いによる問題は発生しないため、安心して使えるようになりました。
さらに、ES modules内で非Strict modeのコードを実行する方法も存在するとのこと。Node.jsにおけるモジュール管理がより柔軟に行えるようになったことを知っておくと良さそうです。
。.
。.
続いて4つ目の記事です。タイトルは「DataGridを実装して感じたTanStack Tableに対する所感」です。この内容では、著者が株式会社カオナビのデザインシステム「sugao」に新たに実装したDataGridコンポーネントと、その内部で使用したTanStack Tableライブラリに関する考察が述べられています。
DataGridは複雑なテーブル表示を行うためのコンポーネントで、TanStack Tableはヘッドレスなライブラリであるため、CSSスタイリングは利用者が行う必要があります。著者はサードパーティライブラリへの依存を減らすために「腐敗防止層」の考え方を取り入れ、自前の型定義を行っています。
DataGridはデータと列の定義をプロパティとして受け取り、内部でレンダリング処理を隠蔽します。著者はTanStack Tableのアクセサ列を使用せず、データのソートやフィルタリングをユーザー側で事前に行うことを選択しました。このように、著者はTanStack Tableの機能の中で利用しているのは主に列のリサイズ機能で、他の機能は自前実装が可能であると述べています。
。.
。.
最後に5つ目の記事です。タイトルは「DuckDB-Wasm を利用したブラウザでのログ解析機能」です。DuckDB-Wasmを活用したブラウザ上でのログ解析機能について、時雨堂が提供する管理者用ダッシュボードの実装を紹介しています。
DuckDBとはデータベースシステムで、Wasmを利用することでクライアント側のリソースを活用し、オフラインでもログデータを処理可能にしています。具体的な流れとしては、JSON Lines形式のログが保存され、ダッシュボードで解析したいログを選択し、DuckDBでParquetファイルを生成、そのファイルをオブジェクトストレージに保存します。
ユーザーはSQLエディターを使って、オフラインで自由にSQLを実行でき、SQLインジェクションの心配もありません。DuckDB-Wasmは、ログ解析を簡単に行える画期的なツールとして期待されています。将来的には商用サービスのダッシュボードにもこの機能を展開する予定とのことで、楽しみですね。
さて、今日は5つの記事を紹介しましたね！内容を駆け足でおさらいしますと、Git管理をスマートにするツール、長い処理での通知音設定、CommonJSとES modulesの違い、DataGridの実装とTanStack Table、そしてDuckDB-Wasmを使ったログ解析機能についてお話ししました。
次回も楽しみにしていますので、ぜひまた遊びに来てくださいね！詳しい内容はショーノートに書いてありますので、そちらもチェックしてください！番組の感想もお待ちしています。それでは、またお会いしましょう！