【JavaScript】モンティホール問題 - Qiita
// 0以上最大未満の整数をランダムで返す function ランダム(最大) { return Math.floor(Math.random() * 最大); } // 当たりがひとつだけ存在する3つのドアを返す function ドア一覧生成() { const 当たり = ランダム(3); let i = 0; return [ { 当たりか: i++ === 当たり }, { 当たりか: i++ === 当たり }, { 当たりか: i++ === 当たり }, ]; } function 交換候補のドアを探す(ドア一覧, 選択ドア) { if (選択ドア.当たりか) { // 外れのドアのどちらかを返す return ドア一覧.filter(ドア => !ドア.当たりか)[ランダム(2)]; } else { // 当たりのドアを返す return ドア一覧.filter(ドア
ESLint の Suggestions から学ぶ、コードの自動修正の奥深さ - mizdra's blog
これは、はてなエンジニアアドベントカレンダー2023 4日目の記事です。 3日目は id:mechairoi さんの「SQLiteでLinderaを使った日本語全文検索」でした。 blog.chairoi.me 今日のテーマは、JavaScript 向けの Linter 「ESLint」についてです。ESLint を使うと、JavaScript で書かれたコードを静的解析して、よくある間違いを検出したり、コーディングスタイルを統一できます。 通常、ESLint のルールによって報告された問題 (error や warn) は人が手で修正します。ただし、ルールが報告する問題の中には「fixable」な性質を持ったものがあります。こうした fixable な問題は、eslint --fix で自動修正できます。例えば、object-shorthand ルールによって報告された問題は、以下のよう
Next js v14 で考える開発チームの事業的貢献 - とろろこんぶろぐ
はじめに 今年の 2023年5月に Next.js の v13.4 がリリースされ App Router が Stable になり Vercel 推奨の実装方式となりました。 さらに10月 Next Conf にて、 Next.js v14 がリリースされ App Router を代表する新機能である Server Actions が Stable になりました。 App Router はこれからのWeb開発の未来を担うフレームワークになっていくことが予想されており注目度の高い技術です。一方、これまでの Pages Router からの変更点の多さ、機能の興味深さ、設計の複雑さ、動作の不安定さなども含め、さまざまな要因でいまでもたくさん議論になっています。 今後どこかのタイミングで App Router へ対応する必要があることは明らかなものの、技術の不安定さが気になる上に、ある程度規模の
ついに 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
【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 --
Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ ｜https://wp.yat-net.com/name
2023年 11月 01日 Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ カテゴリ： JavaScript タグ：学習 ハロウィンというイベントにブログを書いています、こんにちは。 ここ数年 Web サイト制作の学習を始めた方が一気に増えた感じがありますね。HTML や CSS などエディタに簡単なコードを書くだけでブラウザに文字や画像が表示された感動は今でも忘れられません。 そこから気づけば20年ぐらい Web 制作の業界で仕事をしているのですが、僕もひとに教えることが増え多くの人が JavaScript が難しいという意見をよく聞くようになりました。 実際 HTML や CSS とは違い、プログラミング特有の言葉が一気に押し寄せるものは途端にやる気を阻害し、自分には向いていないと感じるひとも多いと思います。 僕自身は専門学校でプログラ
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
Invokers は JavaScript なしでインタラクションを追加するための提案です。`<button>` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `<dialog>` などの要素の開閉状態を切り替えることが可能となります。 <button> 要素に invoketarget 属性を指定することにより、JavaScript を削減し、より宣言的な方法で UI にインタラクションを追加できます。下記の例では invoketarget 属性に <dialog> の id を指定することで、<button> 要素をクリックしたときに <dialog> 要素を開くことができます。 <button invoketarget="dialog">Open Dialog</button> <dialog id="dialog">Content</d
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactを学ぶために覚えたいJavascriptの基礎文法 - Qiita
【JavaScript・初学者】map / forEach / filter / findの違い - Qiita
【JavaScript・初学者】Reactでよく使われる頻出記法 / 関数について - Qiita
AWS SDK for JS のタイムアウト設定に利用していた @aws-sdk/node-http-handler が deprecated となったため @smithy/node-http-handler で置き換えてみた | DevelopersIO
[JavaScript]Promiseからasync/awaitへの書き換え - Qiita![[JavaScript]Promiseからasync/awaitへの書き換え - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b508be5fe5f065bb94cf471fac7a87b8e62ef10/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYzMTkxOTI4JTJGMDc5OTVhNjRmZTBlMDA2MzVhZDdjMGIzYTZlOTA2NWE1YmM5YzhiNiUyRmxhcmdlLnBuZyUzRjE2OTQ5NTA0NjQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTkxZGI0YWIyY2ZhYThlNGQ3NDliZGYyZjlmZTgyOWRi%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dc4ad7066a4bd33b20ac36972f76ea55a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RFByb21pc2UlRTMlODElOEIlRTMlODIlODlhc3luYyUyRmF3YWl0JUUzJTgxJUI4JUUzJTgxJUFFJUU2JTlCJUI4JUUzJTgxJThEJUU2JThGJTlCJUUzJTgxJTg4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MTBjNTAxMGY5ZmQ1NGRhMTY3ODZiNjJkNTJkNmIzOGY%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5dXN1a2UyMzEwJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9YWUwNGY1NzVmOGMzZjFkZTE0YjBkZDE2YzZjYjg4MTc%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De1931df50b7b92e0f3703d8bf21c5ee5)
