2024年版：エンジニアが今、学ぶべきJavaScriptフレームワーク完全比較 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは！今回は、現役エンジニアとして押さえておくべきJavaScriptフレームワークについて、案件状況や今後の展望を踏まえてランキング形式で解説していきます。 目次 フレームワーク選定の重要性 2024年注目のフレームワークランキング 各フレームワークの詳細比較 結論：あなたの状況別おすすめフレームワーク フレームワーク選定の重要性 フロントエンド開発において、適切なフレームワークの選定は以下の点で非常に重要です： プロジェクトの生産性に直結 チーム全体の開発効率に影響 長期的なメンテナンス性 採用市場での価値 2024年注目のフ
2024-10-29のJS: Svelte 5、MSW v2.6.0(WebSockets API)、State of CSS 2024
JSer.info #713 - Svelte 5がリリースされました。 Svelte 5 is alive Svelte 5では、Runesと呼ばれる構文とReactiveの仕組みがサポートされています Svelte 4の構文は引き続きサポートされていますが、マイグレーションガイドではRunesへの移行方法が紹介されています。 Svelte 5 migration guide • Docs • Svelte MSW v2.6.0がリリースされました。 Release v2.6.0 · mswjs/msw MSW v2.6.0では、WebSockets APIのモックがサポートされました。 詳細は次のドキュメントを参照してください。 Handling WebSocket events - Mock Service Worker ws - Mock Service Worker State
Claude AIがブラウザ内でJavaScript実行可能に！コード不要のデータ分析ツールで業務効率化へ前進 - イノベトピア
Claude AIがブラウザ内でJavaScript実行可能に！コード不要のデータ分析ツールで業務効率化へ前進 Last Updated on 2024-10-26 15:21 by admin Anthropic社は2024年10月24日、AI チャットボット「Claude」に新機能「分析ツール（analysis tool）」を実装したことを発表した。 主な特徴は以下の通り： JavaScriptのコード実行環境が統合され、ブラウザ上で直接コードを実行できる CSVファイルやPDFなどのデータファイルを分析し、インタラクティブな可視化が可能 プログラミング知識がなくても、データ分析やグラフ作成をリアルタイムで実行可能 性能面での改善： Claude 3.5 Sonnetのプログラミング性能がSWE-Bench Verifiedテストで33.4%から49.0%に向上 TAU-benchでの
JS ランタイムの標準への意見と妄想
私がバックエンド JavaScript に求めている妄想を、お前何様目線で綴っていきたいです。 目的 現在の JavaScript ランタイムについて知ってもらう 共感してほしい 「バックエンド JS ランタイム」を定義 ブラウザでない JavaScript 実行環境 (Node.js, Bun, Deno, Workerd, WinterJS...) とします。 標準？ Web 標準は、ブラウザのために作られました。そのため、バックエンド JS ランタイムが提供するサーバー機能などは Web 標準の範囲外で、各ランタイムが独自に拡張しています。これについては、 を読んでいただくとわかるかと思います。 各ランタイム独自拡張の問題点 これによって起こる問題として、ランタイム間の移行可能性が低くなってしまうということです。 例えば、以下のように、 Deno で書かれたコードを Bun に移行す
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号)
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/10/15 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 PR TIMES フロントエンドの CI パイプラインを改善して、CI 処理時間と Billable Time を 50%を削減した話 | PR TIMES 開発者ブログ changed-files という github action 使って、変更があった特定のディレクトリのみ
世界最大級の「完全栄養食サブスク」をともに創るフロントエンドエンジニア募集！
世界最大級の「完全栄養食サブスク」をともに創るフロントエンドエンジニア募集！ ベースフード株式会社 @basefood TypeScript JavaScript Vue.js React Angular I want to hear a detailed 何をどうやって実現する仕事か？ ベースフードが独自開発するECシステムの開発・運用に携わっていただき、よりユーザ体験を向上させるようなシステムを目指していきたいと思っています。 https://shop.basefood.co.jp/ なぜやるのか ベースフードはこれまで、一食に必要な栄養素を全て含む完全栄養食を独自開発の自社Webサイトを通じて販売してきました。 これからは「健康をあたりまえにするWell-Beingサービス」を目指し、ユーザーのヘルスケアデータを活用したアプリやサービスも開発していきます。 「人生を楽しみ尽くす基盤の
【海外記事紹介】CommonJSからESMへの移行手順まとめ
10月17日、Denoは「CommonJSからESMへの変換方法」というブログ記事を公開した。ECMAScriptモジュール（ESM）は、最新かつ公式なJavaScriptの記述・共有方法であり、多くの環境（ブラウザ、エッジ、Denoのような最新のランタイム）でサポートされており、非同期ローディングやグローバル変数を使わずにエクスポートできるなど、開発体験も向上する。一方、CommonJSは長年にわたって標準とされてきたが、現在ではJavaScriptコミュニティにとって障害となっている。JavaScriptを将来的に見据えて開発するには、すべての新しいコードはESMで記述するべきである。しかし、互換性の理由から、レガシーコードベースを最新のパッケージに対応させるためにモダン化する必要がある場合もある。今回の公開内容では、レガシーなCommonJSプロジェクトをESMに対応させるための構文
2024-10-16のJS: Deno v2、TypeScript 5.7 Beta、ES2025に入る5つのProposal
JSer.info #711 - Deno v2.0.0がリリースされました。 Announcing Deno 2 Deno 2.0 Release Candidate Node.jsとの互換性の改善、JSRのサポート改善、Workspaceのサポートなどが行われています。 Deno 1.xから2.xへのマイグレーションガイドも公開されています。 Deno 1.x to 2.x Migration Guide TypeScript 5.7 Betaがリリースされました Announcing TypeScript 5.7 Beta - TypeScript 初期化されてない変数のチェック、相対パスの.tsを出力時に.jsへと書き換える--rewriteRelativeImportExtensionsフラグの追加されています。 また、--target es2024のサポート、Node.js 2
サイト模写を通じたWeb開発学習: CSS, HTML, JavaScriptの活用法 - Qiita
Web開発の基礎技術であるCSS、HTML、JavaScriptを使い、実際に既存のサイトを模写する学習に挑戦しました。この記事では、その学習プロセスを要約し、特にIDやクラスの使用、スタイルの適用、そしてJavaScriptによる動的な機能の追加に焦点を当てています。 HTMLの基礎 HTMLはウェブページの骨組みを構築するための言語です。HTMLを書く際には、<div>、<header>、**<nav>**などのタグを使用して、ページの構造を定義します。模写したサイトでは、ハンバーガーメニューを含むレイアウトが特徴でした。以下はその基本的なHTML構造です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サイト名</title> <link rel="stylesheet" href="sty
Deno 2 リリース — Node.jsとの互換性向上、標準ライブラリの提供、JSR連携など多数の改善を含むメジャーアップデート
10月10日、Denoは「Deno 2」を正式に発表した。Denoは、JavaScriptおよびTypeScriptをサポートする現代的なツールチェーンとして、すでに数多くの開発者に愛用されているが、新バージョンのDeno 2はさらに多くの機能と強化を備え、特にNode.jsおよびnpmとの互換性を大幅に改善している。 Deno 2の主要機能 Deno 2では、多くの新機能が導入されている。以下は主な機能である。 Node.jsおよびnpmとの互換性：Deno 2は、既存のNode.jsプロジェクトやnpmパッケージをシームレスにサポートしており、package.jsonやnode_modulesを直接利用可能である。これにより、既存のNodeプロジェクトにDenoのツールを導入することができる。Denoでは、npm:という形式でnpmパッケージをインポートすることも可能で、node_mo
イテレータを分岐させるとどうなる？ Iterator Helpersに見るJavaScriptのイテレータの挙動
2024年10月のTC39ミーティングでは、Iterator HelpersがStage 4となり、ECMAScriptの仕様に追加されることが決定しました。Iterator HelpersはすでにGoogle Chromeなどで試すことができます。 Iterator Helpersは概してわかりやすい機能群ではありますが、やはり元々がJavaScriptということで、直観的には理解しがたい挙動もあります。そのような挙動は、とくにイテレータを分岐させたときに見られます。 ということで、この記事ではイテレータを分岐させた場合の挙動を見ていきましょう。Iterator Helpersそのものに関する基礎的な説明は省略していますので、他の記事をご覧ください。 イテレータを分岐させる Iterator Helpersは、イテレータに生えたメソッドであり、返り値は新しく作られたイテレータです。そのた
便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver
DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新しいライブラリを紹介します。 Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライブラリのデモ ライブラリのインストール ライブラリの使い方 ライブラリの仕組み ライブラリのサポートブラウザ カスタムプロパティのトランジションに関する注意事項 はじめに
JavaScriptランタイムのBunが、C言語のコンパイルとJavaScriptプログラムからの実行をサポート
JavaScriptランタイムのBunが、C言語のコンパイルとJavaScriptプログラムからの実行をサポート JavaScriptランタイムのBunは、C言語のコンパイルとJavaScriptプログラムからの実行をサポートすると発表しました。 In Bun v1.1.28, we added support for compiling and running C from JavaScripthttps://t.co/eoClllphwj pic.twitter.com/YwCW7Uc7CT — Bun (@bunjavascript) September 18, 2024 JavaScriptを用いてアプリケーション開発を行う際に、システムの持つ機能を呼び出したい場合にはNode.jsやBunに実装されたN-API、もしくはJavaScriptエンジンV8のAPIをC言語経由で呼び出
webpack to Rspack ~ Rspack移行の結果と注意点 ~
プロダクトのビルドツールを webpack から Rspack に移行したので、その経緯と注意点をまとめます。 🦀 Rspackとは？ Rustで書かれた高速なJavaScriptのバンドルツールです。 webpackエコシステムとの強力な互換性を持ちます。 2024/08/24にv1.0.0がリリースされました。 🤔 なぜRspackに移行したのか？ ビルド速度改善のため以前からwebpackの移行を検討していましたが、プロダクトがwebpack依存の構成[1]で、Viteやその他のビルドツールへの移行が少し面倒でした。 Rspackであればwebpackのプラグインもそのまま動き移行が容易、かつ速度改善が見込まれるためRspackへの移行を選びました。 💡 移行方法 移行方法は、rspackの公式ドキュメントの migrate from webpack をそのまま参考にして進めま
JavaScriptの非同期処理をしっかり理解する 〜async/await/Promise〜 - Qiita
JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
Deno、V8 JavaScriptエンジンをRustに統合できる「Rusty V8」リリース — RustにJavaScriptコードを埋め込み可能に
9月25日、DenoはRustベースのV8バインディング「Rusty V8」が安定版としてリリースされたことを発表した。Rusty V8は、JavaScriptエンジンV8のC++ APIをゼロオーバーヘッドでRustに統合するライブラリであり、5年間にわたる開発と150以上のリリースを経て、3.1百万回以上のダウンロード数を記録している。このリリースにより、Rusty V8は本格的なプロダクション環境での利用が推奨される安定版となった。 Rusty V8は、バージョン129.0.0として初めて安定版リリースが行われた。これはChromeのバージョニングに合わせたもので、今後もChrome V8エンジンと同期したリリースが行われる予定である。このバージョンではAPIの安定性が保証され、これまでの0.xリリースを超えて、Rustベースの開発者にとって信頼性のあるツールとして位置づけられること
AIプラットフォームで世界を目指す！フロントエンドエンジニアを募集
AIプラットフォームで世界を目指す！フロントエンドエンジニアを募集 AI inside株式会社 @ai_inside I want to hear a detailed なにをやっているのか 私たちは2015年に創業し、AIを「使う」「作る」「動かす」ためのサービスをAIプラットフォームで提供しています。AIを「使う」サービスの一つ、手書き文字を認識してデジタル化するAI-OCR「DX Suite」は、その識字率の高さと使いやすさから銀行や通信、地方自治体など幅広い業界でご活用いただき、AI-OCR市場シェアNo.1を獲得しています。（※１） また、ノーコードで高精度なAIを「作る」ための「Learning Center」、よりセキュアかつ安定した環境でAIを「動かす」エッジコンピューティング「AI inside Cube」を提供しています。 さらに、世の中で作られたAIを「シェアする」た
【JavaScript】え？forって使わんの？ - Qiita
とある記事ではJavaScriptのfor句を巡って議論が交わされていたので少し興味をもちました。私はこれらの議論に参加できるほどの専門力はありませんが感想程度に。 間違い等あればコメントいただけますと幸いです。 読み取れたこと メリット 行数が減る ネストが深くなりづらい 可読性...? const a = []; for (let i=0; i<=99; i++){ a.push(i); } const a = Array(100).fill().map((_, i)=>i) 一度forなしを見てしまったが最後、「ひとつひとつ取り出して〜する」みたいな思想はなんだか原始的に感じる? なんかletォ?!的な印象 push()は破壊的メソッドなのでなんか印象が悪い 副作用が少ないなど デメリット 遅い ← 泣いた😭 これは正直意外でした。誰がどう見ても早く見える。省略記法=高速処理という
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Front-end libraries (React, Vue, Angular) and the basic principles of how they work, all in a single file using pure JavaScript (VanillaJS).
「ESLint」がJSONとMarkdownの文法チェックに対応 ～より汎用的なlinterへと進化／JavaScriptのソースコードを静的解析して文法の誤りを検出
