みなさんこんにちは。サンデーです。

今日は、画像圧縮、Git 視覚化、コンポーネント ライブラリの構築、フォント探索という 4 つの重要な開発ツールを紹介します。

01. Squooshで画像の最適化が簡単に

公式サイト：https://squoosh.app/

Squoosh.appは、主に画像のサイズと品質を最適化するために使用されるオープンソースのオンライン画像圧縮ツールです。Google Chrome Labsによって開発され、様々な画像形式と圧縮アルゴリズムをサポートしており、ソフトウェアのインストールを必要とせずにブラウザで直接実行できます。

効果

1. 画像圧縮：Squooshは、JPEG、WebP、PNGなど、様々な圧縮形式をサポートしています。ユーザーはパラメータを調整することで、高画質を維持しながら画像サイズを圧縮できます。
2. 形式変換: Squoosh は、PNG から WebP への変換など、画像をある形式から別の形式に変換することをサポートしています。
3. 画像の最適化: このツールは、色管理、ノイズ低減、切り取り、スケーリングなどの高度な機能を提供し、ユーザーが画像を最適化できるようにします。
4. オフラインでの使用：PWA（プログレッシブウェブアプリケーション）なので、オフラインでも使用できます。

特徴

1. リアルタイム プレビュー: Squoosh はリアルタイム プレビュー機能を提供しており、ユーザーは圧縮結果の前後の比較を即座に表示できます。
2. ドラッグ アンド ドロップ サポート: ユーザーは、画像ファイルをブラウザーにドラッグ アンド ドロップすることで、すぐに圧縮プロセスを開始できます。
3. 複数の圧縮アルゴリズム: MozJPEG、OptiPNG、WebP、AVIF などの複数の圧縮アルゴリズムをサポートしており、ユーザーはニーズに応じて最適なアルゴリズムを選択できます。
4. 完全にローカルで実行: すべての操作はサーバーにアップロードせずにローカル ブラウザーで実行されるため、データのプライバシーが確保されます。

02. SourceTree Git可視化ツール

公式サイト: https://www.sourcetreeapp.com/

写真

Atlassianが開発したSourcetreeは、GitとMercurial用の無料のグラフィカルクライアントで、Gitコマンドを使わずに複雑なGit操作を実行できます。私は長年このツールを使っており、皆さんにもぜひお勧めしたいと思います。

効果

1. バージョン管理: Sourcetree は Git および Mercurial 用のユーザーフレンドリーなインターフェースを提供し、ユーザーがコミット、プッシュ、プル、マージ、ブランチ管理などの一般的なバージョン管理タスクを簡単に実行できるようにします。
2. 視覚的な操作: 直感的なビジュアル インターフェイスを提供し、ブランチ構造、コミット履歴、変更の比較などの情報をユーザーが表示して理解できるようにします。
3. リモート リポジトリ管理: さまざまなリモート コード ホスティング サービス (GitHub、Bitbucket、GitLab など) との統合をサポートし、ユーザーは Sourcetree から直接リモート リポジトリを管理および同期できます。
4. コードの比較とマージ: ファイルの比較およびマージ ツールを統合して、ユーザーがコードの競合をより簡単に処理し、コードの違いを表示できるようにします。

特徴

1. ユーザーフレンドリーなグラフィカル インターフェース: コマンドラインと比較して、Sourcetree の GUI はより直感的で、Git コマンドに慣れていないユーザーに特に適しています。
2. 複数のリポジトリ管理をサポート: Sourcetree を使用すると、ユーザーは複数の Git または Mercurial リポジトリを同時に管理できるため、異なるプロジェクト間の切り替えや操作が容易になります。
3. 強力なブランチ管理: 詳細なブランチ管理機能を提供し、ユーザーはブランチ トポロジを表示しながら、ブランチを簡単に作成、切り替え、マージ、削除できます。
4. 組み込みターミナル: Sourcetree は主に GUI ツールですが、組み込みターミナル ウィンドウも提供しており、上級ユーザーは Git コマンドを直接入力できます。
5. 豊富なログと履歴の表示: ユーザーは、Sourcetree を通じてコミット履歴、ログ、ファイル変更記録などを簡単に表示でき、時間、ブランチ、タグなどの複数のディメンションによるフィルタリングをサポートします。

03. Storybook: コンポーネントライブラリを簡単に構築

公式サイト: https://storybook.js.org/

写真

Storybookは、UIコンポーネントの開発とテストのためのオープンソースツールです。アプリケーション自体に依存せずにコンポーネントを構築、表示、テストできるスタンドアロンの開発環境を提供します。

効果

1. 独立した UI コンポーネント開発: Storybook は、開発者がアプリケーション全体のコンテキストに依存することなく、独立して UI コンポーネントを開発およびテストできる分離された環境を提供します。
2. コンポーネントのドキュメント: Storybook はコンポーネントのドキュメントを自動的に生成し、チーム メンバーが各コンポーネントの目的、プロパティ、状態、動作を簡単に理解できるようにします。
3. テストとデモンストレーション: 開発者は、Storybook でコンポーネントのさまざまな状態をリアルタイムでプレビューおよびテストし、さまざまなシナリオで適切に機能することを確認できます。
4. デザイン システム管理: Storybook は、コンポーネント ライブラリの整理と管理をサポートし、それらをデザイン システムの一部にして、チーム間で簡単に共有および再利用できるようにします。

特徴

1. 複数のフロントエンド フレームワークをサポート: Storybook は、React、Vue、Angular、Svelte、Web コンポーネントなどの複数のフロントエンド テクノロジーをサポートしています。
2. ライブ プレビュー: Storybook は即時のライブ プレビュー機能を提供しており、開発者はアプリケーション全体を再ロードすることなく、コンポーネントの変更をリアルタイムで確認できます。
3. 高い拡張性: プラグインを通じて Storybook を拡張し、アクセシビリティ チェック、パフォーマンス テスト、スタイル ガイドなどのさまざまな機能をサポートできます。
4. 自動ドキュメント生成: Storybook は、TypeScript 型、PropTypes、その他のコメントをサポートし、コンポーネント コードからドキュメントを自動的に生成できます。
5. インタラクティブな表示: 開発者は、さまざまな「ストーリー」(シーン) をコンポーネントに追加して、さまざまな状態でのコンポーネントの動作を示すことができます。

使用例

1. まず、特定の Vue3 または React プロジェクトを作成します。
2. プロジェクトのルート ディレクトリで次のコマンドを実行します。

 pnpm dlx storybook@latest init 

3. 例として、Vue を使用して Button コンポーネントを作成しましょう。

 <!-- src/components/Button.vue --> <template> <button @click="onClick"> {{ label }} </button> </template> <script> export default { name: 'Button', props: { label: { type: String, required: true }, onClick: { type: Function, default: () => {} } } } </script> <style scoped> button { padding: 10px 20px; border: none; background-color: #42b983; color: white; font-size: 16px; cursor: pointer; } button:hover { background-color: #369f7a; } </style> 

4. 対応するストーリー（ドキュメントファイル）を作成します - Button.stories.js

 // src/components/Button.stories.js import Button from './Button.vue' export default { title: 'Button', component: Button } const Template = (args) => ({ components: { Button }, setup() { return { args } }, template: '<Button v-bind="args" />' }) export const Primary = Template.bind({}) Primary.args = { label: 'Primary 按钮' } export const Secondary = Template.bind({}) Secondary.args = { label: 'Secondary 按钮' } 

5. 最後に、次のコマンドを実行して Storybook を起動します。

 npm run storybook

04. WhatFontフォントビューア

プラグインのアドレス: https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

写真

WhatFontは、ウェブページ上のフォントを識別するツールです。ユーザーはウェブページで使用されているフォントの種類を素早く把握できます。ChromeやSafariなど、多くの主要ブラウザに対応したブラウザ拡張機能です。

効果

1. フォント認識: WhatFont は、フォント名、フォント ファミリ、フォント サイズ、行の高さ、その他の属性など、Web ページで使用されているフォントを識別できます。
2. クイック ビュー: ユーザーは、Web ページ上のフォントを直接クリックして、ページのソース コードやスタイル シートを表示することなく、フォントの詳細情報を簡単に表示できます。
3. デザイン支援: WhatFont は、Web デザイナーや開発者が Web ページで使用されているフォントを識別し、独自のプロジェクトで同じフォントまたは類似のフォントを使用できるようにするための便利なツールです。

特徴

1. 使い方は簡単：WhatFontは非常にシンプルです。拡張機能をインストールして有効化し、ウェブページ上のテキストをクリックするだけでフォント情報が表示されます。
2. リアルタイム プレビュー: このプラグインを使用すると、Web ページ上の選択したテキストのフォント情報をリアルタイムでプレビューできるため、フォントの認識がより直感的になります。
3. 複数のブラウザをサポート: WhatFont は、さまざまなユーザー グループのニーズを満たすために、Chrome や Safari などの主流のブラウザ向けの拡張バージョンを提供します。
4. 詳細なフォント情報: フォント名に加えて、WhatFont はフォント サイズ、フォントの太さ、行の高さなどの他のフォント属性も表示し、豊富なフォント情報を提供します。
5. 高い適応性: WhatFont は、Google Fonts や Adob​​e Fonts のフォントを含む一般的なフォント ファイルの種類を認識できます。