JavaScript なしで動作するモダンなコードの書き方
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体…
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体…
普段からいくつか趣味で作ったツールやライブラリを npm パッケージとして publish しています。ちょっと工夫していることとして、「できるだけ簡単に npm publish できるようにしておく」というものがあります。npm publish が心理的に、手順的に難しいと、すでに main ブランチに新機能や修正が入っているのに、npm publish されていない、という状況が発生しがちです。新機能や修正をすぐにユーザに送り届けられるよう、npm publish は無思考でできるようになっていると嬉しいです。 その一環として、リリースノート (CHANGELOG) の自動生成というのをやっているので、その紹介をしてみます。本当は 6 月にやっていた Maintainer Month 期間 に間に合わせたかったのですが、とろとろしていたら 7 月になってしまった！ まあ遅れたから公開し
【React】知らなかったReact Developer Tools、20分で手軽に８つReact コンポーネントのデバッグテクニックをマスターする - Qiita
前書き React Developer ToolsはReactの公式開発者ツールであり、日常的なコンポーネント開発において、属性やファイルの位置特定、propsのトラブルシューティングなど様々なシーンで重要な役割を果たしています。熟練したReact Developer Toolsの使用は日常の開発をより効率的にすることができます。 この記事では、React Developer Toolsプラグインを体系的に理解することができます。本文では以下のことを学ぶことができます： コンポーネントの一時停止や遅延読み込みシナリオのシミュレーション。 コンポーネントに対応する実際のDOMを早く特定する方法。 props内の特定の関数がどこで作成されているかを早く特定する方法。 コード変更なしで、propsを介したコンポーネント変更をオンラインで検知する方法。 コンポーネントがどのファイルで作成されたかを
ブラウザ自動化ツールのSeleniumを開発したジェイソン・ハギンズ氏が新たにAIエージェントとの親和性を高めた新しいブラウザ自動化ツール「Vibium」を公開しました。 VibiumDev/vibium: Browser automation for AI agents and humans https://github.com/VibiumDev/vibium Vibium – Browser automation without the drama https://vibium.com/ 今回はWindows 11でNode.jsが利用できる環境を用意した上で、公式のチュートリアルの手順を参考にインストールします。プロジェクトフォルダを作成し、プロジェクトを初期化します。 mkdir my-first-bot cd my-first-bot npm init -y Vibiumをnp
日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして
WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。 しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。 これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に... <span
Stability AI
We’ll help you make it like nobody’s business.No creative challenge too big, no timeline too tight. Get to production with Stability AI, your enterprise-ready creative partner. Work with us. Marketing Create high-quality on-brand assets for every campaign using our image generation and editing tools.
背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな
【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつありますが、コンポーネント設計には厳格なルールが無く、どのように設計すればいいか悩む方も多いのではないでしょうか？（筆者は沼にはまりました） コンポーネントの単位はどの程度に分割すべきなのか、状態管理はどうすればいいのか、API 通信はどこですべきなのかなど、一言にコンポーネント設計と言っても考えるべき項目が多いです。チーム開発では、認識があっていないとコードが魔境になることもしばしばあると思います。（筆者の経験談より） そこで今回は、数々
My new error...
2023 年度の僕のエラーハンドリング について書きたい。 昨日Safe Data Fetching in Modern JavaScriptを読んでいて、fetch に限った話ではないが一家言ある内容だったので書きたくなった。 おそらくやりすぎだとか非効率と言われる点はあると思うので、みんなの一家言も教えて欲しい。 対象は Typescript での サーバー開発想定だが、TS であればクライアント開発にもほとんどに当てはまる話だと思う。 例外のスローではなく Result 型を使う Result は失敗するかもしれないという文脈を与えてくれる型 エラーハンドリングの戦略として例外を投げるのではなく、Result 型を返すやり方がある。 Result 型というのは export type Result<T, E> = Ok<T> | Err<E>; export interface Ok
strlen() の深淵 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
おことわり 個々の関数や変数に正しい型をつける話はしません。TypeScript HandbookのDeclarationの章などを読むことをおすすめします。 かわりに、本稿では関数や変数の型宣言をどこにどう置くべきかの指針を与えます。 モジュールとスクリプト declareを正しく使うにはまずモジュールとスクリプトの区別を理解し、意識することが大切です。 ブラウザやNode.jsは外部からの指定でモジュールとスクリプトを区別しますが、TypeScriptでは原則としてファイルの内容でモジュールとスクリプトを区別します。 import 宣言または export 宣言が1つ以上あればモジュール。 CommonJSモジュールの場合はTypeScript専用構文である import = 宣言、 export = 宣言を使う。 それ以外の場合はスクリプト。 ただし、JavaScriptファイル (
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
Next.js + TypeScript + AWS Amplify でアプリケーション開発 - 虎の穴ラボ技術ブログ
こんにちは、虎の穴ラボのNSSです。 最近ReactやTypeScriptを勉強中なのですが、Reactで作ったアプリケーションを簡単にデプロイして公開できるツールとして、AWS Amplifyがあります。 AWS Amplifyとは、AWSが提供するモバイルやWEBのアプリケーションを素早く開発することができるプラットフォームです。 AWS Amplifyは、たった数クリックでアプリケーションをデプロイできる他、 コマンドラインツールを使ってユーザー認証やAPIなど、あらゆる機能を簡単にアプリケーションに追加することができます。 今回は、ReactベースのフレームワークであるNext.js と AWS Amplifyを使ったアプリ開発をご紹介します。 環境 Node.js (v16.4.1) Next.js (v10.2.0) TypeScript Node.jsはインストール済みである
Previous slideNext slideToggle fullscreenOpen presenter view Rails vs Node.js 最終章 「Prisma」 @mizchi Cloudflare Meetup 2024/10/02 今日の Prisma + Cloudflare の様子 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります 前書き フロントエンド/Node.js 視点のポジショントークです Railsに対するチャレンジャーとして Node.js を使ってきた話 Rubyの開発者やRubyのユーザーを否定する意図はありませんが、好き嫌いは否定しません。型が好きです 「Rails」は 2010年前後に流行っていた任意なWAFに置き換え可能 Symfony
親の相続で困らない！？知らないと大変「かかるお金と対策」のすべて│遺品整理・生前整理・買取ならリサイクルジャパン
今や相続はお金持ちだけの問題ではなく「普通の家」においても大きな問題となっています。 ⾼裁判所事務総局が刊⾏した『令和３年司法 統計年報』によれば、2021年に裁判所に持ち込ま れた遺産分割事件数１万3,447件のうち、調停が成 ⽴したのは5,895件となっており、相続争いの8割近くが遺産5000万円以下の「普通の家」で起きています。 2024年1月から相続税・贈与税のルールが大きくかわっており、相続税対策は何も知らないまま、従来の相続税対策をしていたら損をする可能性が大きいです。相続についてお役に立てる情報をまとめてみました！是非ご参考にして頂ければ幸いです！ もくじ 知っておきたい相続税の基本相続税の納付までのフローチャート相続財産になるものは何？法定相続人はだれ？法定相続人の相続割合申告が必要か確認する相続税を早見表で概算チェック知っておきたい節税テクニック「生命保険」を活用して節税
Goの苦手な領域
Goの利点を使って実装するコツやノウハウを書くことがコミュニティにとってプラスになると思っているのでそれに専念したいという考えはありますが、Goの苦手な領域にGoを採用してしまってヘイトを溜め込んでしまう事例を見かけたりします。 こういう悲劇の起こる可能性を少しでも減らせたらという思いで、Goの現状の苦手な領域について解説しようと思います。Goを学び始めにこれらの領域に手を出すのは避けましょう。 Cgo is not Go GoはCGO連携でC/C++資産を利用することができますが、メモリアロケータの異なる処理系を繋ぐ関係上、お互いに呼び合う際のパラメータや戻り値はほとんどのケースでコピーが必要になります（Cの型でメモリ確保しCの型のまま受け渡しする場合はOK）。なので高頻度に呼び合うような用途には不向きであるというのはSWIGなどのような複数の処理系を連携させる仕組みと同様です。 また、
漫画家の終活 紙原稿どうする｜ほりのぶゆき
漫画家と自作の生原稿。 各漫画家でその価値は大きく異なることでしょう。 ご本人の考え方もありますがとりまく環境で全く違ってきます。 有名作家様は生原稿は資産でありそれこそ税金も絡んできますから 個人の考え方だけではどうこうできないケースも多いのではないでしょうか。 私の考え方ですが、生原稿は痛々しいです。 自身の原稿はもちろんですが大作家さんの展示されているものでも、 修正ひとつでもきれいに処理されている先生、 一方、意外とこの先生、生原稿汚いんだなというのも。 それらを見るのが嫌、ということではなく作業の苦しさのようなものが まず先に感じられてしまいます。 特にある時代までの雑誌印刷は今より精度の劣る活版印刷が主で、 処理が汚いと見える作家さんも活版に置き換えられた状態を熟知した上での 熟練の技ともいえます。 生原稿はそういった作業の厳しさ、締め切りのつらさなど、それに関わった先生、アシ
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Astro 1.0 | Astro
We are thrilled to announce Astro v1.0: a web framework for building fast, content-focused websites. Over the last 16 months, Astro has grown from an empty repo to over 13,000 stars on GitHub and 30,000 early users around the world. The Astro documentation has been translated into 6 different languages, and Astro has already been deployed at amazing companies such as Firebase (Google), Trivago, Th
Java 仮想マシンを自作したい全ての方々へ
はじめに 祝！ Java 25 リリース 先日（2025年9月16日），Java 25 がリリースされたことは，Java を愛する皆々様ならご存知のことかと思います。 特に，このバージョンは Java 21 に続く 2 年ぶりの長期サポート（LTS;Long-Term Support）版であり，企業利用においても安心して使えるバージョンとして今後の普及が見込まれています。 前バージョンとの比較や注目の点に関しては，Qiita の方に良い記事がありましたので，そちらをご参照ください。 Java の言語仕様と JVM の仕組みは公開されている ところで，Java のあらゆる言語仕様や Java 仮想マシン（JVM） の仕組みは，JEP（JDK Enhancement Proposal）や JSR（Java Specification Request）などの提案を通じて議論され，最終的に Ope
はじめに 画像は記事に全く関係ないカニのフィギュアです👋 近年、善良なパッケージを騙ったマルウェアが配布されているケースが増えてきています。 これらのマルウェアはパッケージマネージャ上で配布され、開発者端末やそれをビルトインしたシステムを利用するユーザー端末で悪事を働きます。 これは俗にいうサプライチェーン型攻撃で、 これらの関連ニュースを目にする機会が増えてきていることを、多くの開発者が体感されていると思います。 ただ、これらのサプライチェーン型攻撃の記事は、 どうしてもエンドユーザー（パッケージを利用する開発者側・それらを組み込んだアプリを実行するユーザー側）の対策に焦点が当てられたものが殆どのように感じています。 そこで本記事では、このエンドユーザー側の対策だけではなく、 パッケージマネージャメンテナーたちがどう対策しているのかも含めて、 「パッケージマネージャ上で行われるマルウェ
※1 店名・住所から全国検索：Nominatimを利用すると、OpenStreetMapのデータから店名、施設名、住所を検索できます。 ※2 ルート検索・ナビゲーション：GraphHopperやOSRMを利用できます。現在地追跡や案内は別途実装します。 ※3 道路沿いの写真閲覧：Google Street Viewそのものではありませんが、Mapillaryで道路沿いの写真を表示できます。 ※4 航空写真への切り替え：国土地理院が提供する地理院タイルの航空写真を利用できます。 ※5 表示中の範囲から店舗・施設を取得：Overpass APIで、地図の表示範囲内にある店舗や施設を取得できます。Overpass turboで検索を試せます。 過去の日本地図を見る 2010年～2026年・全12時点 自分のサーバーで表示する手順 PMTilesと専用のスタイルJSONを自分のWebサーバーに置き
はじめに 僕はDeno Land Inc.でDenoを利用したサーバレスエッジホスティングサービスのDeno Deployを開発するチームに所属しています。OSSのほうのDenoのメイン言語はRustで、Deno Deployのバックエンドも同様にRustで書かれています。 今年のアドベントカレンダーで一休さんから以下の記事が公開されましたが、日本でもRustをWebバックエンドの言語として採用する企業がじわじわと増えてきている印象があります。 Deno DeployのバックエンドをRustで開発してきて、RustでWebバックエンドを書くことのメリットやデメリットをいくつか感じたので、この記事で紹介したいと思います。 Deno Deployの構成 まず、ざっくりとDeno Deployのバックエンドの構成を紹介します。 多くのコンポーネントがありますが、ここではどのようにRustを利用し
その名はBun ﾃﾞﾃﾞﾝ BunはNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版) ちなみにロゴが本当に肉まんなのかはわかりません。（赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ...) この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。 割となんでもできる Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。 TypescriptからJavascriptへのトランスパイル jsxからJavascriptへのトランスパイル npmのようなパッケージのインストール&管理 webpackのようなプロジェクトのバンドル化 もちろんランタイムなのでNode.jsのようにサーバーでJavascriptを実行することも可能です。 これらに加えてBunには様々な機
Remix という 考え方
こんにちは、@kaa_a_zu です。今日(11/23)の日本時間早朝に React Router の制作者である @Ryan氏 と @Michael が着想した Remix V1.0 が正式リリースされました🎉 RemixがWebの世界に及ぼす影響は大きいと思っており、実際のコードやドキュメントを見ながら既存のフレームワークと何が異なっているのかを中心に書いた紹介記事です。(正直、魂が震えています) より具体的な使い方はドキュメントを見て、手を動かしていただくのが良いかと思います。また、既に国内でも使ってみた系の記事がいくつかあるようです。 Remixの機能には様々なものがありますが、当記事では筆者がより注目しているものについて書いていきます。Remixに興味があるけど、あまり追えていないという方に読んでいただけると嬉しいです。 ※この記事はGatsbyやNext.jsよりもRemix
宇宙葬打ち上げ失敗。120人の｢遺灰カプセル｣が砂漠に散る
宇宙葬打ち上げ失敗。120人の｢遺灰カプセル｣が砂漠に散る2023.05.23 12:30280,740 Passant Rabie - Gizmodo US ［原文］ （ satomi ） 風薫る5月。 UP Aerospace社（米コロラド州）が1日打ち上げたCelestis（セレスティス）の宇宙葬｢オーロラ・フライト｣のロケットが離陸直後に爆発し、NASA元宇宙飛行士を含めた故人120人の遺灰カプセルがニューメキシコの砂漠に飛散、再度仕切り直すこととなりました。 KVIA-TVによれば、爆発したのはUP Aerospace社の準軌道ロケット｢SpaceLoft XL（スペースロフトXL）｣。5月1日昼にスペースポートアメリカから打ち上げられたのですが、点火から3秒ほどで不具合が生じて空に散ってしまったもようです。 遺灰の主には、科学者のLouise Ann O’Deenさん、電波物理
JavaScript初心者のため、デバッグ力がまだまだ拙くどうしたらデバッグ力ってつくのだ…と悩んでいたら 👨💻 < スタックトレースするといいよ！ 👨💻 < スタックトレースするにはdebuggerとかconsole.trace()使うといいよ！ と教えていただきdebuggerを使ったらとても便利だったので🙏 スタックトレースとは スタックトレース (stack trace)とは エラーが発生したときに表示される内容で、そのエラーが発生するまでの過程（どんな処理がどの順番で呼び出されたかの流れ）を、ざっくりと表示したものです。 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 スタックトレースを使って問題をどう切り分けるか まずは問題が起きている箇所のスコープを狭くしていきましょう💡 問題の切り分け方として ざっくり入口と出口の関数に適切な値が入って
Next.js v14からServer Actionsがstableリリースとなり、開発体験だけでなく、ユーザ体験(ハイドレーションの完了を待機せずフォーム操作ができる、プログロレッシブ•エンハンスメントなど)の向上が見込まれます[1]。 今回は、Next.jsのServer Actionsを実装する上で注意しなければならないセキュリティ懸念事項とその対策を提案します。 Server Actionsとは formからsubmitされた際の処理(DBの更新等)をサーバサイドで非同期で実行できる関数です。ReactのServer ComponentsだけでなくClient Componentsからも呼びだすことができます。つまり、formがsubmitされた際のDB更新などの処理をわざわざエンドポイントを立てずに関数として書くことができます。[2] Server Actions(またはServ
それは脳のなかの「天使」でありながら、ときには「刺客」へと変貌するという。本書の主人公は、非神経細胞のひとつである「ミクログリア」である。 つい最近まで、ミクログリアは脳のなかの端役にすぎないと考えられていた。脳内の情報伝達を担うニューロンや、そのつなぎ役を務めるシナプスといった綺羅星たちと比べると、それが果たす役割はごく些末なものだと考えられていたのである。ところが近年、そうした見方は大きく変わりつつある。ミクログリアは脳のなかできわめて重要な役割を果たすとともに、それが誤作動を起こすと、わたしたちの健康に甚大な被害が生じることがわかってきたのだ。後者の例を言えば、うつ病や不安障害、あるいはアルツハイマー病なども、ミクログリアの誤作動と関係しているという。 本書は、ミクログリアが脚光を浴びるに至った経緯と現状を物語るものである。そしてそのストーリーは、ふたつの糸が撚り合わさった形で進行す
何故Javaは敬遠されるのか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 何故かJavaは敬遠される！？ 筆者はIT業界に努めて17年ほどです。 SESとして働きに出ることが多かったのですが、近年はWebエンジニアとして PHP(Laravel)を使った開発が多くなってきています。 そんな開発現場ですが、プログラミング言語の話題に上がると 「Javaはわからない」 「Javaって難しいんでしょ？」 「環境構築がなぁ・・・」 なんて話をよく聞きます。 私はJavaの方が経験した期間が長かったので、特にそういった苦手意識は無いのですが Laravelの現場でもそういった話を聞くので、 「フレームワークの特性や、コ
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
この記事は記事投稿キャンペーン_ChatGPTの記事です。 以下は、個人開発した最新のものになります． CreateToolAGI：ChatGPTとLangChainで何でもできるAI はじめに こんにちは、fuyu-quantです． 今回はLangChainという「大規模言語モデルを使いこなすためのライブラリ」の紹介とその機能を発展させるために作った新しいライブラリlangchain-toolsの説明およびその可能性について共有したいと思います． LangChainの機能であるtoolを使うことで，プログラムとして実装できるほぼ全てのことがChatGPTなどのモデルで自然言語により実行できるようになります．今回は自然言語での入力により機械学習モデル(LightGBM)の学習および推論を行う方法を紹介します． 記事に誤り等ありましたらご指摘いただけますと幸いです。 (※この記事の「Chat
『Google Docs』や『Figma』といったリアルタイムな共同編集ツールの恩恵を受けている人は数多くいるでしょう。『Visual Studio Live Share』のようなエンジニアに嬉しいツールも生まれ、今日ではオンライン上でも円滑なコミュニケーションが可能になっています。 これらのツールの基礎にあるのが「共同編集」のテクノロジーです。本記事ではこの技術に焦点を当て、その仕組みと主にフロントエンドでの実用例について紹介します。 記事の前半では、リアルタイムな共同編集に用いられる技術やアルゴリズムについて、発展の歴史とあわせて紹介します。解説用のコードにはJavaScriptおよびTypeScriptを使用しますが、フロントエンドエンジニアに限らず共同編集の仕組みについて気になる読者が知識を深めるきっかけとなるはずです。 さらに後半ではフロントエンドの開発者目線で、前半で紹介した技
そのJavaScript、V8が泣いてます。V8の気持ちを理解して書くパフォーマンス最適化
このスライドはSlidevで作られており、以下のレポジトリで公開しています https://github.com/riya-amemiya/amemiya_riya_slide_data/tree/main/frontend_conf_tokyo_2025
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リリースノート自動生成テクニック - mizdra's blog
Seleniumの作者によるAIと人間のためのブラウザ自動化「Vibium」
Next.js って App Router が出てきて平和じゃなくなったよね
Bubbles
Webフロントエンド開発(2021)の見取り図をつくりたい
Hono + htmx + Cloudflareは新しいスタック
TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
Rails vs Node.js
BudouX: 読みやすい改行のための軽量な分かち書き器
パッケージマネージャで配布されるマルウェア、対策と課題について - ぶるーたるごぶりん
自分のサーバーで日本地図を表示する｜Japan PMTiles
RustでWebバックエンドを書き始めてから1年くらい経った
Node.jsを過去の物にする最速の肉まん - Qiita
JavaScriptのデバッグにはdebugger文を使おう - Qiita
これからNext.jsを始める人に注意してほしいセキュリティ事項
うつ病やアルツハイマー病もそれと関係しているのか 『脳のなかの天使と刺客──心の健康を支配する免疫細胞』 - HONZ
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
ChatGPTとLangChainで何でもできるAIを作る - Qiita
共同編集を支える技術とライブラリの活用 - ICS MEDIA
anond.hatelabo.jp
anond.hatelabo.jp
nml.mainichi.jp
ameblo.jp/kinzirou2019
www.tomoeagle.com
nml.mainichi.jp