一休.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を使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
新規開発を止めずにブラックボックス化したJavaScriptコードを改善するには？ 自信を持ってリファクタリングできる環境の実現に向けて【デブサミ2018】
開発担当者の間で大きな問題となりつつあるJavaScriptコードの属人化。ブラックボックス化したフロントエンドに対し、パーソルキャリア株式会社Innovation Lab. MyReferグループの鈴木潤氏は、ReactやESLintなどを使用しながら、「新規機能開発を止めずに」開発環境の刷新を行った。その過程での奮闘ぶりと成功した点、失敗した点などを紹介した。 講演資料：属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。 パーソルキャリア株式会社 Innovation Lab. MyReferグループ エンジニア 鈴木潤氏 ブラックボックス化したJavaScriptコードを可視化 特定の人しか修正できないJavaScriptコードは、まさにブラックボックスであり、技術的負債といえる。長い目で見れば、機能追
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
サイバーセキュリティ注意喚起サービス「icat for JSON」：IPA 独立行政法人 情報処理推進機構
サイバーセキュリティ注意喚起サービス「icat for JSON（アイキャット・フォー・ジェイソン）（注釈1）」は、IPAが公開した「重要なセキュリティ情報」をリアルタイムに配信するサービスです。 本サービスをウェブサイト上で活用することにより、IPAが公開した最新の「重要なセキュリティ情報」の一覧を自動的に取得・表示することができるようになります。組織のポータルサイトや会員向けウェブサイト上などに設置をすることで、ウェブサイト利用者に向けてセキュリティ対策をリアルタイムに周知することが可能になります。利用方法は下記の機能概要を参照ください。 コンセプト icat for JSON 機能概要 ウェブページにHTMLタグを埋込むことで、IPAから発信する「重要なセキュリティ情報」とリアルタイムに同期できます。 本ツールの特長は以下の通りです。 表示方法は「縦表示」または「横表示」の指定が可能
JavaScriptのモジュールシステムの歴史と現状 - Qiita
社内向け資料。自分が書いたコードを説明するために資料作る羽目になった。 昔のことはうろ覚えで雰囲気で書いてる部分もあるので、そこらへん勘弁。 古の時代(~2010) 前提としてJavaScriptは名前空間がwindowの一つしかない。 昔Prototype.jsがあった。もうみんな忘れたけどあの時期はプリミティブなオブジェクトのprototypeを生やしまくって、それが衝突しまくってprototype良くない的な雰囲気が生まれたり生まれなかったりした。 その反省があってか(歴史的に若干微妙な気がするが) jQueryは名前空間を一つに集約した。いわゆる jQueryPlugin は、jQueryのプロトタイプにヘルパを生やしまくっていた。グローバルを汚すのは駄目だけどjQueryの名前空間を汚すのはいいよね、ぐらいの考え。 jQuery非依存なライブラリは、「GoodParts」として、
jQueryはNGと言われた時の便利なメソッド - Qiita
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
JavaScriptトレンド総括（2014）
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!Jun-ichi Sakamoto
ブラウザー上でサクッとコードの動作テストができるWebサイトいろいろ
2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか？（え？ない？w）そんな時はファイル不要！環境設定不要なオンラインテストサイトを使っちゃいましょう！動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します！ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです！ ↑私が10年以上利用している会計ソフト！ CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK！ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単！ HTML
レスポンシブで軽量なLightBox実装「Rebox」:phpspot開発日誌
Rebox - jQuery or Zepto tiny small simple responsive lightbox レスポンシブで軽量なLightBox実装「Rebox」 画像のズームとギャラリー機能付きでレスポンシブなプラグインを選ぶ際の１選択肢として覚えておいてもよいかも。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」
JavaScriptのスタイルガイドまとめ(おすすめ4選) - Qiita
はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を押さえておけば問題ないと思います。 おすすめ４選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語：https://google.github.io/styleguide/javascriptguide.xml 日本語：http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html Closure Linterを使用することで、チームでの統一がしやすくなります。 グーグル製JavaScript文法チェッカー jQuery JavaScript Styl
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
jQueryのメモリーリークの傾向と対策 — KaoriYa
Web開発にとても便利なjQueryですが、 実はメモリーリークを誘発しやすい構造であることは あまり知られていないようです。 本記事ではメモリーリークが発生する傾向と対策を紹介します。 皆さんjQueryは使ったことありますよね。Webでの開発ではとても便利で、ほぼ必須と言っても過言ではありません。しかしながらこのjQueryはメモリーリークを誘発しやすい構造であることはあまり知られていません。 GCのあるJavaScriptでメモリーリークが発生するとは何を言っとるんだ、と思われる向きもあるやもしれません。しかしGCがあっても、もう使わなくなったオブジェクトを配列やテーブル(Object)にしまいこんでいて、それを回収するタイミングが存在しなければ積もり積もってメモリを圧迫する、メモリーリークとなりうるというのは想像に難くないでしょう。jQueryで起こりうるメモリーリークはそのような
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも 業務アプリケーション最大手の独SAPは、業務アプリケーションのためのJavaScript製JavaScrit UIライブラリ「OpenUI5」をオープンソースとして公開しました。 OpenUI5は、同社のモバイルアプリケーションなどに用いられているJavaScript製ライブラリ「SAPUI5」の主な機能をオープンソース化したもの。jQuery、CSSプロセッサのLESS、ODataライブラリのdatajsなどが使われています。 ボタンやアコーディオン、メニュー、テーブル、ダイアログと言った部品だけでなく、レスポンシブ対応のグリッドレイアウトなどのレイアウト用部品も含まれており、モバイルデバイスに対応するレスポンシブデザインのUI構築が可能になっています。 JavaS
試して学ぶ Backbone.js 入門のまとめ - Taste of Tech Topics
皆さん、こんにちは。id:KenichiroMurataです。 今回はKnowledge Noteにて連載させて頂いていた 「試して学ぶBackbone.js入門」が全５回分公開されたため、そのまとめをしたいと思います。 記事のコンセプト タイトルに含めた通り、実際にコードを書いて試してみることでBackbone.jsの理解を深めることを一番の目的としています。 なので、ぜひ実際に記事の中に出てくるコードを書いて、動かして、コンソールのログや動作を確認することをおススメします。 各記事の概要 第１回 試して学ぶBackbone.js入門 Backbone.jsの概要から、インストール方法、Model、Collectionの基本を説明しています。 目次 はじめに セットアップ Modelの基本 Collectionの基本 Collectionの便利な関数 第２回 試して学ぶBackbone.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita![[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d66c1a02fb93900a9716449f341729577217e372/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY3OTM5NCUyRjJlNzBkMTE3YTQ4MjBmM2FjOGEwNmZhZmQ5YmVjYjI1NWMwZjU3NmIlMkZsYXJnZS5wbmclM0YxNTcxNTc0ODM4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTdlYThiZmI4ZGM0MDhjMmEyYWMwMmU4ZWUzZjVmMjE2%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D7004c0d648296aaa6c311c99747ccf9a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEQ2hyb21lJTIwJUUzJTgzJTg3JUUzJTgzJTk5JUUzJTgzJUFEJUUzJTgzJTgzJUUzJTgzJTkxJUUzJTgzJUJDJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgyJUJEJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgwJUU2JTg0JThGJUU1JUE0JTk2JUUzJTgxJUE4JUU3JTlGJUE1JUUzJTgyJTg5JUUzJTgyJThDJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUFBJUUzJTgxJTg0MTAlRTMlODElQUUlRTYlQTklOUYlRTglODMlQkQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1hMGJiNDZhYjE3NjUyMDRiMGVjMzc0ZmE2NDk1MjZlMw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhb3NobzIzNSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTZmYjA1ZDdjODFmM2E5YjBjYjY3M2M1ODMyODdjNWQ5%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44O044Kh44Or56CU56m25omA%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D21ce0c6477b75e478147573d9beabc27)
JsRender/JsViews
http://daily.d3js.info/?p=296