Resource - フロントエンドエンジニア向け

無駄を省いた軽量でミニマルなオープンソースのオンラインブックマーク・「webtag」

webtagは無駄を省いた軽量でミニマルなオープンソースのオンラインブックマークWebアプリです。一切画像や装飾のないプレーンテキストベースのブックマークとなっており、動作も軽量、UIもシンプルで機能も最低限とミニマルスタイルでノイズのないブックマークアプリとなっています。

セルフホスティング可能なアプリケーションのみをコレクションしているディレクトリサイト・「Self-Hosted Software List」

Self-Hosted Software Listはセルフホスティング可能なアプリケーションのみをコレクションしているディレクトリサイトです。セルフホスティングが可能なアプリケーションのみをコレクションしているディレクトリサイトで、細かなカテゴリに分けられ、目的に合わせて探せるようになっています。

WebサイトのスクショやFigma、ワイヤーフレーム画像などを元にTailwindベースで自動コード生成、更にプロンプトで調整も可能なオープンソースのフロントエンド開発向けAI Copilot・「WebCrumbs」

WebCrumbsはWebサイトのスクショやFigma、ワイヤーフレーム画像などを元にTailwindベースで自動コード生成、更にプロンプトで調整も可能なオープンソースのフロントエンド開発向けAI Copilotです。任意の画像に合わせて自動でコーディングしてくれる、というもの。
Ads

ReactやNext.js向けに作られたコピペ可能なオープンソースのTailwindベースランディングページコンポーネント・「Page UI」

Page UIはReactやNext.js向けに作られたコピペ可能なオープンソースのTailwindベースランディングページコンポーネントです。Reactアプリ等でLPを頻繁に作成、更新する際に重宝しそうです。

各フレームワークもサポートの、生成AIが使えるオープンソースのリッチテキストエディター・「AIEditor」

AIEditorは各フレームワークもサポートの、生成AIが使えるオープンソースのリッチテキストエディターです。すぐに使えて、フレームワーク完全対応、Markdownフレンドリーなエディターとして提供されています。

任意のコードをペーストしてシンタックスハイライトで見やすくスタイリングしたHTMLに変換してくれるWebアプリ・「SnippetEase」

SnippetEase任意のコードをペーストしてシンタックスハイライトで見やすくスタイリングしたHTMLに変換してくれるWebアプリです。従来の様にJavaScriptを読み込んで整形するのではなく、言語とテーマを選択して整形したいコードを貼れば、HTMLとCSSのコードを排出してくれるのでブログ等に貼り付ければいいだけです。

ステップ型のフォームをノーコードで作成出来るオープンソースのフォームビルダーWebアプリ・「HeyForm」

HeyFormはステップ型のフォームをノーコードで作成出来るオープンソースのフォームビルダーWebアプリです。入力項目が全て最初から表示されている一般的なフォームではなく、項目ごとに進んでいく、みたいなフォームをノーコードで作成出来る、というものになります。

コピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクション・「Animata」

Animataはコピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクションです。タイトル通りで、既存のReactアプリ等にコピペでアニメーションコンテンツを追加可能なコンポーネントを手作業でコレクション化したそうです。

水平タイプのタイムラインを手軽に作成出来るjQuery.Timelineの機能を継承し、TypeScriptで設計し直したタイムラインライブラリ・「Sunorhc.Timeline」

Sunorhc.Timelineは水平タイプのタイムラインを手軽に作成出来るjQuery.Timelineの機能を継承し、TypeScriptで設計し直したタイムラインライブラリです。代替ではなく後継版として設計してるそうです。

インタラクティブなマップ作成のためのLeaflet用Svelteコンポーネントライブラリ・「Sveaflet」

Sveafletはインタラクティブなマップ作成のためのLeaflet用Svelteコンポーネントライブラリです。Svelteフレームワークで人気のマップライブラリであるLeaflet.jsを使えるようにします。

TodoistのUIクローンとして開発されたAI搭載のオープンソースのTodoアプリ・「TodoVex」

TodoVexはAI搭載のオープンソースのTodoistクローンです。タスクの自動整理やチーム利用対応(Todoistの有償プラン)、自然言語認識などの独自機能まで同等と言う訳ではなく、基本的にはUIのクローンとなっていますが、Todoistでは有償プラン枠で使える生成AIが基本機能として導入されている、というものになります。

柔軟性と拡張性を重視したクロスプラットフォーム対応のシンプルなオープンソースWYSIWYGエディター・「Quill」

Quillは柔軟性と拡張性を重視したクロスプラットフォーム対応のシンプルなオープンソースWYSIWYGエディターです。小規模プロジェクトから大規模なアプリ等まで対応可能、ニーズに合わせてカスタマイズできるシンプルなAPIを提供する開発者に優しい設計となっています。

Flutterライクな構文で書けるオープンソースのデータ視覚化JavaScriptライブラリ・「Flitter」

FlitterはFlutterライクな構文で書けるオープンソースのデータ視覚化JavaScriptライブラリです。Flutterを使い慣れている方に開発エクスペリエンスを提供する目的で開発されています。GoogleはFlutter APIを美しく且つ効率的な設計がなされており、このFlutter APIをコピーする事で、少ない労力でデータ視覚化を実現できると考えて開発されています。

任意のキーワードを元にAIがGithubから検索してくれるコード検索エンジン・「Code Finder」

Code Finderは任意のキーワードを元にAIがGithubから検索してくれるコード検索エンジンです。特別な機能や便利な設定等は用意されておらず、単純に探したいOSSやコードスニペットをを探すコード検索エンジンとなっています。

CRUD操作やソート、エクスポートなどの管理が可能なWebアプリ向けの動的テーブルライブラリ・「TeaTable」

TeaTableはCRUD操作やソート、エクスポートなどの管理が可能なWebアプリ向けの動的テーブルJavaScriptライブラリです。データを追加するだけで、読み取り、作成、更新、削除などのCRUD操作が可能な他、ソートや検索、フルスクリーン表示、CSVエクスポート、ページ分割などもサポートされており、RWDにも対応しています。

高度なカスタマイズも可能なオープンソースのReact向けデータビジュアライゼーションコンポーネントのコレクション・「reaviz」

reavizは高度なカスタマイズも可能なオープンソースのReact向けデータビジュアライゼーションコンポーネントのコレクションです。完成されたデザインで提供されており、d3.jsとFramer Motionによるスムーズなアニメーションを使ってデータ可視化の表現幅を広げます。

タスク管理やプロジェクトのプランニング、チャットなどが1つに詰められたオープンソースのオールインワンプロジェクト管理プラットフォーム・「Huly」

Hulyはタスク管理やプロジェクトのプランニング、チャットなどが1つに詰められたオープンソースのオールインワンプロジェクト管理プラットフォームです。開発者とチームのために作られたタスク・プロジェクト・時間の管理ソリューションとして開発されました。コーダーやプログラマー、PM、デザイナー等、Hulyはチームにおけるワークフローを最適化し、生産性を向上させてくれます。

シンプルで軽量且つパワフルなtextarea用のシンタックスハイライトJavaScriptライブラリ・「SimpleSyntaxJs」

SimpleSyntaxJsはシンプルで軽量且つパワフルなtextarea用のシンタックスハイライトJavaScriptライブラリです。テキストエリアでコードのシンタックスハイライトを可能にする、というJSライブラリで、非依存、軽量でシンプルに使えるよう設計されています。

shadcn/ui互換の、コピー&ペーストで使えるオープンソースのReactアプリ用コンポーネント・「cult/ui」

cult/uiはshadcn/ui互換の、コピー&ペーストで使えるオープンソースのReactアプリ用コンポーネントです。コンポーネントのデザインは、実装とは切り離して考えるべき、という考えから、ライブラリ等のようにインストールせずコードをコピペして利用するコンポーネントのコレクションとして提供されています。

ChatGPTでAIが回答したHTML/CSS/JavaScriptのコードを直接チャット内にCodepenで動作確認できるようにするオープンソースのブラウザ拡張・「ChatGPT Web Preview」

ChatGPT Web PreviewはChatGPTでAIが回答したHTML/CSS/JavaScriptのコードを直接チャット内にCodepenで動作確認できるようにするオープンソースのブラウザ拡張です。上SSのようにコードが返されると同時に結果がプレビューされています。

自分の日々の思考やアイデア、出来事などを記録するためのオープンソースの日記アプリ・「Papery」

Paperyは自分の日々の思考やアイデア、出来事などを記録するためのオープンソースの日記アプリです。Webアプリとして提供されている、いわゆるブログ(Web log)ですが誰かに見せる前提でデザインされていない感じで基本的には自分のための記録アプリです。

Next.jsアプリ用に設計されたオープンソースの動的SVG管理パッケージ・「svgMagic」

svgMagic svgMagicはNext.jsアプリ用に設計されたオープンソースの動的SVG管理パッケージです。1回のインストール、1行のコード、1回のインポートのみでSVGファイルにおける作業を大幅に軽減できる、というものになり...
Ads