jQuery 3.7.0リリース。チェーン可能な新メソッドuniqueSort、単位なしのCSSプロパティなど追加
jQuery 3.7.0リリース。チェーン可能な新メソッドuniqueSort、単位なしのCSSプロパティなど追加 jQuery 3.7.0ではいくつかの機能追加、性能向上、バグフィクスが盛り込まれています。 機能追加では、新しく「.uniqueSort()」メソッドが追加されました。これは既存の「jQuery.uniqueSort()」と同じ機能をチェーン可能にしたものです。 uniqueSort()は要素の配列から順番を重複を排除してソートしたものを返します。 これは、いくつかの要素の並びからある要素よりも手前の要素の並びを返す[ .prevAll()」を、要素をラップする「.wrapAll()」と組み合わせたときに、ラップされた要素が逆順で返ってくるなどの問題を解決するために追加されました。 CSSプロパティでは、単位を省略した場合に自動的に「px」となるプロパティが7つ追加されまし
プロジェクトにjQueryが読み込まれているのにgetElementByIdとか書いちゃう人をどう思いますか？
回答 (5件中の1件目) おそらく初学者の方とお見受けしますが、知ったばかりの知識で人を見下すと痛い目を見ますから、ほどほどにするといいかもしれませんね。 ↓jsとjqueryではidからdomを取得するという非常に単純な処理でもGoogleChrome上で15倍ほどパフォーマンスが違います。 jQueryとJavaScriptの実行速度比較 | 覚え書き.com もちろん非常に簡易なサイトであれば人間が感じられるような速度差は出ませんし、周りのソースにjQueryが使われているのであれば統一的にjQueryを使ったほうが全体として可読性が高いというのはあるとは思います。
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
TypeScript/Reactのモダンな環境で開発するフロントエンジニア
TypeScript/Reactのモダンな環境で開発するフロントエンジニア 株式会社カオナビ @kaonavi I want to hear a detailed なにをやっているのか 私たちは、社員の個性・才能を発掘し戦略人事を加速させるタレントマネジメントシステム「カオナビ」を展開しています。 ■「カオナビ」とは？ 今まで紙やExcel、システム、社員の頭の中などに散在していた人材情報を一元管理することで、あらゆる人事課題への対応を可能にするプロダクトです。 現在は、企業規模や業種問わず、2214社（2021年9月時点）の企業に導入いただき、6年連続日本でのタレントマネジメントシステムシェアNo1※を獲得しています。 ※ITR「ITR Market View1：人材管理市場2021」人材管理市場-ベンダー別売上金額シェアで6年連続1位（2015～2020年度予想） 「カオナビ」製品情報
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみた - Qiita
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみたJavaScriptVue.jsReact 今のタイミングでWebサービスを、何か新しく開発しよーって思ったら、フロントサイドをどうしようか悩みますよね？ 特にVue.jsかReact.jsか... そんな悩んでいるあなたへの記事になります。 自分の仕事領域について あまり普段javascript触ってません 触るとしてもjQueryが多いです そんな人が書いた記事だと思って下さい 今回作ったもの ReactとVue.jsで簡単なカレンダーを作成しました。 React https://github.com/ykyk1218/react-calendar-sample Vue.js https://github.com/ykyk1218/vue-calendar-sample コンポーネン
担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる こんにちは、まろCです。 最近、僕が担当した JOYSOUNDのキャンペーンサイトで、いろいろな賞を受賞することができました。 CSSREEL Design Awards Asis CSS WINNER 今回は、このような演出を入れるサイトで僕がいつも使っているJavaScriptライブラリや、webツールを晒したいと思います。 アニメーションの基本的なフロー 基本的に、アニメーションはCSSにtransitionやanimationで記述しています。 javascriptで、ロードやスクロールをトリガーにして、その要素にaddClassやremoveClassしてアニメーションを発動しています。そのほうが軽いからです。 より複雑、かつ連動して動かしたい場合は、ライブラリを使用し
アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11
2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw
任意のWebサイトでどのような技術やサービスが使われているかを調査できる・「LargerIO」
LargerIOは任意のWebサイトを調査するWebツールです。URLを指定すると、そのWebサイトで使われている技術やサービス、例えば、jQueryやModernizrなどのJavaScroptフレームワーク、Google FontやFont Awesomeなどのフォントサービス、PHPやRubyなどのプログラム言語、WordPressやDrupalなどのCMS、ApacheやNginxなどのサーバー、といったように従来の調査ツールで調査できる項目は勿論、CKEditorといったリッチテキストエディタやThinkPHP、Pure CSSなどのフレームワーク、mod_pythonやmod_wsgiといったサーバーエクステンションを使っているか否か、TwitterやFacebookなどのSNSで提供されるウィジェットを使っているか等、細かいところまで調査できるようになっています。 全世界の技
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Webデザイナーが一度は読んでおくべきおすすめの本13冊 - LITERALLY
先日、読者の方から「Webデザイン習得するにあたって参考にした本は何か」という問い合わせを頂いたので、回答記事を書こうと思う（遅くなってしまいすみません）。せっかくなので、Webデザインの専門知識に関する本だけでなく、いつもインスピレーションをもらっている本も合わせて紹介しようと思う。参考程度にどうぞ。 以下の3つのジャンルについて分けて紹介。 WEBデザインを学ぶための本 デザインセンスを磨くための本 インスピレーション刺激本 WEBデザインを学ぶための本 1 インターネット技術の絵本 振り返れば、いちばんはじめに読んでおけばよかったなと思うのが、この絵本シリーズ。Webデザイン含め、プログラミングを始めた人は「Webデザインがどうやってインターネットに公開され、どうやって人の目に触れるのか」や「今の作業の全体における立ち位置」がいまいち見えなくてモヤモヤすることが多いと思う。HTMLと
JSのソースコードが変えられない！困ったときにモンキーパッチで逃げ切る方法
他人が作ったJavaScriptのプログラムを部分的に、でも元のコードを修正せずに対応するしかない…。そんなときにモンキーパッチ。やらなきゃいけないときの対処方法を実例で。 たった1つの小さな問題点を除いてきちんと動作する、第三者のコードを使ったことはありませんか？ なぜ作成者はこんなやっかいなコンソールログを削除し忘れてしまったのだろう、そのAPIコールがもう1つちゃんとしていればうまくいったのに、と思うことがあるでしょう。こうした場合、メンテナンス担当者に変更箇所を実装させるのは困難（あるいは不可能）です。自分自身でコードを変更しようにも、ソースコードを持っていなかったり、自分でコードをホストしたくなかったりするときはどう対処すればよいか悩みます。 さあ、JavaScriptのモンキーパッチの世界を一緒に探検しましょう！ この記事ではモンキーパッチとはなにかを説明します。また、第三者が
フロントエンジニアが今話題のFirebaseについて語りたい - Qiita
最初に 最近、Firebaseについての記事をよく見ます。 稚拙ながらもFirebaseについて注目している一人として語りたい。 知識不足(特に後述の歴史の認識)のため、駄文乱文あると思います。ご指摘いただけると幸いです。 React + Redux + Firebaseの実装記事を書きました。 Firebase Databse導入のために考えた4つのポイント。NoSQLと真剣に向き合った時ぶつかったことを書きました。 Firebaseとは mBaas(Mobile Background as a Service)の一つで、Googleの買収で一気に知名度が上がりました。 今までも、十分使えるものでしたが、2016年のGoogle I/Oの発表で統合プラットフォームとしての風格がムンムン漂ってきました。 また、Parse終了の知らせがでるやいなや無料プラン(SPARK)の改変、push n
第1回 プログレッシブフレームワーク Vue.js：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社
Vue.jsとは Vue.js（ビュージェイエス）は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日（日本時間）に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。 シンプルなAPIやHTMLベースの平易なテン
ここからはじめるReactの基礎の基礎 - Qiita
はじめに この記事はReactの実装をしたことがない人、JSというとjQueryくらいしかやったことがない人でも理解出来るような内容です。 Reactをはじめるというとチュートリアルからはじめるのが基本かと思いますが、チュートリアルよりミニマムにReactってどんなの？というものを実際に実装して感じようというのが目的です。 ただし、npmはインストール済みが前提なのでnpmの準備は各自お願いします。 この記事ではReactの概念よりも実装を重要視します。なぜReactが良いのか等は他記事に譲らせて頂きます。 Reactを使うとなぜjQueryが要らなくなるのか なぜ仮想DOMという概念が俺達の魂を震えさせるのか 簡単に説明すると、ReactはVirtual DOM (仮想DOM)という概念がキーポイントになり、それによって設計面、速度面に利点があります。特徴としてコンポーネントbaseのU
最新版！あらゆるWebページを作成する時に使える、必要最小限をまとめたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 HTML5 Boilerplate -GitHub イラスト: Girls Design Materials HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
ZabbxAPIとJavaScriptで独自UI作ってみた - mikedaの日記
ZabbixAPIとJavaScriptを使って簡単なグラフ表示UIを作ってみました。 『ホストグループ』→『ホスト』と選択すればいくつかのグラフが表示されます。 なぜこんなことをしてみたかというと、「Zabbixの標準UIはグラフの一覧性が低いと思うから」です。 ドロップダウンメニューで１つずつ進んでいくのではなく、チェックボックスや検索機能を使いたかった。 これに関してはぜんぜんいけそうだなという印象です。 グラフの描画にはGoogleChartAPIを使いました。 作っておいてなんですが、自分でグラフ書くのはやめておいたほうがいいです。 APIではヒストリ（短期間保存の詳細情報）は取れるがトレンド（長期間保存のサマリ情報）が取れないからです。 Zabbix本体のグラフ画像URLを動的に生成したほうがいいです。 このあたり踏まえてまた改良版を作ってみたいと思います。 今回の実装について
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery、今までありがとう【移行すべき理由と代替案3選】
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
