ついに JavaScript に groupBy が実装されたぞ！！！ - Qiita
JavaScript標準でgroupBy関数が実装されています。2023年11月現在Safari以外の主要なブラウザで実装済みで、SafariもTechnology Previewのようです。 （現在MDNの日本語の記事は古い情報のままになっており、現行と異なるので注意！ →更新していただきました。ありがとうございます！） Proposal の Stage はすでに 4 / Finished なので規格として確定済みです。 基本的な使い方 よくあるgroupByです。配列（Iterable）とキーを抽出する関数の二つを指定すると、キーで配列をグループ化します。 const ret = Object.groupBy([ { name: '山田太郎', address: '東京' }, { name: '山田次郎', address: '愛知' }, { name: '山田三郎', addre
2023-11-26のJS: Vite 5、Node.js 20.10.0(ESMのデフォルト化フラグ)、State of JS 受付中
JSer.info #670 - Vite 5.0がリリースされました。 Vite 5.0 is out! | Vite Node.js 14/16のサポート終了、Rollup 4へアップデート、CommonJS Node API(require("vite"))を非推奨化しています。 また、defineの置換方法をdevとproduction buildで同じ方法を使うように変更、devとpreviewでURL末尾のスラッシュの扱いが異なる問題を修正、非推奨なAPIの削除なども含まれています。 マイグレーションガイドも合わせて公開されています。 Migration from v4 | Vite Node.js 20.10.0がリリースされました。 Node v20.10.0 (LTS) | Node.js 主に開発版のNode.js 21.xからのバックポートが中心となっています。 ES
State of JavaScript 2023
JavaScript started its life as a browser language, and then went to on conquer the server with Node.js. And it 2023, it seems like the ecosystem as a whole might finally be ready to try and bridge that gap. Between features like React Server Components, frameworks like Solid and Qwik, or meta-frameworks like Next.js and Sveltekit, providing a better way of serving code and data to clients has beco
プログラミング入門にピッタリなビジュアル言語「Pickcode」が登場、PythonやJavaScriptなどのより高度なプログラミング言語への移行を促進
プログラミングを始めるための最良の選択肢となることを目指して作成されたビジュアルプログラミング言語が「Pickcode」です。チャットボットやアニメーション、ゲームなどを作成しながらプログラミングについて学べ、PythonやJavaScriptなどのより高度なプログラミング言語への移行を促進することができるようになっています。 Pickcode | Make cool stuff with code https://pickcode.io/ 実際にPickcodeでプログラミングについて学んでみます。上記ページにアクセスして「Try a lesson」をクリック。 すると「最初に作りたいのは何？」という画面が表示され、選択肢として「A chatbot that says a few things(いくつかのことを話すチャットボット)」と「An animated drawing of a r
Reactを学ぶために覚えたいJavascriptの基礎文法 - Qiita
目的 Reactを自己学習しています。その中でReactを学ぶにはjavascriptへの理解が必要であり、最低限の基礎的な文法をまとめました。自分の備忘録でもあり、これも学んだ方がいいというものがあれば、ぜひともコメントをお願いします。 テンプレート文字列 ${変数}のように記述する。javascriptでの変数や式はだいたい{}内に書く const name = "いとと"; const age = "28"; const message2 = `私の名前は${name}です。年齢は${age}です。`; console.log(message2);// 私の名前はいととです。年齢は28歳です。
【JavaScript・localStorage】Webアプリ個人開発で体得したlocalStorageの使い方 - Qiita
はじめに これまでやってきたWebアプリ制作でlocalStorageを使用する機会が多かったので 簡単なwebアプリを用いて自分がどのように使ったかを晒します。 ブラウザのローカルストレージ内のデータに期日を設定してそれを過ぎたらデータを更新する というような機能を実装する際にそこそこ苦労したので 備忘録代わりに残そうと思い筆を執った次第です。 需要があるかどうかはわかりませんが… 技術系の記事を書くのは初めてで読みづらい所があったらごめんなさい。 使用する技術 本当はReact.jsで書くのが一番楽だけど分からない人もいると思うので ここは初心にかえって誰でも分かりそうな HTML + CSS + JavaScript で行こうと思います。 localStorageについて 簡単にいえばブラウザにデータを保存できる機能です。 詳しいことは公式ドキュメントを参照してください。 local
JavaとJavaScriptが違うことをビジネスサイドに伝える例 - Qiita
JavaとJavaScriptが違うことをビジネスサイドに伝える例 受講生の方にも、コンサル先の社長にも、わかり易い例はいくつ有っても足りない インドとインドネシアぐらい違う：両方とも国名で、名前に「インド」が含まれていますが、地理的位置、文化、言語などが全く異なります。同様に、JavaとJavaScriptは両方ともプログラミング言語ですが、構文、用途、動作環境などが全く異なります。 メロンとメロンパンぐらい違う：両方とも食べ物で、名前に「メロン」が含まれていますが、一つは果物で、もう一つはパンです。同様に、JavaとJavaScriptは両方ともプログラミング言語ですが、Javaは一般的にサーバーサイドやデスクトップアプリケーションで使用され、JavaScriptは主にウェブブラウザ内で動作するスクリプト言語です。 カエルとカエルアンコウぐらい違う：両方とも動物で、名前に「カエル」が含
2023-11-08のJS: Remix 2.2.0(Vite)、Deno 1.38、Angular.dev
JSer.info #668 - Remix 2.2.0がリリースされました。 Release v2.2.0 · remix-run/remix Viteをサポートし、ViteのプラグインとしてRemixを使えるようになりました。 詳しくは次の記事で解説されていますが、既存のViteのエコシステムに乗れることで開発体験の改善やViteのプラグインの利用などができるようになっています。 Remix ❤️ Vite | Remix 他には、Fetcherにkeyを指定できるようになる変更が含まれています。 また、future.v3_fetcherPersistフラグで、Fetcherのクリーンアップの新しい挙動をopt-inで試せるようになっています。 Deno 1.38がリリースされてました。 Deno 1.38: HTML doc generator and HMR deno doc --
【JavaScript・初学者】Reactでよく使われる頻出記法 / 関数について - Qiita
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は関数について少し調べました。 関数の種類
Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ ｜https://wp.yat-net.com/name
2023年 11月 01日 Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ カテゴリ： JavaScript タグ：学習 ハロウィンというイベントにブログを書いています、こんにちは。 ここ数年 Web サイト制作の学習を始めた方が一気に増えた感じがありますね。HTML や CSS などエディタに簡単なコードを書くだけでブラウザに文字や画像が表示された感動は今でも忘れられません。 そこから気づけば20年ぐらい Web 制作の業界で仕事をしているのですが、僕もひとに教えることが増え多くの人が JavaScript が難しいという意見をよく聞くようになりました。 実際 HTML や CSS とは違い、プログラミング特有の言葉が一気に押し寄せるものは途端にやる気を阻害し、自分には向いていないと感じるひとも多いと思います。 僕自身は専門学校でプログラ
AWS SDK for JS のタイムアウト設定に利用していた @aws-sdk/node-http-handler が deprecated となったため @smithy/node-http-handler で置き換えてみた | DevelopersIO
AWS SDK for JS のタイムアウト設定に利用していた @aws-sdk/node-http-handler が deprecated となったため @smithy/node-http-handler で置き換えてみた こんにちは、CX 事業本部 Delivery 部の若槻です。 今回は、AWS SDK for JS のタイムアウト設定に利用していた @aws-sdk/node-http-handler が deprecated となったため @smithy/node-http-handler で置き換えてみました。 @aws-sdk/node-http-handler で型エラーが発生するようになった @aws-sdk/node-http-handler では HTTP リクエストハンドラーが提供されています。これを利用することにより、下記で紹介されているように AWS SDK
[JavaScript]Promiseからasync/awaitへの書き換え - Qiita
Promiseを用いた処理を,async/awaitを用いた処理に書き換える。 Promiseを用いた処理 getPost(postId) .then((post) => getUser(post.userId)) .then((user) => getOrganization(user.orgId)) .then((org) => { // 必要な処理 }); const myFunc = async (postId) => { const post = await getPost(postId); const user = await getUser(post.userId); const org = await getOrganization(user.orgId); // 必要な処理
![[JavaScript]Promiseからasync/awaitへの書き換え - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/439bb1f88817a9ee616f8f40b8debf5ea3a769b7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RFByb21pc2UlRTMlODElOEIlRTMlODIlODlhc3luYyUyRmF3YWl0JUUzJTgxJUI4JUUzJTgxJUFFJUU2JTlCJUI4JUUzJTgxJThEJUU2JThGJTlCJUUzJTgxJTg4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00NjdkM2U4M2I5NGM0NjYxNzc2YmU4ZmY1NGZlZjFiYQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQweXVzdWtlMjMxMCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzJmZmVjM2I1NDRhODJlMmYwNzQ1NGNhZmQ5OGVkODg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0d08287c0e2796a3092831d8f72b1456)
Roomy - XcodeやJavaScriptの不要ファイルを断捨離できる開発者による開発者のためのMacユーティリティ | ソフトアンテナ
XcodeやJavaScript、Dockerなどのツールを使って開発作業を行っていると、知らないうちに大量のディスクスペースを消費していることがあります。 DaisyDiskのような汎用ツールを使って無駄なファイルを探すこともできますが、不要なファイルをまとめて削除することができる専用アプリがあれば便利かもしれません。 本日紹介する「Roomy」は、そのようなディスク容量の問題に悩まされていたTeodor Dermendjiev氏によって作成された、開発者による開発者のためのMacアプリです。 現在アルファ版として公開されていて(将来的には不明ですが現在は無料で使用可能)、XcodeやJavaScriptの不要ファイルを簡単に削除することができます。 次のような特徴を持っています。 🧹 Xcodeクリーンアップ： 古いファイルや不要なファイルにサヨナラ。 🌐 ウェブ開発： npmの依
2023-10-25のJS: Node.js 21(Current)とNode.js 20.9.0(LTS)、Yarn 4、tsc --isolatedDeclarations
JSer.info #666 - Node.js 21がリリースされました。 Node.js 21 is now available! | Node.js 奇数バージョンはいわゆる開発バージョンとなりLTSにはなりません。 Node.js 21では、Fetch/WebStreams APIのStable化、V8 11.8へのアップデート、node --testでのglobのサポートが追加されています。 また、モジュールのデフォルトをESMにできる--experimental-default-type、Magic BytesでWasmを判定する--experimental-wasm-modulesの追加されています。 これらのフラグについては次の記事で解説しています。 Deep Dive: Node.jsのESMデフォルト化への道 - JSer.info また、fs.writeFileにfl
JavaScript なしでインタラクションを追加する Invokers
JavaScript なしでインタラクションを追加する Invokers 2023.10.22 Invokers は JavaScript なしでインタラクションを追加するための提案です。`<button>` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `<dialog>` などの要素の開閉状態を切り替えることが可能となります。 invoketarget、interesttarget 属性は 2023 年 10 月 22 日現在実装されていません。 <button> 要素に invoketarget 属性を指定することにより、JavaScript を削減し、より宣言的な方法で UI にインタラクションを追加できます。下記の例では invoketarget 属性に <dialog> の id を指定することで、<button> 要素をクリックし
ESLint で Date オブジェクトの使用を禁止する - Qiita
new Date() と Date.parse() だけを禁止したい場合は amzn/eslint-plugin-no-date-parsing などが使えますが、 Date オブジェクトに生えている全てのメソッドも禁止したい場合は、以下のようなルールを書くことで実現できます。 （ESLint Flat Config を使う場合は適宜読み替えてください。） { "rules": { "no-restricted-syntax": [ "error", { "selector": "NewExpression[callee.name='Date']", "message": "Use dayjs instead." }, { "selector": "CallExpression[callee.object.name='Date']", "message": "Use dayjs inste
JavaScript+CSS/アニメーション実装方法 - Qiita
Javascriptの勉強。 カーソルを動かすたびにカラフルで可愛いハート💛が現れるアニメーションの実装方法を模写して学習しました！ カラフルで本当にかわいい…！ 勉強に使用した動画：https://www.youtube.com/watch?v=I0R0T7p5oR8 記述したコードはこちら。 ①index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Colorful Hearts On Mousemove</title> <link rel="stylesheet" href="style.css"> </head> <body> <script type="text/javascript"> document.addEventListener("mousemove", func
Nuxt.jsの為に設計された、モダンなWebアプリ向けのUIライブラリ・「Nuxt UI」
Nuxt UIはNuxt.jsの為に設計された、モダンなWebアプリ向けのUIライブラリです。Nuxt.js公式による提供のUIコンポーネントコレクションでOSSとしてソースコードが公開されています。 アコーディオンやアラート、ボタン、ドロップダウンやボタンなどの各要素やフォーム回りのUI、データテーブルやナビゲーション、モーダル、コンテキストメニューにカードレイアウトなどなどWebアプリで必要になりやすいUIコンポーネントが30以上含められています。 テーマ設定およびカスタマイズはApp Config Fileで、基本的にはTailwind.cssに基づいて設定します（もちろん独自のカラー設定も可能）。アイコンはIconifyが採用されており10万以上のアイコンから選択可能となっています。他にもアプリ内キーボードショートカットの設定がしやすくなっていたりダークモードが搭載されていたりと、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript・初学者】map / forEach / filter / findの違い - Qiita
How to Sustain Quality and Velocity in a JavaScript or TypeScript Project?