Vue.js - The Progressive JavaScript Framework | Vue.jsVueconf 2026 · Join us for all things Vue + AI · VUE2026 FOR 20% OFF! · May 19-21 2026 Register
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
デジタル庁でjQueryが何をしているのか - laiso
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
HonoとDenoで社内ツールを作ってみた - RAKSUL TechBlog
こんにちは！ラクスルの灰原です！ 軽量かつ高速なWebフレームワークであるHonoと、新進気鋭のJSランタイムであるDenoを使って、社内ツールを作ってみましたので紹介します。 作ったツール 技術スタック index.tsx の内容 Tips HonoでTwindを使う HonoのJSXでAlpine.jsを使う Hono+Denoでesbuildを使う おわりに 作ったツール テックブログ向けのアイキャッチ画像ジェネレータを作りました。 タイトルを入力して、 背景画像と文字色を選んで、 文字の位置と大きさを調整して、 後は「Download」ボタンを押せば画像が手に入ります。 これは以前、弊社デザイン組織で作られた「Zoom背景ジェネレータ」に多分に影響されています。 こちらのデザイナーブログも是非ご覧ください！ note.com 技術スタック このツールは利用頻度がそこまで多くないと思
個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
Hono + htmx + Cloudflareは新しいスタック
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
Scala.jsを全力でオススメする - Qiita
この記事はAizu Advent Calendar 2015 @ababup1192の記事です。 innocentyknrさん <- 前の人 ・ 次の人 -> masapontoさん 記事の内容 AltJSの一種であるScala.jsをオススメする記事です。以下の点を軸として紹介をしていきます。ScalaとScala.jsの魅力を語り続ける記事なので、環境構築資料としては役に立たないと思います。 Webフロントエンド開発の現状と環境 言語の強み Scala.jsを使ったモダンな開発 Scala.jsとは 名称から分かる通りAltJSの一種でScalaからJavaScriptへと変換するものです。Scala.jsの公式サイトを見ると非常に丁寧に、他言語との比較・チュートリアル・使用可能なライブラリ・コミュニティへのリンクなどが説明されています。初心者の方でも簡単にScala.jsを始められる
Scala.js（+Laminar）でちょっと変わった Web フロント開発
最近 Web 開発に傾倒しつつあるクライアントエンジニアの@Pctg_x8です。 今年に入って Scala3 の RC が外れたのをきっかけに少しずつ趣味の範囲で触っています。 その中で、今回は Scala コードを JavaScript コードにコンパイルできる Scala.js と、その上で動く UI ライブラリの Laminar の紹介と、触ってみた感じの話を書きます。 Scala.js とは Scala で書いたコードを JavaScript に変換してくれるコンパイラバックエンドです。 フロント部分は Scala そのものなので Scala3 も問題なく使用することができます。原理上は（厳密には周辺のライブラリなどの対応が微妙に追いついていません）。 Scala3 は最高の言語なので（個人談）、要するに Scala.js を使うと最高の言語で Web 開発ができるようになります。
ぼくのかんがえたさいきょうのGAS開発手法2023
前提clasp の制約、Script API の考え方、Google Drive の考え方に素直に従うその条件下である程度モダンな開発環境での開発を目指す 可能ならコードは VCS で管理する（pull-req など）ドキュメントベースで共同作業に向いた手法で開発を進める特にカジュアルに始めやすい Google Apps Script は悪い意味での属人化まっしぐらになりやすい。これが長期間の業務に影響しないような、ワンショットのものなら別にそれでもよいが、これが誰かに引き継がなければいけないような状況が生まれると一気に地獄みが増してしまうので、そうなってしまう前により良い開発手法を考えておきたい。 考慮したことGAS は素朴に作ると Script 本体の構造がそれを利用する container （例えば Spreadsheet）のデータ構造などと密結合になってしまう。この状態のままコード
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
chatgpt.js — A powerful JavaScript library for ChatGPT
A powerful client-side JavaScript library for ChatGPT
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
Tampermonkey Greasemonkey の使い方 userscriptの書き方 | hyperT'sブログ
TampermonkeyとGreasemonkeyの使い方とUserScriptの書き方を解説します。 これらのアドオンを使うことによりウェブページの見た目を自由に変更することができます。userscriptを自分で思い通りに作れるようになれば、ネットサーフィンの効率が飛躍的に上がります。 UserScriptを使ったプログラミング例を少しだけ紹介します。 例1.グーグルにツイート検索機能を付ける。 Tampermonkey、Greasemonkeyを導入しよう。 どちらを使っても構いません。スクリプトには互換性がありどちらにも移植可能です。 今回はTampermonkeyの操作法だけを解説します。 UserScriptの書き方はどちらでも全く同じです。まずはアドオンをインストールします。 Tampermonkey Chrome用、Firefox用、Edge用 Greasemonkey h
あなたが知らないであろう15個の強力なJavaScriptのテクニック🗡🔈🔥
はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',
書籍執筆しました！『1冊ですべて身につくJavaScript入門講座』
書籍執筆しました！『1冊ですべて身につくJavaScript入門講座』これまでHTMLやCSS、WordPressの入門書を書いてきた私ですが、このたび新たにJavaScriptの入門書、『1冊ですべて身につくJavaScript入門講座』という本を執筆しました！2023年3月1日発売で、本日より予約開始です！ カバーイラストはこれまでと同様ICHIRAKU STUDIO 様に描いていただきました！今回も素敵なイラストをありがとうございます！ こんな人におすすめWeb サイトに動きをつけてみたい人HTML と CSS の基礎を学んだあと、何を勉強しようか考えていた人一度 JavaScript を勉強したけど挫折した人最近の JavaScript の書き方を学びなおしたい人jQuery を卒業したい人JavaScript ってなんだろう？というところから、動きのある Web ページを作ってみ
JavaScriptランタイム「Bun v0.3.0」リリース。メモリ消費量が3分の1以下に、npmパッケージの自動インストールなど
JavaScriptランタイム「Bun v0.3.0」リリース。メモリ消費量が3分の1以下に、npmパッケージの自動インストールなど サーバサイドで実行可能なJavaScriptランタイム「Bun」の最新バージョン「Bun v0.3.0」がリリースされました。 BunはJavaScriptランタイムとバンドラ、トランスパイラ、タスクランナーなどの機能が最初から統合されているソフトウェアです。 JavaScriptエンジンにはSafariに搭載されているJavaScriptCoreを採用。Node.jsの主要なAPIやNode.jsのモジュール依存関係解決アルゴリズムも実装し、内蔵するnpmクライアントにより高速にnpmパッケージを読み込んで利用できるなど、Bun単体でさまざまな機能が統合され、便利に使えます。 さらにTypeScript/JSXトランスパイラによってTypeScriptファ
「秀丸エディタ」、JavaScriptによるマクロに対応
設定が初期状態かつ保存されない状態の秀丸エディタを別のアプリとして使える「プライベートモード」も利用可能になった。検索窓やクリップボードの履歴などでもダークモードを使えるようになった他、メニューバー・ツールバーに関する調整が入った。 関連記事 「秀丸」11年ぶりメジャーバージョンアップ ダークモードなど新搭載 「秀丸エディタ」の最新版「Ver9.00」が公開。11年以上ぶりのメジャーバージョンアップだ。 ITエンジニアが使いたいエディタトップ10 「Visual Studio Code」は3位 1位は？ ITエンジニアが最も使いたいエディタは？──パーソルキャリアがランキングを発表。1位は「サクラエディタ」、2位は「秀丸エディタ」だった。 iPhoneとMacを行き来して原稿を書く方法 iPhone用テキストエディタをお探しの貴兄に。 関連リンク 秀丸エディタの更新履歴
見てるページを全部保存するという行ない - Diary
見てるページを全部保存するという行ない をもうずっとしていて、以下のような user.js でページを全部保存してます。 // ==UserScript== // @name 見たサイト全部保存 // @namespace http://tampermonkey.net/ // @version 0.1 // @author You // @match http://*/* // @match https://*/* // @grant GM_xmlhttpRequest // @noframes // ==/UserScript== if (!!document.querySelector("title")) { const title = document.querySelector("title").textContent; const url = location.href; GM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
どこでも動くWebフレームワークをつくる
