本記事では、2025年5月14日に開催されたオンラインイベント「【技術選定を突き詰める】Online Conference 2025」内のセッション「技術選定の審美眼 2025年版」の内容をお届けします。同セッションでは、タワーズ・クエスト株式会社の和田卓人（@t_wada）さんに、1990年代前半から現在にかけての技術の変化の歴史についてお話いただきました。ぜひ本編のアーカイブ動画とあわせてご覧ください。 和田： 和田卓人（t-wada）と申します。インターネット上ではt-wadaさんと呼ばれています。技術顧問としてコンサルティング業を多く手掛ける傍ら、技術書の出版や翻訳にも関わっています。SQLアンチパターンという本の第2版が7月上旬に発売されますので、是非よろしくお願いいたします。 本日の講演は、「技術選定の審美眼2025年版」です。2018年頃にDevelopers Summi
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
The new wave of Javascript web frameworksMake sense of the proliferation of new Javascript web frameworks. A deep dive into the problems at scale and the recent evolution of innovation. IntroductionStaying current in the Javascript ecosystem is not for the faint of heart. It’s challenging for those entering the industry to follow what’s happening amongst the new libraries, frameworks, concepts, an
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Webシステムの開発に携わりたくて転職して9か月，知らない事ばかりで日々勉強しております。 自分の勉強用メモとして知っておくべき技術をまとめようと思いました。 (こちらの記事にインスパイアされたものです) 技術用語について，なるべく2～3行で概要を説明できる事を目指しています。 情報が多過ぎるので，主流な技術は見出しを赤字にしています。(主観強め) また，今後需要が増えそうな技術は青字にしています。(かなり主観強め) とはいえ，新しい技術が登場すれば，数年でトレンドが変わってしまう事も多々あると思います。 ほとんどはあくまでも
import Image from '../../components/R2Image.astro'; As a former backend engineer, I sometimes find React complex. Moreover, as a framework developer, creating a hydration mechanism can be troublesome. But we often end up using React. One of the main advantages of using React is JSX. At first, JSX seems strange - "Why are HTML tags in JavaScript!!!" However, once I get used to it, I find that JSX i
How many requests should it take to navigate to another page? In the simplest case, a navigation is resolved in a single request. You click a link, the browser requests the HTML content for the new URL, and then displays it. In practice, a page might also want to display some images, load some client-side JavaScript, load some extra styles, and so on. So there’ll be a bunch of requests. Some will
Lightweight Javascript Framework Review (For Django Developers)
Lightweight Javascript Framework Review (For Django Developers) The Full-Stack Django Series: How to Combine Frontend and Backend Lightweight Javascript Framework Review How to add Typescript to Django Django Favicon Guide How to Develop Responsive HTML Email in Django Django Form Validation Guide Introduction Many developers are confused when they try to find a Lightweight Javascript Framework fo
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「プログラミング技術の変化で得られた知見・苦労話」という Qiita Advent Calendar 2020 への参加記事です。2000 年から 2020 年現在までのプログラミング言語、フレームワークや開発環境などの変遷や経験を振り返り、そこから感じたことを書いています。 出来事を書いてから知見をまとめる書き方だと長ったらしくて分かりにくい「単なるおっさんの昔話」な記事になってしまうので、逆に知見を見出しにしてなぜそう考えるのかを記述する形式をとります。 目次を見て太字のところだけを読めば知見が分かるわけですが、結論だけ見ると、ある
Google Apps Scriptで意外とよく利用されてるのが、ウェブページのスクレイピング。今どきのウェブサービスだとREST APIが装備されてるのが半ば当たり前になってきていますが、そうではないサイトや提供されていないサイトも非常に多いです。 そういったサイトのデータを手動で検索し値をコピー、貼り付けて整形してから処理をするのではスマートではありません。そういったケースを自動化するのがスクレイピングの主な目的です。但し、連続してスクレイピングを行うと相手方ウェブサイトに多大な負荷を掛け、また場合によってはアクセスを禁じられる恐れもあるため、利用する頻度やルールは守りましょう。 今回使用するサービス等 スクレイピングサンプル - Google Spreadsheet Google Cloud Functions Puppeteer cheerio for Google Apps Sc
「フォームでメタタグやカテゴリなどの複合条件を選択して絞り込み検索する」では、フォームを使ったサイト内絞り込み検索の事例を紹介しました。この事例ではページ遷移して検索結果が表示される仕様でした。 今回はAjaxを使って、検索時にページ遷移しない絞り込み検索を作ってみます。 WordPressはデフォルトでAjax処理をするファイル（/wp-admin/admin-ajax.php）を持っているので、そのファイルを使います。 例として、カスタム投稿タイプで管理する「仕事情報（jobs）」を、カスタムタクソノミーで管理する「スキル（jobs_skill）」とカスタムフィールド（アドバンストカスタムフィールド）で管理する「エリア（jobs_area）」を条件にして絞り込む、絞り込み検索をつくることとします。 作る（あるいは編集する）ファイルは4つ。 HTMLテンプレート： archive-job
プラグインを使わずにお問い合わせフォームをつくります。画面遷移せずに完了するように fetch API を使います。jQuery でいうところの ajaxメソッドです。画面遷移しないことの利点は固定ページが1ページですむことくらいかと思いますが、確か Contact Form 7 は送信だけではなくバリデーションにも Ajax を使っていたと思います。 WordPress の Fetch（ Ajax, 非同期通信）ブラウザ側の処理（クライアントサイド）フォームの作成fetch でサーバにリクエストするサーバーサイドブラウザ側の結果処理（クライアントサイド）エラーについてnonce 検証の fatal error!response.ok のエラーメール送信のエラーデモサイト 01WordPress の Fetch（ Ajax, 非同期通信） WordPress の非同期通信はすでに利用した経
(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法 - Blog | Samurai Web Works サムライウェブワークス -ロサンゼルスのウェブデザイン会社-
“reCAPTCHA リキャプチャ” は、現在メールフォーム、もしくは会員登録の際等に用いられるスパム防止機能です。こちらは、最新のクリックが必要の無いタイプ (reCAPTCH V3) の設置方法を記していきます。 Google reCAPTCHA に登録してAPIキーを入手する まず始めに http://www.google.com/recaptcha/intro/ Google reCAPTCHA ページにアクセス、右上の青ボタン Get reCAPTCHA をクリック。Google アカウントをお持ちの方はそのまま次へ、無い方は登録して頂く必要があります。 次に各情報を入力します。 Label には任意の情報を (登録するウェブサイトのコンタクトフォーム等) 、 Choose the type of reCAPTCHA では、ウェブサイトの場合はreCAPTCHA V3 を選択。
Make your website feel like a single-page app — without JavaScript Lightweight AJAX navigation library Traditional websites reload the entire page on every click. µJS changes that: it intercepts link clicks and form submissions, fetches the new page in the background, and replaces only the content that changed. The browser never fully reloads — navigation feels instant, like a single-page applicat
WordPress でサイト制作をしていると必ずと言っていいほどお世話になるのが、問い合わせフォームを簡単に設置できる Contact Form 7 です。有名なプラグインだけあって多くのサイトで設定方法などが解説されていますが、がっつり開発者向けの記事は見かけません。ということでここでは Contact Form 7 をプラグイン／テーマ開発者向けに解説します。記事内で引用しているソースのバージョンは、記事公開時の最新版 v5.4.1 です。 カスタム投稿タイプ wpcf7_contact_form について サイドメニューの「お問い合わせ」で表示されるコンタクトフォーム一覧ですが、これらはカスタム投稿タイプ wpcf7_contact_form として wp_posts テーブルに保存されています。コンタクトフォームをページ内に表示させる際に エラー: コンタクトフォームが見つかりませ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の審美眼 2025年版 - Findy Media
Hono + htmx + Cloudflareは新しいスタック
The new wave of Javascript web frameworks
Webシステム開発で関わる技術のまとめ(2022年に知った物) - Qiita
Hono + htmx + Cloudflare is a new stack - Yusuke Wada
One Roundtrip Per Navigation — overreacted
2000年以降20年間のプログラミング技術の歴史を振り返って、得た知見を書いてみる - Qiita
Google Apps Scriptでスクレイピングを極める【GAS】 | 🌴 officeの杜 🥥
Ajaxでページ遷移なしの絞り込み検索をつくる | WordPressカスタマイズ事例【100ウェブ】
WordPress：Fetch（Ajax）でお問い合わせフォーム（プラグインなし）
µJS — Lightweight AJAX Navigation Library
テーマ／プラグイン開発者なら知っておきたい Contact Form 7 のこと