サイト構築 -JavaScript

ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition

Post on:2019年10月17日

日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I crea

...記事の続きを読む

ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable

Post on:2019年10月16日

ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, V

...記事の続きを読む

スクロールしてビューポートに要素が入る際に、アニメーションを適用するReactコンポーネント「react-genie」

Post on:2019年10月8日

スクロールしてビューポートに要素が入る際に、さまざまなアニメーションを適用するためのReactコンポーネントを紹介します。Appleのプロダクトページなどで見かけるようなアニメーションが揃っています。 react-gen

...記事の続きを読む

これでもう、グラデーションにできてしまう濃淡の縞に困らない!バンディングをおさえるJavaScriptライブラリ

Post on:2019年9月17日

制作時の最適なモニターや最適な照明環境で美しいグラデーションを作成しても、ビジターの環境ではバンディングと呼ばれる濃淡の縞ができてしまうかもしれません。 Webページの背景などに使用するグラデーションにできてしまうバンデ

...記事の続きを読む

Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap

Post on:2019年8月28日

Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。 pagemap pagemap -GitHub

JavaScriptのモダンなコードとレガシーなコードを適切なブラウザに提供する方法

Post on:2019年8月6日

JavaScriptのモダンなコードとレガシーなコード、適切なコードを適切なブラウザに提供する方法を紹介します。特に、Edge, Safariあたりは注意が必要です。 Modern Script Loading by J

...記事の続きを読む

パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll

Post on:2019年7月24日

Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使っ

...記事の続きを読む

タッチデバイスも完全サポート!さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider

Post on:2019年7月17日

デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作

...記事の続きを読む

遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js

Post on:2019年7月4日

画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要

...記事の続きを読む

この発想はすごい!アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js

Post on:2019年6月26日

アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーション

...記事の続きを読む

top of page

©2019 coliss