はてなブックマーク

{ "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false, } この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。 以下は、この記事で紹介する拡張機能のカテゴリ一覧です。 設定ファイル関連(Yaml, Json, Toml) Git関連 Markdown関連 カラー系 API関連 コンテナ その他便利な拡張機能 ネタ系 設定ファイル関連(Yaml, Json, Toml) 特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。 Prettier esbenp.prettier-vscode jsonだけの設定では、VSCodeの設定ファイ

はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s

Warpとは Rust製のTerminal代替アプリ。現状、Macのみ対応となる。(Windows, Linuxは対応中) 軽くて、高速。そして、AIが搭載されている。個人利用/5人以下のチームの場合は、無料で使用可能。 Warpの特徴 Warp AI Warp内で簡単に生成AIを使用することができる。 プロンプト入力時に#を入力すると使用できる。 カスタマイズが楽 いちいちスクリプトを触らんなくても、設定で見た目のカスタマイズができる。 テーマやフォントもデフォルトで複数入っている。 補完機能が優秀 ディレクトリ名などの補完機能はもちろん、git pushした後にPRの作成画面をopenするコマンドまで予測してくれるのが、便利すぎる。 Warp Drive Warp Drive は、コマンドをワークフローとして安全に保存および共有できる機能。 以下のようによく使うコマンドをワークフローと

shadcn/uiとは shadcn/uiとは、これは Radix UIとTailwind CSSを使って書かれた UI コンポーネントをまとめたもので、TailwindCSS を通じてスタイルをカスタマイズできる。2023 JavaScript Rising Starsでは、全Projectで見事ランキング1位に輝いた!! shadcn/uiは、柔軟性 と カスタマイズ性 が高く、必要なコンポーネントだけを選択し、カスタマイズできる。また、通常のコンポーネントライブラリとは異なり、npmパッケージとして配布されていないので、npmの依存関係に影響しない。コンポーネントのコードはCLIでダウンロードする。 インストール この記事では、Next.jsの場合を紹介する。Viteなど他のフレームワークのインストール方法はInstallationを参照。 # npx create-next-app

HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui)　似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogle

Go言語ライブラリ15選 Golangのおすすめのライブラリを15個(+おまけ1個)紹介します。ライブラリの特徴、インストール方法、使い方を徹底解説していきます。 cmp テストで等価性を調べるために使うライブラリ。reflect.DeepEqualははオブジェクトが完全一致していないと false になるが、cmp を使うとスライスの順番を無視できたり、一部のフィールドを比較対象から除外したり、様々なオプションを追加することができる。また、diffで差分を出すこともできる。 package main import ( "fmt" "reflect" "github.com/google/go-cmp/cmp" "github.com/google/go-cmp/cmp/cmpopts" ) func main() { slice1 := []int{1, 2, 3} slice2 :=

DataTablesとは DataTablesは、HTMLテーブルを対話的なデータグリッドに変換するためのJavaScriptライブラリ。 簡単に言い換えると、HTMLテーブルをソートや検索などがおこなえる高機能な表にできるということ。 拡張性 や 柔軟性 が高く、また大規模なデータを持つテーブルを操作するのにとても便利である。 導入 下記のリンクから自分の環境に合ったやり方でダウンロードしよう。また、基本的に　jQuery は必須である。 最もシンプルな例 とりあえず簡単な実装例を挙げてみる。 ここでは理解できなくてもOK！ See the Pen DataTables by Tomoki Ota (@odlqzyes-the-sans) on CodePen. 使い方 これからDataTablesの使い方を説明していく。 最初は以下のcssとjsファイルだけでOK! (CDN以外の書き