jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
ウェブアプリ開発者とウェブサイト制作者の分断 | ClockMaker Blog
さる平成30年6月23日(土)にサッポロクリエイティブキャンプ2018で「イマドキのウェブサイト制作の最前線」と題して発表してきました。 このとき発表した内容が、国内のフロントエンドエンジニア・HTMLコーダーの間でバズったので紹介します。 両者の意見は「jQueryはオワコンなのか – ウェブアプリ開発者とウェブサイト制作者の大きな溝 – Togetter」にまとめてますので、参照ください。 ウェブアプリ開発者は積極的に新しいものを取り入れていこう、流行らせていこうという思いのもと、過去の技術を過剰に批判します。また、ウェブアプリ開発者の分野はウェブ全体の需要のなか少数であるにもかかわらず、彼らの声が大きいため、あたかもウェブ制作全体を指して言及しているように見受けられます。 実際のところ、大多数のウェブサイトの用途を意図して発言していることは多くはありません。具体例を挙げましょう。 ウ
Papa Parse - Powerful CSV Parser for JavaScript
The powerful, in-browser CSV parser for big boys and girls Download Demo Documentation // Parse CSV string var data = Papa.parse(csv); // Convert back to CSV var csv = Papa.unparse(data); // Parse local CSV file Papa.parse(file, { complete: function(results) { console.log("Finished:", results.data); } }); // Stream big file in worker thread Papa.parse(bigFile, { worker: true, step: function(result
jQueryプラグインをうまいことカプセル化する設計方法-jamadam weblog2
“There are only two hard things in Computer Science: cache invalidation and naming things” だそうです。そういう訳で、jQueryプラグインのメソッド名が他のプラグインと衝突するのを回避するための設計方法を列挙してみた。今のところ、一番下の方法が自分的にはしっくり来ている。 [2011.02.02追記] 2011年はsub()方式がおすすめです。 jquery.myplugの基本形。基本的に$.fn.extend()は使わない方針。 /** * jquery.myplug基本形 * * SYNOPSIS * * $('#target').myplug(); * $('#target').myplug({param1 : val1, param2 : val2}); */ ;(function($)
クラスを使用したjQueryプラグインのテンプレート - Qiita
var $inputs = $('.watch-me').logging(); ... $('#stop-button').on('click', function(e) { $inputs.logging('off'); }); ;(function($) { 'use strict'; /* * methods: プラグインメソッド * * ここで指定したメソッドはjQueryオブジェクトから呼び出すことができます。 * * 例） * var $inputs = $('.watch-me').logging(); * * $('#stop-button').on('click', function(e) { * $inputs.logging('off'); * }); * */ var methods = { init: function(options) { var setting
jQuery Boilerplate - jQuery Plugin Registry
Suddenly you come across the idea of wanting to make a web page, but then a new word comes your way that you may not know. The plugins. What? It turns out that as soon as you see her you are scared, but calm down. It is nothing that complicated, and it turns out that they are quite an important tool when it comes to making your website. In fact, there are some essential plugins for a web page, s
jQuery $.data()と.data()、データの保存と取得で気をつけること。 - かもメモ
jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita こちらの記事に data() // 普通の書き方 $(elem).data(key, value); // 10倍速い！ $.data(elem, key, value); とあったので、$.data(elem, key, value);を使おうとして少し気になる挙動になったのでメモです。 確認環境のjQueryのバージョンは1.10.2です。($.fn.jqueryでjQueryのバージョンが確認できます。) リファレンスのメモ .data() .data() | jQuery API Documentation .data() | jQuery 1.9 日本語リファレンス | js STUDIO データを格納する .data(key, value) 引数説明 key要素に紐付けるデータのキーとなる文字列を
jQuery - プラグインを作る - entacl Lab.
jQueryプラグイン スライダーやニュースティッカー等jQueryと同様になくてはならない存在のプラグイン。jQueryやプラグインの作者さんたちには頭が上がらないです。 今回は、そんなjQueryのプラグインを作ってみます。さて、 「わざわざプラグインにしなくてもいいんじゃない？」 っていう方もいるでしょうね。 コードを全て自分一人で管理していたり、ごく簡単なものならグローバルの名前空間でゴリゴリ書いてもいいし楽です。しかし、チームで開発するとき等にはプロパティやメソッドがバッティングしないような気遣いは必要になると思います。大きなコードであれば自分だけで作っててもバッティングしてしまうことすらあります。IDEのコードヒントも鬱陶しくなりますしね。 jQueryのプラグインにすれば$内空間だけで完結できるので、グローバルでのびのびできます。 「大抵のプラグインはあるし、車輪の再発明では
jQuery初心者のためのJavaScript設計トレーニング | 機能や役割に着目したコード整理
2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP（Developer Technologies）を受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』（共著：エクスナレッジ、2011年3月12日）や『CSS3デザイン プロフェッショナルガイド』（共著：毎日コミュニケーションズ、2011年5月28日）』などがある。
jQueryプラグインの書き方を考えてみる(1)
更新履歴 2010-01-21 プラグイン定義方法については、約１年後に再考した下記エントリの方をお勧めします。 jQuery プラグインの定義パターンについて調べてみた - Cyokodog::Diary プラグイン API の定義パターンについて調べてみた - Cyokodog::Diary jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog::Diary jQuery ライクなプラグイン API の定義方法を考えてみる - Cyokodog::Diary プラグインを書いてみる まずこのへんの記事を参考に、 jQueryは、プラグインで手軽に機能を実装できるのが特徴です。プラグイン・ディレクトリ（Plugins | jQuery Plugins）に沢山のプラグインが公開されていますが、作り方を調べてみたら、かなり簡単に自分でも作成できるよ
jQuery プラグインの書き方メモ - tacamy--blog
勉強のために超簡単な jQuery プラグインを書いてみたら、凄腕 JSer の方々に色々とご指導ご鞭撻いただいたので、忘れないようにメモる。 オレオレ jQuery プラグインテンプレート (function($) { $.fn.pluginName = function(options) { /** * Option */ options = $.extend({ opt1: 'val', opt2: 'val' }, options); /** * Core */ return this.each(function() { // Process }); /** * Method */ function _methodName() { }; }; }(jQuery)); /** * Execute */ $(function() { $(".foo").pluginName(); })
指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish
img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
シンプルなイベントカレンダーを実装するjQueryプラグイン - Rewish
ある朝僕は、以下の用件を満たすカレンダープラグインを探していました。 シンプルなHTMLを吐いてデザインの変更が容易 コールバック関数である程度処理をイジれる 月移動のアニメーションが素人ウケしそう 小一時間色々なプラグインを見ましたが、中々しっくり来るモノが無く、「これは探すより作った方が早そうかなぁ」と思ったので作ってみました。 機能概要 記事の初めで大方出ていますが、主に以下の機能を備えています。 月移動時のスライドアニメーション 生成するHTMLを包含する要素のclass変更 イベント追加、月移動などに対応するコールバック関数 JSON形式でのイベント追加 イベント用JSONの先読み機能（月移動時の遅延対策） 表示中の月に属さない日付の表示、非表示 ダウンロード jQuery.calendar 動作デモ 導入方法 jQueryプラグインではお馴染み、 jQueryを読み込んでからプ
ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。
ページ内リンクをクリックした場合にスムーズにスクロールするようにしてくれるjQueryプラグインです。同じようなプラグインはたくさん公開されているのですが、これだ！というのがなかなかなかったので自作してみました。 ダウンロード 使い方 下記のような感じでjQueryとjQuery.smoothScroll.jsを読み込みます。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.smoothScroll.js"></script> あとは普通にページ内リンクを設定するだけです。 <div id="header"> ヘッダー内容
Vue.jsで固定ヘッダ、トップへスクロールボタン - Qiita
jQueryなるべく使いたくないですね。Vue.jsでなんとかしましょう。 DEMO スクロールイベントを取る mounted内に仕込みます。 document.onscroll = (e) => { this.position = document.documentElement.scrollTop || document.body.scrollTop; } これで、html側に、position変数を使った条件分岐を直接入れることが出来ます。 アニメーションヘッダ v-bind:classを使って、クラスをトグルします。 下記のように書くと、positionが0以上の時に、stickyクラスが付加されます。
プラグイン作成
query_plugin_authoring_ja.md 元文書: Plugins/Authoring - jQuery Wiki(t) プラグイン/作成 jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です！プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3. データ 概要とベストプラクティス 翻訳 さあはじめよう jQueryプラグインを書
jQueryによるコンポーネント化考察 - アルファブレンド プログラミングチップス
はじめに JavaScript Advent Calendar 2016 - Qiita 4日目 注) SPAの話ではありません。 なぜjQueryを使うのか 今の時代、JavaScriptはAngular2やReactに代表されるコンポーネント指向の時代を迎えている。 そんな中でなぜjQueryを使うのか。 下記の条件が組み合わさっている場合にはjQueryの方が使いやすい。 JavaScriptが必要な箇所が少ない SPAでJavaScriptをメインで使う場合はjQuery等今更使うことは無いと思うが、 ほとんどサーバーでレンダリングされるhtmlで完結しているシステムに、 時々動きを加えたい、なんて時はいちいちNodeの環境を準備、周知し、 ビルドしつつ開発する方が面倒。 開発陣が入れ替わる ずっと同じリーダーが開発の深い部分まで指揮していない場合もある。 そういった場合はメインの
jQueryを使わずjavascriptだけで書き直した際の記法メモ - Qiita
パフォーマンスが重要な部分では、やっぱりjQueryは気になる。。。 検索するとなにやらVanilla jsというのが盛り上がっていた。 ってもこれただのjQuery使わず、javascript使おうぜって話なだけだけどwww という事で今のjQueryのメソッドをすべてjsで置き換えたらどうなんだ？と思い対応表をまとめました。 jQuery ⇔ vanilla(普通のjavascript) 参考： YOU MIGHT NOT NEED JQUERY Choosing Vanilla JavaScript live(on) event
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryはオワコンなのか - ウェブアプリ開発者とウェブサイト制作者の大きな溝
Simple Accessible Accordion In Vanilla JS - A11y-Accordion