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を捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
jQueryとは何なのか？ なぜ使わなくても（あるいは使わないほうが）いいのか？ - Qiita
昨今、よく「jQueryはもう必要ない」という声を聞きます。 しかし、一時期JavaScriptのデファクトスタンダードのライブラリといわれたjQueryに対しての扱いの変化を疑問に思う方もいるでしょう。 そこで、この記事ではそもそもjQueryとは何のために作られたどんなライブラリか、そしてそれがなぜレガシーと呼ばれるようになったのかを学んでいきたいと思います。 間違った事を書いているなどのご指摘は大歓迎です。 なぜ jQuery ができたのか 昔のWeb開発 jQuery ができたのは2006年。 そのころはJavaScriptはWebページに文章を読むのを妨げる動きをつける言語で、HTML5やCSS3、ES2015なんてものはもちろんなく、今ではコード数行でできることが時にはトリッキーな方法も混ぜながら何十行も書く必要がありました。その上、ECMAによって標準化されているとはいえ、ブ
そろそろなぜjQueryを使うのが難しいのかをちゃんとまとめようと思う。｜榊原昌彦
「jQueryはオワコン」「いや、jQueryは便利！」議論が行われるようになってから2年は経つでしょうか。Twitterを観測してると定期的に盛り上がるので、私なりにちゃんとまとめようと思います。 ちなみに結論を先に書いておくと ・ レンダリングブロックしない構成、かつ最新版を使おう ・ jQueryはいいものだけど、脱jQueryした方が手っ取り早い です。 1. 保守しないといけないサポートの切れたjQuery1, 2を使ってるけど、依存プラグインが動くかどうかわからないから最新版にアップデートしていないプロジェクトが散見されます。 jQuery1, 2 は、Officially End of Life（公式に廃止）が名言されてます。ですので、「jQuery におけるクロスサイトスクリプティングの脆弱性」みたいな報告も修正されていません。EOLのバージョンはやめましょう。 ちなみにj
ブラウザからWebAPIと非同期通信を行う
JavaScriptはシングルスレッドの言語です。よって処理は上から順々に行われていき、並列処理はできません。（※workerを除く） 順々に行われていく処理を同期処理と呼びます。 ここで、ブラウザから外部に通信を行う処理を考えてみましょう。郵便番号による住所検索を例に挙げてみます。 よくあるUIですが、郵便番号検索ボタンを押し、外部サーバーにある郵便番号検索APIを叩いて住所を取得し、都道府県・市町村・番地を埋めるものです。 同期的に通信を行ってしまうと、郵便番号検索ボタンを押した瞬間、ブラウザが固まります。なぜなら通信という処理がまだ完了していないため、ブラウザはその処理に掛かりっきりになってしまっているからです。 それに対して非同期通信はブラウザの処理をブロックしません。処理をブラウザ外に委譲することで、自身の処理を続行できます。 非同期通信の種類現状、ブラウザから非同期通信を行うた
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
Reactによってネイティブ/Web論争は終わったのかもしれない | readwrite.jp
PCで我々がWebアプリを多く利用するが、モバイルにおいてアプリは全てだ。今ではモバイルを使っている時間の90%はアプリの利用に費やされている。 ここでいうアプリとはネイティブアプリの事だ。 マーク・ザッカーバーグがネイティブではなくHTML5に投資したのは最大の失敗だったと宣言して以来、モバイルWebは着実に勢いを失ってきている。 しかし皮肉なことに、フェイスブックのエンジニアたちのおかげでそれも過去の事になる。 どういうことか説明しよう。 モバイルWebをReactするザッカーバーグがHTML5は終わったと宣言した翌年、フェイスブックのエンジニアの一人であるジョーダン・ウォークがWeb開発の新しいアプローチであるReactJSを生み出した。 ReactJSは開発者がJavaScriptのスキルを活用し、アプリ開発をシンプルにできるようになった。しかし他にも多くあるイノベーションのうち、
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
React.js + Webpack + ContainerJSでTODOリストを作ってみた - うなの日記
React.js + Webpack + ContainerJS でTODOリストを作ってみたので、手順をまとめます。 以前書いた、Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記の改訂版。 最近流行ってるライブラリのお試しも兼ねて、いろいろ組み合わせて使ってみようという試みです。 ソース全体はこちらで公開しているので、あわせて参照ください。 ポイント モジュールローダーを require.js → Webpack に ソースはクラス単位で分割管理して、Webpackで1ファイルにまとめてリリースします。 WebpackだとAMDもCommonJSも両方扱えるので、npmのライブラリが使いやすくなるのは大きいかな。 あと、Loaderも便利ですね。 Viewモジュールを Knockout.js → React.js に 流行って
Private Presentation
Private content!This content has been marked as private by the uploader.
React.js を用いた HipChat の再構築 | Atlassian Japan 公式ブログ | アトラシアン株式会社
要約 : 私たちは、React.js と Flux、それに他のいくつかのライブラリを用いて HipChat の Web クライアントを根本的に再構築し、素晴らしい結果を得ました！ 是非試してみませんか？ HipChat がアトラシアンに加わったときのクライアントは、Web、Adobe Air (Windows、OS X、Linux)、iOS、そして Android アプリの 4 つでした。HipChat チームが最初に掲げた目標のひとつが、Air クライアントを OS X、Windows、Linux のネイティブデスクトップクライアントに置き換えることでした。私たちは (その当時は) 小さいチームだったためしばらくはこの仕事で手一杯でした。このように最高のアプリケーションを提供することに集中した影響で、Web クライアントに対しては私たちが行った様々な開発の成果を反映させることができません
Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 - Qiita
結論: Javascriptの乱用をやめるのが一番。 はじめに書いておきますがしょうもない話です。 結論、開発者としてはどのような方向性でやるべきか、を書いています。 JS多い時代でのフレームワークの根本的な問題云々のことは書いてません。 さて、現状、モバイルにおいて、Javascriptでまともに動くものを作ることは難しいです。 Twitterから引き抜いた超優秀なWebエンジニアを多数抱えるMediumですら、未だにモバイルで多数のバグを抱えています。 超優秀なエンジニアを世界一抱えているであろうGoogleのGmailですら、モバイル版のWebはすぐクラッシュします。また、自前スクロールに致命的なバグも抱えています。 正確には「UIが不審な挙動をする」ですが、エンドユーザにとっては同じことで、「バグ」です。 サーバサイドで起こるバグと同じ程度、いやそれ以上に、サービスに影響を与えます
I am mitsuruog | SPAを構築するときに知っておいた方がいい7つの課題
ブラウザでの Javascript の高速化と Backbone や Angular のような JavascriptMVC フレームワークの登場により、以前より SPA（Single page application）が構築しやすくなりました。 さらに、Yeoman に代表される SPA を作成するするための scaffold（土台）が整備されてきましたので、結構さくっと SPA が作れるようになったのも事実です。 さくっと作った SPA がさくさく動かない・・・作ったけど使えない・・・なんてことにならないように、SPA を構築する前に知っておいた方がいい課題について調べてたり考えてみました。 目次 1. パフォーマンス 2. メモリリーク 3. セキュリティ 4. フレームワークロックイン 5. 画面設計から UI コンポーネント設計への思想転換 6. フロントエンジニア不足 7. 番外
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとFluxのこと // Speaker Deck
IBM Developer
React概論
レンダリングを意識したパフォーマンスチューニング
