JavaScript なしで動作するモダンなコードの書き方
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HTML のフォームとして振る舞うことでアプリケーションの機能を変わらず提供できます。 React Server Component はサーバー側で HTML に変換されるため、クライアントに JavaScript のコードが配信されることはありません。React Server Component では useState() を使用できないといった制約がありますので、我々開発者は React Server Component の利点を
[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた
タイトルは上記画像にあるような普通にキーボードにあるEnterキーと、 テンキーの右横にある小さいEnterキーのことです。 私の担当しているシステムではEnterキーを押すとフォーカスが移動する仕様があります。 経験上、このような仕様は多数のデータ入力があるシステムにおいて好まれる傾向を感じます。 キーボードから手を離さなくていいからですね。 正直なところフォーカス移動ならTabだろうと思いますが、まあそこは長年の習慣だと思います。 この仕様をJavaScriptで実現していたのですが、なんか違和感を感じて調べたところ JavaScriptにおいてキーボードにある普通のEnterキーとテンキーの右横にある小さいEnterキーは別物であることに気づきました。 <html> <head></head> <body> </body> <script type="text/javascript"
![[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f6e6acba006f1f5e854ed72bee0e031fcc21383/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--x--w0q-v--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BJavaScript%25255D%2525E5%2525A4%2525A7%2525E3%252581%25258D%2525E3%252581%252584Enter%2525E3%252581%2525A8%2525E5%2525B0%25258F%2525E3%252581%252595%2525E3%252581%252584Enter%2525E3%252581%2525AF%2525E5%252588%2525A5%2525E7%252589%2525A9%2525E3%252581%2525A7%2525E3%252581%252582%2525E3%252582%25258B%2525E3%252581%252593%2525E3%252581%2525A8%2525E3%252581%2525AB%2525E6%2525B0%252597%2525E3%252581%2525A5%2525E3%252581%252584%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ASatoshi%252520Kaneyasu%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Q2MzU5NTZkNDkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
JavaScriptにセミコロンは入れるのか？入れないのか？ - Qiita
結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察してセミコロンを挿入してくれる 自動セミコロン挿入のしくみはECMAScriptで規定されており、自動セミコロン挿入はJavaScriptエンジン間で可搬性がある 自動セミコロン挿入には落とし穴があり、ルールを理解しておく必要がある 第１のルール：セミコロンが挿入されるのは、"}"トークンの前か、改行の後か、プログラムの末尾だけ
addEventListenerでリッスンしているイベントをPromise化する
概要 addEventListenerはブラウザ組み込みのAPIの中でも最もよく使われるメソッドの中の一つだと思います。このメソッドはぱっと見で処理がわかりにくく引数にコールバック関数を取るため、初心者の頃に物凄く読みにくいコードを書いた人も多いのではないでしょうか？ addEventListenerが読みにくくなってしまう簡単な例を挙げます。以下のコードのようにAというイベントが発生しないとBというイベントを購読する処理をかけないといったイベント間に依存関係がある場合は、処理が増えるにつれ直感的なコードを書くことが難しくなっていくと思われます。 // <body>より上の位置で<script>にdefer属性なしで書かれてあると思ってください。 document.addEventListener("DOMContentLoaded", () => { console.log("DOMCo
JavaScriptを「ジャバスク」と略す人がいたが、考えたらJSと略すのではないか？
淡路 @mizuiro0522 自社の後輩に「JavaScriptをジャバスクと略する人がいる」と話したら「なんで？」という顔をしたのを覚えています。ちなみに私は略さず「JavaScript」と言います。 2022-05-31 23:33:55
Denoよどこへ行く - keroxpのScrapbox
最近めっきりDenoに触ってない。一言で言うと飽きてしまった。 とはいえどうなってるかくらいの情報は追っているのだが、どうも使いたいと言う気分にならない。 今自分はDenoコントリビューターではないのでいち開発者としての外から見たDenoの現状を語ってみる 最近のDenoはWeb標準に追従している 具体的には、fetch APIの実装に始まり、ブラウザに実装されているAPIの実装を頑張っている windowオブジェクトもあるし、webcryptoやWebGPUのような、ブラウザでも誰も使ったことのないようなAPIまで実装している 自分はどうもこの流れに乗れなかった この方針は現在のDenoコアチームの強い姿勢であり、最近JavaScriptの標準化団体であるTC39に参加したという だがDenoがサーバーサイドの言語である以上、ブラウザに存在する様々なブラウザ的問題を解決するための仕組みや
再帰的な構造のデータの同値性判定はどうしたらいいか - 貳佰伍拾陸夜日記
数日前にTwitterで, JavaScriptのオブジェクトに対する===の挙動が初心者には難しいみたいな話を見かけた. 発端や周辺の議論をちゃんと追いかけてないからとくに出典は貼らない. たぶん元々の話は「へぇ, こういう挙動なんだ, 簡単ではないね」くらいの話だったのかもしれない. 自分のタイムラインの観測範囲では「そうだそうだ, (参照の同一性ではなく)同値性にしとけばいいのに」と思っている人もそれなりにいそうに見えた. 個人的にも同値性が簡単に確認できるとよい気はするものの, 「なんでそうしないんだ, オブジェクトの中身を確認していくだけだろ!」みたいな簡単な話ではないことも知っているため, 以下のようなツイートをしたのだった. JavaScriptのオブジェクトの同値性、再帰的な構造とか作るとぜんぜん自明じゃないんだよなぁ。リンクの構造は違うけどプロパティを辿ったときのパスはど
2021年に知っておきたいJavaScript最適化技術34選 - Qiita
最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ
Google発のJavaScriptで書けるシェル 「zx」 | DevelopersIO
Introduction シェルを書きたいときにBashは手軽に使えるけど、 少し込み入ったスクリプトを書こうとするとちょっと面倒。 NodeいれてJavaScript書くのもいいけど、 いろいろセットアップが手間。 そんな人にピッタリはまるかもしれないのがzx。 Google発、JavaScriptで記述できるシェルです。 Top Level await使ってシェルコマンドがそのまま使用可能です。 また、Promise.allでコマンド並列実行ができたりするので便利です。 Environment OS : MacOS 10.15.7 Node : v14.16.1 Top Level awaitがサポートされたNode(v14.8)以降が必要ぽい？ Setup では早速セットアップしてみます。 npmでzxをグローバルインストール。 % npm i -g zx % zx usage: z
React Server Components はウェブ開発を変えるゲームチェンジングな技術である
去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただのサーバーサイドレンダリングではありません。クライアントサイドレンダリング（SPA）とサーバーサイドレンダリングを、ギアを切り替えずにいいとこ取りする仕組みです。これまでに存在した様々な技術よりも踏み込んで、フロントエンドとバックエンドの境目を曖昧にしてしまうユニバーサルな技術です。 勝手な造語としていうなら「コンポーネント指向ユニバーサルウェブ開発」とでも呼ぶべきものでしょう。 そして、これはただのユニバーサルなだけの仕組みではあり
TC39 - JavaScriptを定義する。
JavaScriptを定義する。 TC39 Ecma InternationalのTC39は、JavaScript開発者、実装者、専門家などのグループで、JavaScriptの仕様をメンテナンスし発展させるためにコミュニティと協力しています。 我々は 所属の委員会です。 コントリビュート 既存のプロポーザルに対するフィードバック、ドキュメントの改善、テスト、実装、さらには言語機能に関するアイデアなど、JavaScriptコミュニティからのコントリビュートをTC39は歓迎します。詳細については、コントリビュータガイドをご覧ください。 TC39のミーティングにメンバーとして参加するには、Ecmaに参加してください。 仕様 我々はJavaScript(正式には、ECMAScript)の仕様をGitHub上で開発し、2ヶ月ごとにミーティングを行い、プロポーザルについて議論しています。このプロセスの
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
本稿では、アロー関数とfunctionキーワードを使って定義される関数を区別するため、functionキーワードを使うほうの関数を「通常関数」と呼ぶことにします。英文で見かけるregular functionの翻訳になりますが、これは公式の用語ではなく、解説の便宜上のものとご理解頂ければと思います。単に「関数」というときは、通常関数とアロー関数どちらも指すこととします。 関数の歴史 歴史的に見ると、通常関数は古くからある言語機能であるのに対し、アロー関数は新しいものです。アロー関数はES2015(ES6)で導入されました。導入にあたっては、関数を短く書きたい、thisを束縛したくないという2つの理由があります。 通常関数とアロー関数の性質の違い 通常関数とアロー関数では、構文が違うというのは見て分かると思います。構文についての違いはここでは解説しません。 ここでは、文法以外の相違点をひとつ
Why JavaScript Tooling Sucks
Home Ideas Writing & Speaking Book Tactics, Strategy, Principles About Bio, Talks, Photos Subscribe RSS, Newsletter, Mixtape JavaScript Tooling is just too hard to use, and it’s not your fault. If you clicked on this title ready to agree, you are part of the problem. Don’t worry, so am I. I work on JavaScript Tooling and I think my tools can be a lot better. ”Let he who is without sin” and all tha
高速化の観点から new Array(100) を使わない方が良い理由
別件で V8 の JIT コードの逆アセンブルを眺めている時に気づいたのですが、JavaScriptで new Array(100) という形で配列を作るのは、高速化の観点から言うと V8 においては避けるべき書き方です。 高速化を求める方は、 new Array() や [] で作成して Array#push で追加していくのが良いでしょう。この記事では、その理由を説明します。 今回の記事は、以下の V8 のブログ記事を参考にしております。 https://v8.dev/blog/elements-kinds 「詰まった配列(Packed Array)」と「穴あき配列(Holey Array)」 v8 は内部的に、その配列がどういうタイプの配列であるかの状態を記録しており、その情報を利用して最適化を適用します。状態は内部的には21個あるのですが、今回話題にするのは、その中でも「詰まってい
JavaScript で陥りやすい失敗例を振り返る - Qiita
個人的に今まで JavaScript を書いてて陥った失敗例などを振り返ってみました。 この記事にあるいくつかの失敗例については恐らく殆どの方が経験してるのではないかなと思います。 これから JavaScript 勉強するぞ！！という方や、現在進行形でこのような失敗に陥っている方の助けになれば幸いです。 コードの解説に関しては簡潔に行なっているので、気になった方はググってください。 DOM の取得及び操作 要素を取得して is-close なスタイルを付与したい。 しかし、エラーになってスタイルを付与できない // 失敗例 const hoge = document.getElementsByClassName('hoge'); hoge.classList.add('is-close'); // 正しい例 const hoge = document.getElementsByClassN
ブロックチェーンのデータ構造をJavascriptで作ろう｜es
今回はJavascriptで、ブロックチェーンのデータ構造を実装します。ブロックチェーンのデータ構造を実際に作ってみると、その堅牢性が理解できると思います。nonceを求めるマイニング・アルゴリズムも実装します。 なお、P2Pでノード間で同期を取ったり、コンセンサス・アルゴリズムで合意形成を取るところまでは、実装しませんので悪しからず。 ブロックチェーンは「万能薬」でありません。他のプログラムと一緒で、あくまで、アルゴリズムを効率的に実現するデータ構造です。 分散環境下で、セキュアにデータをもつためのデータ構造とも言えます。 つまり、手段です。導入したからといって、問題が自動的に解決したりしません。 それでは早速、作ってみましょう。実際に作業するファイルは２つです。 mkdir project cd project npm init touch blockchan.js touch tes
Callback を撲滅せよ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
ES2018で入ったUnicode property escapes in regular expressionsを調べてみた - yutaponのブログ
はじめに はじめに 使い方 書式について UnicodePropertyName General_Category Script, Script_Extensions Binary Unicode property 調べ方 UnicodePropertyValue に属する文字一覧を調べる ある文字に指定されている属性を調べる おわりに 参考にした記事 ES2018で正規表現まわりの機能にいくつかの便利な表現が入った。 例えばこんな感じ。 いずれもChrome*1 のコンソールで入力して試すことができる。 // `ひらがな` のみの文字列ならtrue /^\p{sc=Hiragana}+$/u.test('あいうえお') // true // `カタカナ` のみの文字列ならtrue /^\p{sc=Katakana}+$/u.test('アイウエオ㍑㍍') // true // `漢字`
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最終フロンティアに到達したJavaScript：宇宙
Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) / JSer.info 400th Memorial Event - Speaker Deck
