「slick」の使い方とオプションによるカスタマイズ
かつて世界一使いやすいと言われた、有名な画像スライダープラグイン「bxSlider」を超えるスライダーとして、まことしやかに「最強スライダー説」が囁かれている、かゆい所に手が届く万能スライダー「slick（スリック）」 その使い方とオプションによるカスタマイズ方法に加え、レスポンシブの設定方法や、サムネイルとの連携、さらにslickのバグの対処法をまとめた。 流行りの脱jQuery仕様でオプションがめちゃ多い「Swiper.js」もオススメ！ また、slickを超えて人気急上昇、フロントエンジニアなら知らない人はいない、オプションがメチャクチャ多くて流行りの脱jQuery仕様なスライダー「swiper」の使い方を知りたい方はこちら↓
jQueryのイベントをアロー関数で | CodeCode
webページの制作が多いとやっぱりまだjQueryを使う機会が多くなってきます。 jQueryもJavaScriptのライブラリなので、当然ES2015+の恩恵にあずかれます。 今回はjQueryのイベントの関数をアロー関数に置き換えてみます。 アロー関数とは ES2015から利用可能になったJavaScriptの新しい構文です。 //従来の関数 function(引数){本体} //アロー関数 (引数) => {本体} //引数が1つの場合は()を省略できる。 x => {本体} //関数本体が1行の場合は{}が省略できる x => alert(x) //引数がない場合は()は省略できません () => {本体} イベントの書き換え 従来のクリックイベント $('#btn').on('click', function(){ $(this).css('color', '#f00') })
JavaScript: フレームワーク React/Vue/Angularについて
フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの要素(DOM)をデータと関連づけて(データバインディング)、データの変化に応じた動的なページ構成を行います。 DOMの操作には、かつてはjQueryが用いられました(今だに、使われていることは少なくはないでしょう)。けれど、モダンブラウザが対応するECMAScript 2015(ECMAScript 6)以降でしたら、標準JavaScriptでもDOMの操作は難しくありません。 動的にページを構成するコンテンツの典型は、シングルページアプリケーション(S
脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
jQueryの.on()で使えるイベントの種類と記述例 | 2690
2013.2.11 jQueryを使う時に.on()``を使うことが当たり前になっています。``.click``や``.hoverなどの単体機能よりカスタマイズしやすい事がその理由です。 で、.on()にはイベントが沢山ありますので、そのイベントをまとめておこうと思います。 2018.8更新 アクセスが多かったので、イベントを見やすく表形式にしました。 イベントとは？ .on()で使う実行の種類です。以下の★の箇所に入ります。 $(function(){ $('.element').on('★', function(){ //ここに★に対応した処理を記述 }); });
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
preventDefault()で無効にしたイベントを有効にする方法
preventDefault()で無効にしたイベントを有効にする方法を紹介します。 １．はじめに preventDefault()は、「preventDefault()について」で紹介したとおり、実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッドです。 が、preventDefault()でイベントキャンセルしたあと、再びイベントを有効にする方法が分かりません。 ということで、preventDefault()で無効にしたイベントを有効にする方法について紹介します。 ２．jQueryを使ってpreventDefault()で無効にしたリンクを有効にする ここではa要素を使って、preventDefault()で無効にしたリンク先への遷移を再び有効にするサンプルを用います。 jQueryでは、preventDefault()メソッドをon()とoff()と組み合
jQuery Validation 簡単にフォームをチェック バリデーション
タグ 放火EC-CUBEアンチウィルスGitAnsibleConoHa VlanWindows ServerLaravel海外求人貧困教育バグトラッキングDrupalLarabelgoofysRTX1200躾お土産インストール予防接種Active DirectoryベンチマークVagrantゆるいハッキングRedisLogstashジェネリック、コピー無利子ジェネリック家具、ＤＦＶNginxリカバリBINDVirtualBoxAWS EFSfluentdKibanaKubernetes熊本奨学金エクセル、小技、文字列操作日本工学院OpenCVApacheRTX1210XAMPPALBゆるいハッキングセミナー防災地震時計CloudFrontAmazon WorkSpacesAWS S3SWX2200xdebugELBセミナー小技子供ExcelブラックサンタIDCFクラウドMastodonCl
iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi engineer blog
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ（Mobile Safari）のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ（以下、Mobile Safari）にて、以下のコードを実行してみます。 （分かりやすい様にjQueryを使用させて頂きました） なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
jQueryでフォーム入力をチェックする ｜ Tips Note by TAM
正規表現（jquery）を利用した入力チェックを紹介します。 正規表現は、文字が一致しているのか、していないかを判定する機能です。 応用としてフォームで入力された文字が条件と一致、不一致をチェックし、 ユーザーに正しい入力を促す方法です。 if文（条件文）を主に使っていきます。 if文についてはこちらを参考にしてください。 【Javascriptの条件文】 http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/condition.html 今回、紹介する例は、チェックするタイミングを入力後に設定します（フォーカスを外したとき）。 $("input[name='hoge']").blur(function(){ if(条件){ //実行内容 } }); 【入力が空の場合】 $("input[name='hoge']").blur(fun
pushState() + AJaxでスムーズなコンテンツの遷移 | スターフィールド株式会社
Ajaxはページ遷移で発生するユーザーのストレスを軽減する方法として有効ですが、 ページ遷移の履歴が残らないため、 ブラウザの戻るボタンを押した場合に、ユーザーの意図しない動作になってしまう場合が多々あります。 HTML5のJavaScriptの仕様で、履歴を扱うhistoryオブジェクトに、 pushState()およびpopstateイベントが追加され、 Ajaxのような実際にページ遷移しない場合でも、ページの変化があるごとに、URLを変更して履歴を追加することができるようになりました。 この機能はIE10以上のブラウザで利用することができます。 今回は、この機能を使ったページ遷移の方法をご紹介いたします。 ↓作ってみたもの DEMO 方法 遷移するそれぞれのページを、Ajax経由ではなく、直接開いても問題ない状態で用意する 初期で読み込んだページのURLを取得し、pushState(
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - humaan/Modaal: An accessible dialog window library for all humans.
JavaScriptがちょっとわかる人向けの、Ajaxの話。 - Qiita
【HTML5】カスタムデータ属性（data-*）の値に複数設定、それを取得する方法 - Qiita
