（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
JavaScript と jQuery の書き方の比較 | knooto
このページは、 JavaScript と jQuery の書き方の違いをまとめる予定のページです。 目次 注意 「jQuery で書いていたコードを jQuery 無しの時どう書くか」の参考ページです。 このページを作ったひとが自分のために記載しているため網羅性はありません。 少し古いですが基本的には You Might Not Need jQuery を見るといいと思います。 コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。 できるだけ素の IE11 以上で使用できるように調整しています。(他の想定ブラウザは Edge, Chrome, Firefox) 書き方の比較 要素の条件確認 is(selector) jQuery const $target = $('#foo'); if ($target.is('input[type=password]')) {
【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】
エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「Goのフレームワーク“Revel”を触ってみた」でした。 これからGoをはじめてみようという方にはとても入っていきやすい内容です。是非。 # 前置き最近、HTML要素をフェードイン/フェードアウトする実装をしました。 たかがフェードインアウト、と侮るなかれ。 「CSSだけで表現」「JavaScriptは極力関与しない」「とにかく簡潔に」と決めて取り掛かるといくほどか難易度がアップします（しました）。 実装を終え、なるほどなぁと思うところがあったのでそのことを書くことにしました。 よろしければお付き合いください。 # 達成条件以下を満たす、フェードイン/フェードアウトを実装します。 アニメーションをスタートす
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
ウィンドウサイズの取得・判定をしてみよう | TOMONO Tech-Blog
レスポンシブ対応のときに、ウィンドウサイズによって何かしらの処理を行うことがあります。 CSSではメディアクエリを使って、ウィンドウサイズによってスタイルを指定することができます。 p { font-size: 18px; } @media screen and (max-width: 768px) { p { font-size: 16px; } } @media screen and (max-width: 375px) { p { font-size: 13px; } } しかし、JavaScriptではwindow.innerWidthやjQueryのwidth()でウィンドウ幅を取得して、判定しなければならず、CSSと違ってウィンドウサイズが変更されたらそれを検知して実行する必要があります。 これがまた一手間で、ブラウザによっては挙動が違ったり、検知に負荷がかかってしまったり…。
jQuery でスクロール終了イベントを取得する : まだプログラマーですが何か？
jQuery を使うと、スクロールイベントを簡単に取得したり、スクロールイベントに対するハンドリング処理を実現できます： $(window).scroll( function(){ var scroll_top = $(this).scrollTop(); //. スクロール位置 : （スクロール時の処理） console.log( 'top = ' + top ); : }); ただ、少し取扱が難しい面もあります。上記の内容のままだとスクロールを感知する毎にイベントが発生し、その全てをハンドリングすることになります。要するに一回のスクロールの中で何度もこの処理を繰り返すことになります。 これを「スクロールが一段落したらハンドリング処理を行う」ように改良してみます。考え方として一定時間（以下の例では 200 ミリ秒）スクロールイベントが発生しなかったらハンドリングする、という考え方で擬似的
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでhoverした時にfadeIn,離れた時にfadeOutさせたいのですがhoverしているときにfadeIn,fadeOutが繰り返されてしまいます。