State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
Bun — A fast all-in-one JavaScript runtime
Develop, test, run, and bundle JavaScript & TypeScript projects—all with Bun. Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発 WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」の正式版となる「WinterJS 1.0」のリリースを発表しました。 ❄️ Introducing WinterJS 1.0 - the fastest WinterCG Javascript runtime in the world powered by Rust and SpiderMonkey ...and #WebAssembly compatible! Now supporting: React Server Components Cloudflare mode 150
りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】：くるみ割り書房
💡 紙本+電子版セットは BOOTH にて。 https://oukayuka.booth.pm/items/2368045 ―――― シリーズ累計 2.5 万部を突破、仕事で使える React 本と評価の高い『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。全 3 巻構成となっている第 1 巻「言語・環境編」です。 最新のフロントエンド環境構築ツール Vite の使い方に始まり、JavaScript（ES2022）、関数型プログラミング、TypeScript までをカバー。JS のパワーをフル活用する React を使いこなすための基礎力を固めます。 「フロントエンドの開発になぜ Node.js が必要なの？」「使っている各種のツールは何をしてくれてるの？」「import はどうやってファイルを読み込んでるの？」のような、学習者が抱く根本的な疑問にまで
TypeScriptで学ぶ！SOLID原則
はじめに 皆さんこんにちは、株式会社エムアイ・ラボのエンジニアです！ 今回はソフトウェア設計のSOLID原則について学習したので、弊社のメインの開発言語であるTypeScriptのサンプルコードを使って共有できればと思います。 SOLID原則は、オブジェクト思考プログラミングにおいて、ソフトウェアがメンテナンスしやすく、拡張や変更に強いソフトウェア設計を行うための原則です。 SOLID原則にはSOLIDの頭文字をそれぞれとった、５つの原則があります。 単一責任の原則（Single Responsibility Principle） 単一責任の原則とは、クラスが一つの機能や責任を持つべきで、クラスが変更される理由は一つであるべきというです。 クラスが一つの機能や責任のみを持つようにすることにより、コードは再利用可能でテストが容易になります。 単一責任の原則を遵守している例 以下のBirdクラ
viteのbuild時のファイル名ハッシュを辞める - Qiita
以下の設定を追加する。 関連のある設定 rollupOptions.output.entryFileNames rollupOptions.output.chunkFileNames rollupOptions.output.assetFileNames rollupの設定が露出しているので不明点があればrollup側のドキュメントを読むと良い。 ref: https://rollupjs.org/guide/en/#outputentryfilenames import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], build: { ou
ViteアプリをS3とCloudFrontを使ってホストする - Qiita
はじめに Viteを用いて作成したReact×TypeScript環境をAWSのS3とCloudFrontを用いて静的ウェブサイトを公開します。説明にReactを使うだけでS3に置くのは静的ファイルなので他の環境でも同様の方法で再現可能です(記事ではReactのコードにほとんど触れません)。 何を行っているかが分かりやすいという観点から、awsコンソール上からの操作で設定していきます。また、今回最小限の設定で構築しました。お好みで設定を加えてお使いください。 開発環境のセットアップ Viteの環境はワンラインで作ることが出来ます。 コマンドラインに従って入力を進めると環境を作成できます。 作成した環境に入ってnpm install、npm run devを行って動作を確認してください。 ブラウザで以下のような画面を確認できたら完了です。 npm run buildを行うと、dist配下にバ
Home (GraphQL-Codegen)
Generate Code InstantlyGenerate code from your GraphQL schema and GraphQL operations with a single function call regardless of your environment or code format. Customize EasilyGenerate code from your GraphQL schema and GraphQL operations with a single function call regardless of your environment or code format
ローカルネットワーク内でPWAを動かす（javascript）
ローカルネットワーク内完結でPWAをAndroidで試そうと思って躓いたので備忘録。 まず最初にPWAの要であるServiceWorkerを動かすための条件を確認します。 ①httpsであること ②localhostであること ①または②のどちらかが必要になります。 セキュリティ上の理由からhttpsであることが大前提のようで、開発を意識してlocalhostは特別に許可されている感じ。 httpsで試す 最初にhttpsを試しました。どこかにデプロイしてしまえば楽なのですが、今回は外部のネットワークにはつながない想定なのでNG。じゃあどうするかというと、オレオレ証明（Self-Signed Certificates）でなんちゃってhttpsサーバーを立ててみました。 条件は満たしたのでいけると思ったのですが、結果から言うとオレオレ証明では禁止されています。 Androidに証明書を転送し
JavaScriptでHTMLエスケープ処理 - Qiita
JavaScriptでHTMLエスケープする必要があったのでメモ。 一般的なWebアプリの場合、基本的にはサーバサイドでのHTMLエスケープが出来てれば問題無いケースが多い。 ただ、例えばDOMからテキストを取得して再度DOMに突っ込む、みたいな処理をクライアントサイドでやろうとした場合は、JavaScriptで改めてHTMLエスケープする必要がある。 ので、JavaScriptで最低限のHTMLエスケープするメソッド作った。 function escape_html (string) { if(typeof string !== 'string') { return string; } return string.replace(/[&'`"<>]/g, function(match) { return { '&': '&', "'": ''', '`': '`
正式仕様リリース！ JavaScriptの最新仕様ES2022で追加された「全」新機能
JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2021でした。 本日6月22日、ES2022は正式仕様として承認され、ES2022が最新仕様となりました。 22.06.2022 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2022の全機能が使えます。 本記事では、ES2022すべての新機能を紹介します。「何が使えるようになったのか？」「どうしてそれが必要だったのか？」が、できるだけわかりやすいように解説しました
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
Node.js — Node.js 18 is now available!
We’re excited to announce that Node.js 18 was released today! Highlights include the update of the V8 JavaScript engine to 10.1, global fetch enabled by default, and a core test runner module. Initially, Node.js 18 will replace Node.js 17 as our ‘Current’ release line. As per the release schedule, Node.js 18 will be the 'Current' release for the next 6 months and then promoted to Long-term Support
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build an app with Nuxt and Bun | Bun Examples
Install yarn and npm in WSL
難しすぎると話題の「警視庁の音ゲー」、JavaScriptでベタ書きされていた→作り切る根性がすごいし参考になりそうな実装だった
Vite | 次世代フロントエンドツール
Vorlume
Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】
