仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
フロントエンド開発をjQueryからVue.jsへ乗り換えたので比較してみる - Qiita
この記事は、Vue #2 Advent Calendar 2019 の3日目の記事です。 Advent Calendar初参加です！ 経緯 自社で開発しているサービスの機能が増えてきて、ユーザーの利便性が問われることが多くなりました。 UI改善と言っても、そのサービスのフロントエンドはjQueryで出来ており、一新しようとしてもできる範囲に限界があります。そこで、部分的にVue.jsを導入していき、段階をとってUI改善をしていく方向性となりました。 Vue.jsは他のjavascriptのフレームワークと比べても学習コストが低く、初心者、経験者問わず、すぐに開発に使用することができるという特徴があります。 私も本来はサーバーサイドエンジニアですので、まずは学習から始まったのですが比較的すぐに技術を習得することが出来ました。頑張れば一日で基本の項目(Componentあたり？)まで習得できる
React入門 -なぜReactを使うのか- - Qiita
はじめに 私がReactに出会い１年程度経過し、React自体にも大きな変化がありました。今回は、Reactの良さを知ってもらいたいと思い、筆を取りました。 また、改めて自分の中のReactの知識を整理しようというのがサブ目標です。何回かに分けて1つのアプリを作れる程度までを記事にまとめていきたいと思ってます。 筆者のステータスは以下の通りです React・Next.jsを使って簡単なアプリを作ったことがある アルバイトでSpringを使ったwebアプリの開発をしている（フロントはjQueryゴリゴリ） Reactに出会って使用するに至った経緯 概略: jQueryで地獄を見たためReactに救いを求めました。 前述の通りjQueryを良く使用していて基本は問題なかったのですが、画面項目が増え動きがリッチになるにつれ実装難易度やメンテナンス性に限界を感じてきました。 そこでたまたま出会った
Node.js Foundationと、ESLintやAppiumなどをホストするJS Foundationが合併し「OpenJS Foundation」が発足
Node.js Foundationと、ESLintやAppiumなどをホストするJS Foundationが合併し「OpenJS Foundation」が発足 Node.jsの開発をホストするNode.js Foundationと、ESLintやAppium、jQueryなどの開発をホストするJS Foundationは合併することを発表。合併によって新しい団体である「OpenJS Foundation」が、Linux Foundation傘下で発足することが発表されました。 OpenJS Foundationは、Node.jsやNode-REDをはじめ、Appium、ESLint、Grunt、jQuery、jQuery Mobileなど31種類ものJavaScriptやWeb技術に関するオープンソースの開発をホストする団体となります。 Node.js Foundationのこれまで N
SQL: One of the most valuable skills - Craig Kerstiens
I’ve learned a lot of skills over the course of my career, but no technical skill more useful than SQL. SQL stands out to me as the most valuable skill for a few reasons: It is valuable across different roles and disciplines Learning it once doesn’t really require re-learning You seem like a superhero. You seem extra powerful when you know it because of the amount of people that aren’t fluent Let
WebPackaging の Signed HTTP Exchanges | blog.jxck.io
Intro WebPackaging は以下の 3 つの仕様を組み合わせたユースケースである。 Signed HTTP Exchanges: Signing (コンテンツに署名する) Bundled HTTP Exchanges: Bundling (コンテンツを 1 つにまとめる) Loading Signed Exchanges: Loading (そのコンテンツをロードする) 本エントリでは、各仕様を Signing/Bundling/Loading と記す。 現状、 Signing および Loading の仕様策定が進んでおり、 Chrome は Experimental な実装を行っている。 全体的に仕様が大きく、今後も変更される可能性が高いため、今回は実装が進んでいる Signing に絞り、ユースケース、仕様、および本ブログへの適用を中心に解説する。 Signing (Si
Getting Started with Vue Plugins | CSS-Tricks
In the last months, I’ve learned a lot about Vue. From building SEO-friendly SPAs to crafting killer blogs or playing with transitions and animations, I’ve experimented with the framework thoroughly. But there’s been a missing piece throughout my learning: plugins. Most folks working with Vue have either comes to rely on plugins as part of their workflow or will certainly cross paths with plugins
Replacing jQuery With Vue.js: No Build Step Necessary
I absolutely love this article by Sarah Drasner about replacing jQuery with Vue.js. We need more articles like this. “Here’s how to replace the once-new hotness with the new hotness.” I’ve been neck-deep in React-land for a while, and I’m trying to think of how this article would look like for React. I’d imagine doing a toggle would look something like: Burn all of your markup down to the ground a
SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 以前は最先端感をプンプンさせていたSPA（シングルページアプリケーション）ですが、最近では事例や情報が増え、当たり前に選択される技術となってきたように感じます。今後もどんどん使われていくのでしょう。ですが、だからといってサーバーサイドテンプレート（Haml、Slim、テンプレートとしてのPHPなど）やHTMLファイルへのマークアップが無くなるわけではありません。SEO対策、CMSやフレームワークへの適応など、様々な理由でまだまだ使われていくはずです。 ではSPAと、サーバーサイドテンプレートやHTMLファイルへのマークアップと、両方に使えるフレームワークはないものだろうか？ そう思い調べてみたところ、Vue.js がまさにそれでした。案件でも実際に使用し、大きなメリットを感じられたため、記事にまとめておこうと思います。 Vue.jsのSPAでの用
![SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c0639a571a5571b378855b1f6fd361c9080dbcf/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2018%2F02%2F30145102%2F01_ogp.png)
Railsアプリケーションにおけるフロントエンド環境のモダン化
freeeの価値基準の一つである、ユーザーにとって「本質的（マジ）で価値ある」ものを届けるということ。本連載ではそれに向かって、日々挑戦を続ける開発現場の事例をお伝えします。本記事では、freeeでのフロントエンド環境の改善への取り組みである、Ruby on Railsアプリケーションにおけるフロントエンド環境のモダン化について紹介します。Rails5.0以前の標準的なフロントエンドのビルド基盤であるSprocketsアセットパイプラインがもたらした問題について解説するとともに、その仕組みに依存して成長してきたプロダクトがいかにしてSprocketsへの依存を断ち切ったかについて説明します。 対象読者 Ruby on Rails 5.0以前のアプリケーションのフロントエンド開発で、npmによるモジュール管理やwebpackなどによるビルドを行いたいのにそれがなかなか実現できずに困っている方
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 コンポーネン
コーディング初心者こそ知っておきたい便利な「CSS関数」5選
HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた
グッバイjQuery、ハローJavaScript… あるフロントエンドの真夏のメモリー | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
自称ミニマリスト、フロントエンドのザワです。こんにちは。 今まで私はjQueryとマイメン的な感じで共に修羅場をくぐり抜けてきました。しかし、ミニマリストという性格上シンプルなものに惹かれるもので、断捨離したい衝動に駆られる時期がやって来ます。一大決心の末、jQueryにグッバイを告げ、JavaScriptとマイメン的な感じでコンビを組むことにしました。真夏のメモリー。 さて、今回は、jQueryで今まで私が記述していたものがどのように変わったのか、jQueryをよく使用するケースを例にとって、JavaScriptと比較していきたいと思います。 DOM取得編 jQueryを使用する主なメリットといえば、DOMの取得でしょう。idやclassから取得したり、findメソッドやclosestメソッドなど、DOMをトラバース（DOMを横断して移動するイメージ）して簡単に目的のDOMを取得すること
jQTouch – 画面遷移の前にデータ処理 | STUDIO Bloom 大阪・北摂地域を中心としたWebサイト・システム制作
jQTouchネタが多いですね。案件で蓄積してるノウハウの小出しですｗ あるボタンやリストをタップした時、画面が遷移する前にデータの取得やら処理を行いたい、という状況は多いかと思います。タップのイベントを拾って処理して、処理後に遷移すればOK。ということで
jQTouchの使い方とclass指定による挙動のまとめ - アークウェブシステム開発SandBox
概要 † iPhoneアプリのような挙動が、ウェブブラウズで提供できるJavaScriptのライブラリです。 jQueryのプラグインとして動作します。 公式： http://www.jqtouch.com/ 公式サイトの動画の最初の方で、SafariでURLにアクセスして「Add to Home Screen」をタップしたらホームに置かれるようですね。 その際のアイコンなども変更可能です。 ↑ 使い方 † 基本、jQueryのプラグインなので、jQueryのライブラリと一緒に読み込んでインスタンスを生成すればOKです。 <script src="js/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqtouch/jqtouch.min.js" ty
滑らかでキュートな動きのソーシャルブックマーク登録ボタン | ゆっくりと…
WordPress には SexyBookmarks という人気のプラグインがあります。チラッとだけ見えていて、マウスを載せるとピョコッと出てくるヤツです。このチラリズムが何ともセクシーなのでしょう。 CREAMUさんのブログで紹介されていた「MacのStackの動きを実装するjQuery」を見て、いつかは SexyBookmarks に対抗するソーシャルブックマークボタンを動かしたいと思っていました。で、組み込んでみたのがコレです。前回に引き続き AddThis と組み合わせるためのクラスを指定していますが、「Social Bookmarking JP」などでも使えるでしょう。 で、実は既に AddThis の Gallary で詳しく紹介されていました 😉 せっかくなので、あちらよりも多少シンプルなコードを載せちゃいます。 2010年6月8日追記 IE6 でレイアウトがズレていた問題
jQuery Form Pluginの解説と画像のAJAXアップロード - くらげだらけ
ExtJSの勉強もしてるんですがね、jQueryの方が楽ちんすぎて今でも使っているんです。 jQueryでは.load()とか.post()とか.get()とか書けば簡単にAJAXが書けますが、フォームをAJAXで扱いたい場合は「jQuery Form Plugin」を使うわけです。 これを使えばAJAXフォームの送信もカンタンカンタン。 APIリファレンスを日本語で書いたので覚え書きに載せときます。 って言っても、たいした量でもないので、いまいち分からなかったらプラグインファイルを見た方が早いですよー。 jQuery Form Plugin のAPI ■ ajaxForm() AJAX処理したい任意のフォームを設定します。 詳細についてオプション値を設定することも出来ます（オプションについては下の方に）。 Chainable: Yes. //オプション値なし $('#myFormId')
jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element | Filament Group, Inc.
jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element Update: For those interested in using this plugin: we now recommend that you download the source from Felix Nagel’s revisions of our plugin, as he’s made many improvements since we first published it. You can find Felix’s branch on Github here: http://github.com/fnagel/jquery-ui. To download a zip, look for th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger