【React】コードを書く前の基本概念を理解する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactの基本概念を理解しよう はじめに Reactは現在、世界で最も人気のあるフロントエンドライブラリの一つです。この記事では、Reactを初めて学ぶ方に向けて、Reactの基本的な概念をわかりやすく解説します。コンポーネント、JSX、アプリケーション構造など、Reactを理解する上で欠かせない要素を順番に見ていきましょう。 Reactとは 世界で最も人気のあるフロントエンドライブラリ Reactは、Meta社(旧Facebook)が開発したJavaScriptライブラリで、ユーザーインターフェース(UI)を構築するために使用されま
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や
Parsing Javascript
The document provides an in-depth look at the process of parsing in Javascript. It explains parsing as the transformation of a programming language desc…
Wasmer、「Wasmer JavaScript SDK」を発表
WebAssembly（Wasm）ランタイムを開発するWasmerは2023年12月14日（米国時間）に公式ブログで、WASI（X）アプリケーションをブラウザで簡単に実行するための新しいライブラリ「Wasmer JavaScript SDK」（@wasmer/sdk）を発表した。2023年12月21日にリリースされた「v0.6.0」が最新バージョンとなっている。 WASI（WebAssembly System Interface）は、WebAssemblyでネットワークやファイル、メモリなどのシステムリソースを抽象化するAPI仕様。WASIXは、WASIを拡張してPOSIX（Portable Operating System Interface）の機能を利用可能にする仕様だ。 Wasmer JavaScript SDK（以下、Wasmer JS SDK）を使えば、あらゆるWASIパッケージ
【2025年版】JavaScriptのおすすめライブラリ＆フレームワーク40選
【2025年版】JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
JavaScript APIs You Don’t Know About — Smashing Magazine
In this article, Juan Diego covers the least known yet extremely useful APIs, such as the Page Visibility API, Web Sharing API, Broadcast Channel API and Internationalization API. Together we will see what they are, where we should use them, and how to use them. A couple of days ago, I revisited the awesome 2021 State of JS Survey. The state of JS is an online survey that collects data from develo
どのWebフロントエンドフレームワークから始めるべきか？（歴史編） - Qiita
昨今、ReactやVue.jsのような素晴らしいWebフロントエンドフレームワークのおかげで、モダンWebアプリを効率的に作ることができるようになりました。しかし2022年現在多くのフレームワークがあり、Webアプリ開発を始めたばかりの人にとってはどれから始めればいいのか選ぶのに迷ってしまうのではないでしょうか？ そのような方のために、この記事では、数あるフレームワークのうち、どれから始めればいいのか判断材料を提案したいと思います。判断材料としてフレームワークの歴史、特徴、現状を解説します。そして、それらを踏まえた上で、どのフレームワークから始めるべきか考察を説明します。 非常に長い記事になりますが、もし興味がありましたらご覧ください。 この記事の対象者 この記事はWebアプリ開発の勉強を初めたばかりで、ReactやVue.jsなどのフレームワークのどれを選ぼうか迷っている方を対象とします
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
Rustとdeno_coreを使って、独自のJavaScriptランタイムを作ってみる
Node.js、Denoに続いて、Bunという新たなJavaScriptランタイムが登場していますが、Denoの7月29日のブログにて、"Roll your own JavaScript runtime"という記事が投稿されていたので紹介します。 タイトルの通り、自分のJavaScriptランタイムを作ってみよう！という記事です。 作り方は元記事に載っているのでここでは省略して、掻い摘んだ内容をまとめていきます。 JavaScriptランタイムの材料 Rust deno_core tokio Rustのdeno_coreとtokioというクレートを使って作っていきます。 deno_core deno_coreって、もうそれdenoじゃんと思いましたが、こちらのクレートはJavaScriptエンジンであるV8との橋渡し的な役割を持つようです。 deno_coreは、複雑で大量のAPIを持つV
Roll your own JavaScript runtime | Deno
In this post we’ll walk through creating a custom JavaScript runtime. Let’s call it runjs. Think of it as building a (much) simplified version of deno itself. A goal of this post is to create a CLI that can execute local JavaScript files, read a file, write a file, remove a file and has simplified console API. Let’s get started. Update 2022-12-04: updated the code samples to the latest version of
Webブラウザのレンダリングの仕組みを理解する
どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht
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で文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字
高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
JavaScript 第7版
JavaScriptは最も多くのソフトウェア開発者に使用されているプログラミング言語です。JavaScriptを包括的に解説する本書は、第6版から大幅に加筆および更新し、全面改訂しました。 はじめにJavaScript言語仕様の基本的な構文と機能について豊富なサンプルコードを使って学習します。そしてJavaScript標準ライブラリを詳述し、Webブラウザで使われるクライアントサイドJavaScriptやNode.jsで使われるサーバサイドJavaScriptについてわかりやすく説明します。またNode形式と標準形式のモジュールの使い方、イテレータとジェネレータ、async/awaitやPromiseなどの非同期プログラミングの新しい構文、クラスの定義方法などを紹介し、さらにツール群や言語拡張機能、理解の難しいJavaScript特有の動きなどについても学ぶことができます。 Webプラット
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
Vanilla JSのメリット フレームワークのサイズが大したことないなら、バニラでやるメリットはあるのか？という話になりますが、実際作ってみてバニラの方が優位だった点が１つありました。 それは動作が速いことです。 今回作ったSPAの中に1つ、画面内の要素が多すぎて描画に数秒時間がかかるページがありました。 どれくらい多いかというと、テキストボックス・チェックボックス・プルダウンなどの入力要素が１画面に１万個以上あります。 この画面を高速化したいと思い、試しにVue.jsで同じようなページを作ってみたのですが、比較するとVanilla JSの方が速かったです。 仮想DOMは速いみたいな記事を目にすることがあり、VueやReactはなんとなく速いイメージを持っていたのですが、よく考えてみるとVueやReactだって最終的には画面描画のためにリアルDOMを操作するわけで、それなら必要最小限のリ
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
ブラウザレンダリングの仕組み
Webの用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステップにな
Deno 1.0 | Deno
Dynamic languages are useful tools. Scripting allows users to rapidly and succinctly tie together complex systems and express ideas without worrying about details like memory management or build systems. In recent years programming languages like Rust and Go have made it much easier to produce sophisticated native machine code; these projects are incredibly important developments in computer infra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Good Bye Web APIs
