2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
Reactを使って本気でアンケートシステムをつくった - Qiita
この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説
クソ酷いウェブサイト
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ？ お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ？ お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ？ どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確（もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな） よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
脱jQueryのためにしたこと - Qiita
この記事は加筆して「脱jQueryのためにしたこと - ICS MEDIA」に引っ越しました。 64000PV、480いいねとフロントエンド界隈でご好評いただいた内容です。ぜひご覧ください。 ※Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
jQueryは本当に終わったのか?
6/9にjQuery 3.0の安定版がリリースされました。今度のアップデートで大きな機能追加はなく、バグフィックス等が中心になっています。 jQuery 3.0 Final Released! | Official jQuery Blog 一時期Webフロントエンド界隈ではその学習コストの低さや利便性から全盛を誇ったjQueryですが、現在はその人気も陰りが見えるものとなっていますね。 Google Trend の結果: それはどうしてでしょうか。 まず、かつてjQueryが異常なほど流行った理由として、標準のJavaScriptAPIの使えなさがあったと思います。IEにはaddEventListenerの実装がなく、ブラウザごとの差分は激しかった。それをうまく受け止めるライブラリとして、jQueryは最高でした。CSSセレクタを書くようにHTML要素を得ることができたし、IEだけatta
「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
画像をアップロードする前にロード、プレビューするjQueryスクリプト・「LoadImg」
LoadImgは画像をアップロードする前にプレビューするスクリプトです。jQueryに依存します。上デモのように<>input type=”file”で画像ファイルを選択すると、その画像がアップロードされる前に表示、ユーザーが確認出来るようにしてくれます。オプションでファイルサイズや拡張子の制限が出来るようです。ライセンスはMIT。 LoadImg
Bootstrap 対応！マイクロインタラクションをクラス名だけで作ろう！ScrollReveal.js
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン
【jQuery】セレクトボックスの選択要素を抽出 - Qiita
##選択された単数要素を取り出す 基本はselectタグの属性を指定してval()で値を取得すればよいが、表示文字列を取得したいときはoption:selectedを指定する必要がある。 <select name='alphabet'> <option value='ABC'>えーびーしー</option> <option value='DEF'>でーいーえふ</option> <option value='GHI'>じーえいちあい</option> <option value='JKL'>じぇーけーえる</option> </select> $('[name=alphabet]').change(function() { // 選択されているvalue属性値を取り出す var val = $('[name=alphabet]').val(); console.log(val); // 出
新人研修で「jQueryのその先へ」の話をした | tsuchikazu blog
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜 from Kazuyoshi Tsuchiya ペパボでは、新卒エンジニア向けにメインとなる研修とは別に、週２回に1時間ほどエンジニアでも、デザイナでも、ディレクターでも誰でもいいから、自分が教えたいものを教える。という時間があります。そこで、Webフロントエンドの話をしたので、その資料を公開します。 GoogleMapが登場したときの衝撃（本当に当時は感動したなぁ…）から始まり、jQueryの登場。そして、その後の複雑化していくフロントエンドについて 言語(ES, AltJS) ツール(タスクランナー, パッケージマネージャ) アーキテクチャ(MVC/MVVM/Component指向) の3つにわけて、登場する背景や進化していく過程を伝えるようにしました。それぞれを詳しく。というよりは、ざっくりと全体感を伝える気持ちで。
Real World React 2 - 2016/09/27 - React Meetup #4 - Qiita
About @mizchi Qiita のフロントエンドエンジニア React勝手エヴァンジェリスト 4ヶ月で14kg痩せた (80kg => 66kg) 近況 ビジネスドメインのリファクタが主でアウトプット少ない 泥臭系の知見は溜まってる 会社のメンバーが増えた + 自分以外のフロント系の人が増えたので、設計を明示しないといけない この資料は何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料を加筆したもの 如何にしてReactを「ふつうのウェブアプリ」に導入していくか ふつうのウェブアプリ NOT SPA SPA でなくともReactは使える jQuery に支配された現代のフロントエンドを改善したい => 複雑なモジュールを局所的に解決するのにReactが有用であることを示したい フロントエンドの流れ AJAX以前(~2003)
jQueryで無駄なくコードを書くために知っておきたい、セレクターの微妙な違い
jQueryっていろんなセレクターがあって便利ですよね。でもいつも同じセレクターばかり使っていて、実は無駄なコードを書いていません？ 主要なセレクターを一挙解説。ふだんjQueryを使っている人も、おさらいにどうぞ。 本記事はMatt Smith、Tim Severienが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 jQueryのセレクターは、Webページ上の要素の内容を操作したいのか、要素にイベントを追加したいのか、あるいはほかのなにかをしたいのか、の選択に関与します。セレクターはライブラリーの重要な部分を形成します。 記事では、セレクターのすべてをカバーし、使用の際に心に留めておくべき大切なことを紹介します。 jQueryのセレクター セレクターの主な目的は、一定の基準を満たすWebページ上の要素の選択です
JavaScript の難しさとは何か - mizchi's blog
JSの学習コスト高いかという問題、言語のコア自体はシンプルだが細かい == とかのハマりどころが多いのと、言語機能自体がシンプルすぎてエコシステムを理解してモジュールを扱うところに辿り着くのが大変、という問題に分類できる— 現場の声 (@mizchi) 2016年8月15日 jQueryの学習コストは、DOMはツリーなんだよという概念の獲得と DOM API の抽象サブセットを覚えるというだけで、2016年現在は jQueryによるUI設計論(ここが高まるとBackboneとかその辺)みたいなものに手を出す必要がないなら、そんなでもないんだろうな— 現場の声 (@mizchi) 2016年8月15日 Reactが難しいと言われる場合、仮想DOMという概念がやや難しい、というか非常にCS的なアルゴリズムとデータ構造が背景にあって、その上で単純なトップレベルAPIとアルゴリズムを理解してないと
jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js – A Truly Lightweight
文書スクロールと共に地図をアニメーション表示できるデモがすごい:phpspot開発日誌
Animated Map Path for Interactive Storytelling | Codrops 文書スクロールと共に地図をアニメーション表示できるデモがすごい。 旅のログ等に表示すると超わかりやすそうなUIを作れます。 スクロールに応じてページ内容をアニメーションさせたりするといった手法はよく使われるようになりましたが、こういうアイデアをWEB上で実装したのは初めて見た気がします。 関連エントリ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 スマホの傾きでページスクロール出来るようにする「Interdimensional」 特定要素をスクロールに応じて固定ナビゲーションにできる「Clingify」 流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集 ページのスクロール位置を明示してくれる「jQuer
プログラミングやコーディングを学習したい人に役立つツール
作成：2015/11/16 更新：2016/08/01 Web制作 > 初心者の生徒さんに「どうやったらプログラミングできるようになりますか、コーディングする上で最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使って、どう設定するとよいのか」簡単にメモしておきます。 また「プログラミングの時は何を使う、これで練習する」といった感じで決めておけば、プログラミングも楽になるかと思います。今回は「最初はコレ！」といった感じで選抜してみました。初心者の方向けの記事となります。 エンジニア速報は Twitter の@commteで配信しています。 学んだプログラミングやソースコードを管理・反復練習する プログラミングに関する書籍を何冊も読みこんで理解しても、何回ノートを見返しても、普段検索とコピペで済ませていると、いざとなったら全然プログラミングできないです。筆者は泣
やる夫がデザイナーの作ったPSDにお怒りのようです | WebTecNote
カテゴリー CSS (53) Compass (2) Sass (1) Custom (8) Dojo (1) GoogleMap (23) HTML&XHTML (12) HTML5 (1) Information (19) Javascript (42) jQuery (9) Material (9) Memo (71) やる夫がデザイナーの作ったPSDにお怒りのようです (5) MooTools (62) Tutorial (6) Perl (1) PHP (37) CakePHP (2) OOPでBBS (7) Zend Framework (4) Template (29) 4BOX (8) 5BOX (5) 6BOX (4) Form (5) Menu (1) Web Site (6) wordpress (55) plugin (8) Reference (7) Theme
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「stripe.com」のようなモダンで美しいレスポンシブなナビゲーション実装サンプル:phpspot開発日誌
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ