バックエンドエンジニアのためのVue.js、React、Angular入門（2025改訂版） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 解説のバージョン（2025年3月時点） Vue3.5 React19 Angular19 WEBシステム、WEBプログラム開発において昨今ではVue、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれていました。その原因について、自分はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事はバックエンド処理をメインにこなしてきたWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説となります。
jquery.dgtable - 高パフォーマンスなテーブルライブラリ MOONGIFT
社内システムにおいて、検索結果の一覧表示はよくある機能です。100行程度のデータであれば問題ありませんが、10万行をHTMLで出力するとなれば表示方法を考えなければなりません。レンダリングだけで数分待たされていたら、担当者はストレスを感じることでしょう。 今回は大量のデータ表示を行う場合に使えるjquery.dgtableを紹介します。 jquery.dgtableの使い方 jquery.dgtableは特に表示やスクロールのパフォーマンスに重点を置いています。 複数カラムを指定したソートにも対応しています。 jquery.dgtableは100万行くらいの表示であれば難なくこなします。さらにソート、カラムの移動や幅の変更、マウスオーバーですべてのデータ表示といった機能があります。多機能ではありませんが、大量のデータを表示する際には導入検討したいライブラリです。 jquery.dgtabl
Tabullet - 既存のテーブルをメンテナンスしやすくするjQueryプラグイン MOONGIFT
業務システムでテーブル表示はよく使います。そんな時、ユーザから出てくるのがデータのメンテナンスを行いたいと言う要望です。行を追加したり、編集や削除するといった機能です。一つのテーブルだけであれば頑張って実装できるでしょう。しかし、画面が多数あったらどうしたら良いでしょうか。 そこで使ってみたいのがTabulletです。jQueryプラグインで、既存のテーブルに簡単にデータメンテナンス機能を追加します。 Tabulletの使い方 メイン画面です。 データの追加を押したところ。 編集もできます。すべてテキストボックスになるようです。 データの削除もできます。 Tabulletは既存のテーブルに対して簡単にデータの追加、更新そして削除機能を追加します。後は処理を行ったタイミングでサーバ側にデータを転送すれば非常にメンテナンスしやすい仕組みができあがるでしょう。 TabulletはjQuery/J
Multi-Step-Form-Js - フォームをマルチステップに変換 MOONGIFT
入力フォームが長かった場合、幾つかのステップに分割することがあります。そうした時、都度サーバに飛ばす方式が選ばれることが多いですが、その度にデータの送信とレンダリングが行われて面倒です。 そこで使ってみたいのがMulti-Step-Form-Jsです。jQueryでフォームをマルチステップに変換してくれます。 Multi-Step-Form-Jsの使い方 デモの場合、3ステップになっています。 バリデーション機能もあります。 二番目のステップに進みました。 最後のステップになっています。 Multi-Step-Form-Jsは一つのフォームを複数のステップに変換しています。つまりサーバ側に送られるのは一度だけです。確認画面がないのが残念ですが、その部分はカスタマイズしても良さそうです。 Multi-Step-Form-JsはjQuery/JavaScript製のオープンソース・ソフトウェア
jquery-fulltable - jQueryで任意のテーブルを便利に
業務システムなどでよく使われるテーブルタグ。素のままでは小さなテーブルはよくとも、多数のデータを表示した際の使い勝手がよくありません。かといって多機能にするのは大変です。 そこで使ってみたいのがjquery-fulltableです。任意のテーブルをjQueryで多機能にします。 jquery-fulltableの使い方 適用後のテーブルです。並べ替え、フィルタリングができます。 インクリメンタルな絞り込みです。 ドロップダウンでの絞り込みも可能です。 データの追加、編集もできます。 jquery-fulltableを使えば任意のテーブルを多機能にできます。サーバサイドの変更もいらず、すぐに実装できるでしょう。他にも色々要望は出るかも知れませんが、まずはjquery-fulltableで対応してしまうことで多くのニーズは満たせそうです。 jquery-fulltableはjQuery/Jav
現場で使うjQuery · takahashiakira/tech_for_web Wiki · GitHub
Dismiss Document your code Every project on GitHub comes with a version-controlled wiki to give your documentation the high level of care it deserves. It’s easy to create well-maintained, Markdown or rich text documentation alongside your code. Sign up for free See pricing for teams and enterprises jQueryは基礎がわかれば非常に理解し易く独自の拡張も可能になります。 本記事でまずはjQueryのコピペから抜け出してみましょう。 2.1 jQueryでできること jQueryの基本構造は、DO
jQuery：要素の追加・複製・置換・削除といったDOM操作に関する備忘録 - NxWorld
jQueryで要素の追加・削除といったDOM操作に関するメソッドの動きをさっと確認できる一覧がほしくて作ったのでシェアします。 追加 .prepend() マッチした要素内の先頭に指定した要素を追加します。 下記サンプルコードはイメージのように「Blockの中にXを追加する」というものになり、.prepend()は要素をマッチした要素内の先頭に追加するので、もともとあったAより上にXが追加されます。
jQuery Snippets - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの一覧です。 May 08, 2017 追記 「jQuery Snippets #10」を追加しました。 May 07, 2017 追記 「jQuery Snippets #9」を追加しました。 September 16, 2016 追記 「jQuery Snippets #8」を追加しました。 April 25, 2016 追記 「jQuery Snippets #7」を追加しました。 February 04, 2016 追記 「jQuery Snippets #6」を追加しました。 January 05, 2016 追記 「jQuery Snippets #5」を追加しました。
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
ドラッグ＆ドロップでBootstrapベースのformが作れる「jQuery formBuilder」:phpspot開発日誌
jQuery formBuilder | Drag & Drop Form Creation ドラッグ＆ドロップでBootstrapベースのformが作れる「jQuery formBuilder」 要素をドラッグ＆ドロップで配置して、自由にフォームを生成することが出来ます。 タグを書かずにサクッとサクッとフォームの生成が可能です。 関連エントリ フォームのインライン編集を簡単に出来る「jQuery.editable」 フォームの送信をAjax化できるjQueryプラグイン「Submitter」 フォーム内の特定要素のlocalStorageへのバックアップを可能にする「DataSaver」 フォームのfile入力部分のUIを綺麗に整形できる「jQuery Filestyle」 クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト Bootstrapなフォームでのリアルタイムバリデー
【imageswitch】jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。 そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。 ウィンドウサイズを検知して画像ファイル名を置換する HTML側は.js-image-switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に768pxとします）。.js-image-switchにはCSSでス
JavaScriptライブラリ中毒者(ジャンキー)にならないために
If you were looking for MSDN or TechNet blogs, please know that MSDN and TechNet blog sites have been retired, and blog content has been migrated and archived here. How to use this site Archived blogs are grouped alphabetically by the initial letter of the blog name. Select the initial letter from the TOC to see the full list of the blogs. You can also type the name of the blog or the title of the
เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย
เว็บสล็อตโรม่า joker123 เป็นทางเลือกที่น่าเชื่อถือสำหรับผู้เล่นที่ต้องการความมั่นใจในการเดิมพันออนไลน์ ด้วยระบบความปลอดภัยระดับสูงและการตรวจสอบอย่างเข้มงวด คุณสามารถวางใจได้ว่าทุกการเล่นของคุณจะเป็นไปอย่างยุติธรรมและโปร่งใส เว็บไซต์นี้ได้รับการรับรองจากหน่วยงานที่เกี่ยวข้อง ทำให้คุณหมดกังวลเรื่องการโกงได้อย่างสิ้นเชิง เว็บสล็อตโรม่า joker123 สล็อตโรม่า นอกจากนี้ ทีมงานมืออาชีพพร้อมให้บริการตลอด 24
jQuery：画像や要素をランダム出力する方法の備忘録 - NxWorld
jQueryを使って画像や要素などをランダムに並べ替えたり表示させたりする方法の備忘録です。 ただ、jQueryと言っても乱数を作るのに必要なわけではなく全体的にJavaScriptだけでできる感はありますが、やっぱり何かと楽に実装できるのでここではjQueryを使っていきます。 画像をランダム表示する img要素のsrcを書き換えることで画像をランダム表示させる方法です。 HTMLとjQueryはそれぞれ下記のように記述し、スクリプトの記述にあるvar imagesのところでランダムで表示させたい画像のパスを記述します。 あとは、.attr()を使ってランダムで選ばれたものを指定した要素のsrcを書き換えるよう記述してあげれば、ページを表示する度にランダムで選ばれた画像が表示されるようになります。
1000以上のjQueryプラグインが探せるサイト「jQuery Cards」 | ライフハッカー・ジャパン
「jQuery Cards」は1000以上のjQueryプラグインが探せるサイトです。jQueryのプラグインがカテゴリごとに分かれ登録されています。どのように導入するか、ダウンロードできるGitHubのページへのリンクも記載されていました。 以下に使ってみた様子を載せておきます。まずjQuery Cardsへアクセスしましょう。 このようにUI系やフォーム関連などカテゴリごとに分けられています。検索フォームから任意のキーワードを入れてプラグインを検索することも可能。 このようにプラグインに関する詳細情報およびリソース元のGitHubなどへのリンクが記載されていますよ。jQueryのプラグインをお探しの際はぜひご活用ください。きっと探しているプラグインが見つかるかと思います。 jQuery Cards （カメきち）
jQuery samples - Ajax時にローディングを表示
jQuery samples - Ajax時にローディングを表示 本エントリーは「to-R JavaScript Advent Calendar 2015」17日目のエントリー、今回のjQuery samplesは、Ajax時にローディングを表示する方法についての解説です。 単純に Ajax時にローディングを表示する方法から僅かに遅延させる方法、共通設定にする方法まで解説していきます。 CSS3でローディングを設定 まずは以下の様なHTML/CSSでローディングを作成しておきましょう。 <button id="ajax">ajax</button> <ul id="list"></ul> <div class="loading"> <div class="loading_icon"></div> </div> .is-hide{ display:none; } .loading{ posi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSONから高性能なtableを作成してくれるスクリプト・「Tabulator」 - かちびと.net
Bootstrapでのtableにソートやページネーション、検索機能等を付与するスクリプト・「jQuery Bootgrid」 - かちびと.net
リストやテーブルにフィルタリング機能やソート、検索機能を付与するスクリプト・「List.js」 - かちびと.net