Vue, Nuxt, React, Next.js の特徴・役割・使いどころを整理する - Qiita
2025年7月時点の npm trends は以下の通りです。 Vue ― 小さく始めて大きく育てられる「プログレッシブフレームワーク」 Vue は 「プログレッシブフレームワーク」 として紹介されています。 「プログレッシブ」とは、小さな機能から段階的に導入でき、必要に応じてフル機能のフレームワークへと拡張できる柔軟性を指します。 例えば、既存のWebサイトにあるお問い合わせフォームや商品の絞り込み検索ウィジェットなど、特定の「動く部分」だけをVueで開発し、既存のHTMLに <script> タグを数行追加するだけで組み込めます。 <body> <h1>私の素敵なWebサイト</h1> <div id="app"> <button @click="count++">カウント: {{ count }}</button> </div> <script src="https://unpkg.
WebAssemblyはJVMやeBPFのリバイバルではない WasmがWeb以外でもアツい理由 | ログミーBusiness
Kernel/VM探検隊はカーネルや仮想マシンなどを代表とした、低レイヤーな話題でワイワイ盛り上がるマニアックな勉強会です。佐伯氏は、WebAssemblyのWebの外の応用について発表しました。全2回。前半は、Wasmがアツい理由とデザインゴールについて。 今回のテーマは「Kernel/VM的WebAssembly入門」佐伯学哉氏（以下、佐伯）：佐伯が『WebAssemblyのWeb以外のこと全部話す』というタイトルで発表します。 まず、WebAssemblyとは何ぞや？ という一般的な話なのですが、「Wikipedia」からの引用によれば、「Webブラウザーのクライアントサイドスクリプトとして動作する低水準言語である。ブラウザー上でバイナリフォーマットのかたちで実行可能であることを特徴とする」とあります。 実際の応用例としては、WebでGoogle Meetの背景ぼかしに使われていたり
BunはNodeより速いのか？ Misskeyで検証 | gihyo.jp
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はNode.js互換のJavaScriptランタイム、Bunのパフォーマンスについて、Misskeyのコードベースを用いて検証を行います。 Bunとは Bunは、Node.js（以下Node）互換である後発のJavaScriptランタイムです。 JavaScriptエンジンにNodeで採用されているV8ではなくJavaScriptCoreを採用しているほか、TypeScriptを事前コンパイルなしに実行することもできます。 肉まんのようなマスコットキャラクターが特徴です。 モチベーション そんなBunの公式サイトではNodeよりも大幅に性能上のアドバンテージがあるように紹介されていますが、こうした競合ソフトウェアとの一方的な比較は得てして限られた条件での有利な
超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
<img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointerCapture(event.pointerId) } } </script>
今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために使用されます。 代表的なものとして、console.log()がありますが、他にも様々な便利メソッドがあるので紹介を行なっていきたいと思います。 console.log() console.logはコンソールにメッセージ
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス Amazon Web Services（AWS）は、実験的な実装としてサーバレス環境のAWS Lambdaで使うことにフォーカスした軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開しました。 LLRTはRustで開発され、JavaScriptエンジンにはQuickJSを採用しています。 LLRTの最大の特徴は、現在のJavaScriptランタイムにおいて性能向上のために搭載されているJITコンパイラをあえて搭載せず、よりシンプルで軽量なランタイムとして実装することで高速に起動することにこだわっている点です。 これにより（Node.jsやDenoや
【永久保存版】0からReactを勉強するならこのロードマップに従え！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最新版を更新しました はじめに こんにちは！！@Sicut_studyです！ 最近フロントエンドを学ぶ機会が多く、色々試してみて今後 React が選ばれる場面が増えるのかなと思いました。 そこで初学者の方がJavaScriptの次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。 私自身、2022年9月に独学で React を学び始めました。 最初JavaScriptもままならない状態から始めたのですが、Reactを学ぶことでピースがうまくはまってJavaScriptをより理解できましたし、Reactができるよ
ブラウザの <canvas> 要素にクリップボードの画像データをペーストする : まだプログラマーですが何か？
タイトルそのままです。なんらかの画像をコピーしてクリップボードに格納された状態から、ブラウザ画面内の <canvas> 要素内に画像データをペーストして表示する、という処理が実現できないか試してみました。 結論としてはなんとなく実現できていると思います。サンプルを公開しているのでまずは挙動を試してみてください。 PC でもスマホでも、まず対象の画像をコピーします。今回は「いらすとや」さまのこの画像を使って試してみることにします： https://www.irasutoya.com/2021/04/blog-post_12.html まずは画像をコピーします。PC の場合は右クリックから「コピー」、スマホの場合は対象画像を長押しするとコピーできると思います： その後、こちらのページを開きます： https://dotnsf.github.io/web_image_paste/ 表示された画面
私がthrowを使わない理由
この記事について JavaScriptではthrow文という文を使うことで例外を投げることができます。 このthrow文ですが、私はレビューなどで例外を投げないでくださいというコメントをするのですがその理由とどのようにコードを変更すればよいのか、ということを書いておこうと思いました。 前提条件 この記事の内容は下記の条件を前提として書き進めていきます。 TypeScriptを採用していること フロントエンド開発の場合 Node.jsを利用したサーバーサイドのコードやCLIツールの開発、各種ライブラリの開発については本記事の対象に含まれないことをご了承下さい。 結論 先に結論から書いておくとTypeScriptを利用している場合例外はカスタムエラーを返却するか、Result型を利用するのがよいと思っています。 次の章からサンプルコードを用いながらthrow文を使った実例と、代替え案について記
小さなゲームを作るとして、ターゲットデバイスと開発環境、何向けに何で作るのがいいんだろう - ABAの日誌
じゃあ小さなゲームを作ってみようか、と思ったときに、まず考えないといけないことの一つに、PC、スマホ、ゲーム機などなど、どのデバイスで動くゲームを作るかということがある。 特にこだわりがないのであれば、PCのWebブラウザ向けのゲームを作るのがおススメだ。今のブラウザは様々な開発環境で開発されたゲームを動作させるためのプラットフォームとして成熟しているし、他の人にプレイしてもらうにも、ネット上のURL告知からシームレスに遊んでもらえてお手軽だ。 ゲーム作りを楽しむ、という面では、どの開発環境・プログラミング言語・ゲームエンジンでゲームを作りたいか、から考える手もある。これについては小さなゲームだからどうこう、ということは特になくて、自分の好みで決めて良いと思う。ただ、重厚な3Dゲームを主なターゲットとしているUnreal Engineなどは小さなゲームを作るにはリッチすぎる、などは考慮して
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
WebAssembly版SQLiteがWASI対応に。VMware Wasm Labsチームが明らかに
VMware Wasm LabsチームはSQLite開発チームと協力し、WebAssembly SQLiteがWASI対応になったことを明らかにしました。 SQLiteは昨年11月にリリースされたバージョン3.40からWebAssembly版の「SQLite3 WASM/JS」へのコンパイルをサポートし、配布される公式のバイナリにLinux版、Windows版、Mac OS X版、Android版などと共にWebAssembly版の「SQLite3 WASM/JS」が含まれるようになりました。 参考：「SQLite3 WASM/JS」パブリックベータ公開。SQLite 3.40でサポート開始、WebブラウザなどでSQLiteが実行可能に 今回このWebAssembly版SQLiteが、WebAssemblyでクロスプラットフォームを対応するWASI（WebAssembly System I
ホームページ- EY-Office
小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")（importは省略しました）と簡単に書けますが、JavaScriptでは案外面倒なのです。 追記： いくつかの間違いのご指摘がありましたので修正しました（2023-04-19）。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
ブログをAstroに移行した
ブログを Astro に移行した Astro とは Astro の公式サイトの説明を見てもらうのが早いかもしれない Astro is an all-in-one web framework for buildingfast, content-focusedwebsites. コンテンツ主体のウェブサイトを高速に作れるオールインワンウェブフレームワーク、という説明だが実際使ってみた感じ概ね合っていると思う. 特徴的なのが Astro で採用している Island Architecture と呼ばれるアーキテクチャで、UI の各コンポーネントを Island (島）のように見立ててそれぞれ独立したマイクロフロントエンドのように扱うことが出来る構成になっていること。 完全に Static な HTML とレンダリング後に Hydration (静的な HTML に後からイベントハンドラを設定)し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「JScript」に代わり「JScript9Legacy」が既定のスクリプトエンジンに ～Windows 11 24H2以降で／Web標準への準拠、パフォーマンス、セキュリティを改善
JavaScript の Segments の使い所を考える - Qiita
JavaScript (59) Snap.svgライブラリを使用
