タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」
Slip.js See the Pen ZZRmaP by kachibito (@kachibito) on CodePen. Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシ...
Resource - JavaScript
SVGベースのモダンなカラーピッカーを実装する非依存の軽量JavaScriptライブラリ・「iro.js」
iro.js See the Pen iro.js demo by James Daniel (@rakujira) on CodePen. iro.jsはSVGで作られたモダンなスタイルのサークルタイプカラーピッ...
jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」
Editor EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表...
無料且つ登録も不要でJavaScriptをコードを書きながら学べる・「CodeGuppy」
CodeGuppy CodeGuppyは無料でユーザー登録も不要のJavaScript学習サービスです。コードを実際に書きながら学ぶことができます。子供から大人まで学べる、をモットーに作られているそうなので頭に入りやすいかもしれません...
JavaScript製のオープンソースなガントチャートライブラリ・「Frappe Gantt」
Frappe Gantt Frappe GanttはJS製のOSSなガントチャートライブラリです。サンプルのスケジューラーではタイムスケールはドラッグでチャートの移動や伸縮が可能で、クリックで詳細が表示されるようになっています。UIは...
CMSやフレームワークとの統合を目的としたブロックベースのコンテンツエディタ・「Hyper Editor」
Hyper Editor Hyper EditorはCMSや各フレームワークとの統合を目的としたブロックベースのコンテンツエディタです。JS製で、バックエンドに依存しないのが特徴だそうです。JS製のエディタである事で、一方のCMSでは...
ブロックレベルで編集できるオープンソースのリッチテキストエディタ・「Editor.js」
Editor.js Editor.jsはブロックスタイルのリッチテキストエディタです。個人的に身近なもので言うとWordPressのGutenbergなんですが、WP使わない方だとピンとこない説明かもですね。ごめんなさい。画像やテキス...
InstagramやYoutube、Twitchなどの動画や画像をダウンロードできるOSS・「SocialSnapper」
SocialSnapper SocialSnapperはInstagramやYoutube、Twitch、Radditなどに投稿された動画や画像などをURL指定していしてダウンロードできるWebアプリです。OSSとしてソースコードも公...
Bootstrap 4とreact.jsベースのオープンソースなダッシュボードフレームワーク・「Vibe」
Vibe Vibeはオープンソースとして公開されてる、Bootstrap 4とreact.jsベースの管理画面構築フレームワークです。よく必要とされるUIコンポーネントやサンプルアプリ、テンプレートが同梱されており、管理画面開発をサポ...
オープンソースのアバターイラスト作成ジェネレーター・「Avataaars Generator」
Avataaars Generator Avataaars Generatorはオープンソースのアバターイラスト作成ジェネレーターです。なんとなくよく利用されてるっぽいスタイルのアバターイラストを作成し、ダウンロードできる、というもの...
スクロールに応じて要素にアニメーションエフェクトを付与できるシンプルで軽量なスクリプト・「lax.js」
lax.js lax.jsはスクロールに応じて要素にアニメーションを付与させる軽量スクリプトです。圧縮版で2kbほど、非圧縮でも8kbほどで依存性もありません。基本的にはスクリプトを読み込んで初期化、カスタムデータ属性で設定するだけの...
座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上でその経路をアニメーション表示してくれるスクリプト・「maps-journey-replay」
maps-journey-replay maps-journey-replayは座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上に経路をアニメーション表示してくれるスクリプトです。説明下手なせいでピンとこないかも...
jQueryライクな構文でDOM操作を行うために開発された超軽量ライブラリ・「femtoJS」
femtoJS femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き...
Webページに訪問したユーザーのマウスの動きを再現するスクリプト・「viewRecorder」
viewRecorder viewRecorderはWebサイトでユーザーが動かしたマウスの動きを記録、再現するスクリプトです。jQueryに依存しています。以前ご紹介したrrwebと少し似ていますがもう少しシンプルで導入ハードルも低...
JavaScriptで配列のメソッドを対話式に調べられる・「JavaScript Array Explorer」
JavaScript Array Explorer JavaScript Array ExplorerはJavaScriptにおける配列のメソッドを対話式に調べられるOSSです。以前ご紹介したGit ExplorerのJavaScri...
JavaScriptでロングタップイベントを実装する・「long-press-event」
long-press-event long-press-eventはスマホ等の長押しイベントを実装するJSライブラリです。シンプルな作りで、非常に軽量で非依存型となっています。要素を長押しすると、data-editing="tru...
オープンソースで公開されている、大量のコンポーネントを含んだBootstrapベースの管理画面テンプレート・「STISLA」
STISLA STISLAはオープンソースのBootstrapベースの管理画面テンプレートです。大量のコンポーネントを含んでおり、ほとんどの需要に応えられるようになっています。また、インタラクティブなチャートやデータテーブルなどの為の...
モジュール式のモダンなフロントエンドコンポーネントライブラリ・「Undernet」
Undernet Undernetはモジュール式のフロントエンドコンポーネントライブラリです。CSSの記述を極力削減し、必要な箇所はJSを使い、一般的なUIパターンを使用する事で開発者のエクスペリエンスを簡素化することを目的としたそう...
Vue.jsベースのinstagramクローン・「Vuestagram」
Vuestagram VuestagramはVue.jsをベースにして作られたinstagramクローンです。クローンと言っても完全再現ではありませんが、写真にフィルター、アップロード、Like等、instagramの中心的な機能は備...
スマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプト・「Shiny」
Shiny Shinyはスマフォ等の傾きに応じてコンテンツに反射効果を付与するスクリプトです。モバイルデバイスで加速度センサーの値を取得し、コンテンツにリフレクションエフェクトを付与する、というもの。上gifはデスクトップブラウザのシ...
オープンソースのコラボレーションメモツール・「wolkenkit-boards」
wolkenkit-boards wolkenkit-boardsはオープンソースのコラボレーションメモツールです。複数ユーザー間で付箋ライクなメモコンテンツを共同管理できる、というもの。UIは少し異なりますがTrelloライクな使い...
three.jsよりも軽量なJavaScript 3Dライブラリ・「Shree.js」
Shree.js Shree.jsは3D描画ライブラリの代表ともいえるthree.jsよりも軽量な3Dライブラリです。豊かな機能性の代償にサイズが大きくなりがちですが、もう少し機能を抑えても良いので軽くしてほしい、というニーズは少なく...