jQueryからVue.jsに乗り換えて良かった点・悪かった点をまとめてみた！ - クラウドワークス エンジニアブログ
今年の3月からクラウドワークスで働き出した高梨です！ さっそくですが、 最近、jQueryで書いていたJavaScriptをVue.jsに変えていくということをやりました！ 「がっつりcomponent化して、API用意して、SPAにして・・・」 みたいな感じではなく、 最低限jQueryでやっていた表示・非表示の処理だったり、金額を計算するといった処理を そのままVue.jsに置き換えていくという感じですね。 実際、Google Trendを見ても ここ数年でVue.jsの人気が急激に伸びているのは事実です。 （実はReactにも大差をつけている） 【Google Trend JS比較】 https://trends.google.com/trends/explore?date=today%205-y&q=vue.js,react.js,angular.js ここでは、実際に実装してみて
脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
【react】jqueryメインの非SPAシステムの特定ページでのみreactを導入してみたのでメモ - とりあえずphpとか
はじめに 以前に自分が作ったシステムで主にjqueryを使って作ったものがありました。 基本的には困ることはなかったのですが、特定のページだけ複雑になってきていじるのが嫌になってきました。。。 作りたい画面のイメージとしてはこんなかんじ メイン画面 モーダル1 モーダル2 ・画面の中央にリストがある。 ・「追加」ボタンで追加するデータの種別選択画面モーダルをひらく ・「次へ」ボタンで種別ごとに設定画面があるのでそれらへ遷移 ・「登録」ボタンでモーダルを閉じてリストへ反映 リストへの登録を繰り返して、すべて登録できたら「サーバーへ送信」ボタンで登録が完了するようなイメージの画面。 最初はそこまで複雑でなかったのだが、種別が増えていって種別によっては2ページ、3ページかけて項目を入力するものはでてきた。。。 jQueryで作っていたのだが、さすがに1つのHTMLにすべてを書いてしまっていたので
「Reactの難しさ」を分解しよう - タオルケット体操
他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 「テンプレートエンジン」として捉えて、シンタックスを攻撃するのをやめよう ライブラリとしてのReactはとても簡単 Reactの思想を理解するのはチョットムズカシイ 環境構築が難しい JavaScriptそのものが難しい GUIが難しい jQuery時代からのパラダイムシフト フレームワーク関係者の情報量が多い SPAはとりわけ難しい まとめ ずっと感じてたもやもやを書き連ねたら長くなってしまったが、ぼんやりとReactとかなんか難しそうだしめんどくさいから新規案件だけどjQueryでやろっかなどうしよっかなーと迷っている人の指針になってくれればうれしい。 他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 出た時から延々と言われ続けているものの、やっぱり今でもjQueryとRe
jQueryでjsonデータを扱ってみる【入門編】
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
Magnific Popup レスポンシブデザインにも対応しているモーダルウィンドウ用jQueryプラグイン
TOPjQuery Magnific PopupでjQueryのモーダルウィンドウを実装する方法 Magnific PopupでjQueryのモーダルウィンドウを実装する方法
[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2
jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。 デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング
【無料】jQueryが身につく学習サイト5つまとめ | プログラミングの教室比較やプログラマーに特化した求人、RestAPIのSaaS情報サイト【プログラミング教育ナビ】｜プログラミングの教室比較やプログラマーに特化した求人、RestAPIのSaaS情報サイト【プログラミング教育ナビ】
jQueryはWebブラウザで動作するJavaScriptの開発を容易にするために開発されたライブラリです。JavaScriptを用いたWebシステムを開発していると、どのシステムにも共通して必要な機能があることが明らかになりました。例えば、Web画面の装飾を司るCSSを変更する機能や、HTMLで指定された特定の要素を検索・変更する機能などは、いかなるWebシステムでも必要になります。jQueryは、これらの機能をまとめて提供することで、JavaScriptの開発を効率的に行えるようにします。さらに、jQueryは先進的なWeb画面のユーザーインターフェイスも用意しています。カレンダーや進捗を表すプログレスバーなどの部品がjQueryに含まれており、開発者は簡単なプログラムを書くだけで、その機能を利用することができます。jQueryを用いることで、JavaScriptの開発が効率的になると
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
なんだかんだで SPA から jQuery に戻った話 - ボクココ
最近は SPA とか React といった話題が尽きないが、自分は結局 フロントエンド JavaScript は jQuery が最もいいと感じている。それはそれら SPA の JavaScript をいじった経験を踏まえての感想。 理由としては、「 やりたいことができにくい 」これに尽きる。 最新を追うということ 自分が最初にSPAを触ったのは AngularJS だった。なるほど、この ng-repeat や $route, $scope などを使えば、今までサーバサイドでやってたようなレンダリングが表側で制御できるようになる！と感動したものだった。この気持ち良さはきっとサーバーサイドでごにょごにょやっていた経験のある人ならなおさら感動するものだ。 さて、じゃあといって「次作るのは SPA のサービスにしよう！」と意気込んで初めて見たとする。それで作っただけで話題になるし、エンジニアと
iOS で click イベントがわけのわからない動作をする件について - Qiita
iPhone や iPad などでも、 JavaScript の click イベントは基本的に有効です。 しかし、これらのデバイスで click イベントを拾おうとすると、うまくいかないことがあります。 このあたり、結構わけのわからない仕様になっているので、順を追って説明します。 なお、以下の説明では jQuery 1.9以上の使用を前提としています。 どういうときにうまくいかないか とりあえず、以下のHTMLを前提とします。 ... <body> <p id="child1">...</p> <p id="child2">...</p> </body> ...
touch, click, pointerの実装 | 前編 タッチイベントとマウスイベント
touch, click, pointerの実装 前編 タッチイベントとマウスイベント このシリーズでは、タッチ／マウスイベント系の実装を考えます。第1回目はタッチイベントとはなにか、また、タッチイベントとマウスイベントの判別について解説します。 はじめに iPhone、Androidが登場したのはもう何年も前ですが、さらにWindows8も登場し、いろいろと状況が変化してきました。Windows8を搭載したPCの多くはタブレットデバイスのように、画面に触れることができるようになっています。 しかしながら、これらのデバイスはマウスを使っても操作できるようにもなっています。今後、どのようにタッチ／マウスのイベントを扱っていけばよいのかは、これからのウェブ開発において、より重要になっていくはずです。 そこでこのシリーズでは、タッチ／マウスイベント系のブラウザへの実装を整理し、それらのブラウザに
jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法 | アンギス
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
WordPress ページングはやめてAjaxローディングにする | hijiriworld Web
ページングはやめて、Ajaxによる非同期ローディングにしてみましょう。 最初は5件の記事が表示されています。 「もっと見る」ボタンをクリックするとAjaxにより次の5件が非同期で読み込まれます。 以後、記事がなくなるまで同じ動作です。 テンプレート <section id="content"> <?php query_posts('posts_per_page=5'); ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <div class="excerpt"><?php the_excerpt(); ?></div> </arti
jquery1.9でチェックボックスを選択状態にできない - Oh! My! Enter! 〜バッチを起動しようと勢いよくキーを叩いたら、それはシフトキーだった〜
以前まで動いていた↓このような記述は $("#add_cart_checkbox").attr("checked",'checked');どうも1.9では上手くいかないようです。１回目の選択は上手くいくのですが、２回目以降は選択状態にならないです。 ↓このように記述すれば上手くいきます。 $("#add_cart_checkbox").prop("checked", true);参考 http://stackoverflow.com/questions/14494467/jquery-1-9-checkbox-not-checked-second-time-after-once-it-unchecked
jQueryにおけるフォーム値の取得と設定 : JavaScript好き
スポンサードリンク 概要 フォーム(form)の値を取得する場合、jQueryではval()メソッドやprop()メソッドを使う。 ただし、inputの種類によって癖があるので、各typeにおける｢値取得｣｢値設定｣などをメモする。 また、prop()を利用するのでjQueryのバージョンには注意が必要。 このコードを試したときのバージョンは｢1.10.1｣。 テキスト val()メソッドを使だけ。未入力の場合は、｢""｣(空文字)なので安全。 HTML <input type="text" name="animalText"> 値取得 var newText = 'トラ';$(':text[name="animalText"]').val(newText); 値設定 var animal = $(':text[name="animalText"]').val(); ラジオ val()メソ
JavaScript(jQuery)でHTMLをincludeする - ゆとり日記
最近流行りのWebデザインテンプレートを見ると大体ついてる「navbar」や「footer」。 テンプレートをDLして、「さあ使うか！」ってなってソースを見てみると 各HTMLにほぼ同じ内容の処理がズラっと書いてあります。 書いてある内容は殆ど変わらないけど、一箇所でも細かい修正があると、 全部のファイルを手動で直さないといけません。 面倒くさい＆馬鹿らしい＆ケアレスミスが発生する原因になる ということで「HTMLをincludeして使う方法」を調べた際のメモを記録しておきます。 コードは以下の通りです。 include.html <p>includeされて使いまわされる部分です/p> index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont
【jQuery】実行タイミングの違い - TASK NOTES
jQuery（JavaScript）が実行されるタイミングには以下の3種類があります。 パターン1.$(window).load(function() { }); パターン2.$(document).ready(function() { }); パターン3.インライン サンプルHTML 各パターンのタイミングを確認するために、以下のサンプルHTMLを作成しましたのでブラウザで実行して確認してみます。 アラートが表示される順番が実行タイミングとなりますので、パターン3-1 → パターン3-2 → パターン2 → パターン1 となっている事がよくわかるかと思います。 インラインのイベント HTMLは一番上から読み込まれてDOMが構築されていきますので、インラインで直接記述している箇所はその順番で実行されていきます。 パターン3-1に関してはブラウザの表示が「実行されていません。」のままになって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery dialog内に動的ページを読み込む - Qiita
jQueryでform有効化/無効化/リセット - Qiita
