2022-02-22のJS: Deno 1.19、Next.js 12.1、Monorepo Toolsまとめ
JSer.info #580 - Deno 1.19がリリースされました。 Deno 1.19 Release Notes deno vendorという外部モジュールをリポジトリ管理するためのコマンドが追加されています。 deno vendorは外部モジュールをローカルにインポートし、Import mapsでマッピングして利用できます。 Proposal: deno vendor · Issue #13346 · denoland/deno Deno.FileをDeno.FsFileにリネームし、Deno.Fileがdeprecatedとなっています。 Deno.Fileは次のメジャーアップデートで削除される予定です。 Deno.FsFileやDeno.ConnなどがWeb Streamsに対応、CompressionStream/DecompressionStreamのサポート、cons
正規表現の脆弱性 (ReDoS) を JavaScript で学ぶ
先日、このようなツイートを書いたところ、かなりの反響がありました。 JavaScript の正規表現の脆弱性の例でいうと、例えば /\s+$/ は脆弱性があると言える console.time(); /\s+$/.test(" ".repeat(65536) + "a"); console.timeEnd(); 結構時間がかかるのがわかる。でも /\s+$/ を見て「これは危険だな」と理解出来る人はそんなにいない。JavaScript に限らないけれど。 — Takuo Kihira (@tkihira) February 17, 2022 これは一般に ReDoS (Regular expression Denial of Service) と呼ばれる脆弱性です。正確に理解するのが難しい脆弱性なので、少し解説してみたいと思います。 結論 長い記事になるので、最初に「とりあえずこれだけ知っ
「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはwebpackなど
「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはwebpackなど 回答者の国別分布を上位5位までを見ると米国が14％、ドイツが4.8％、ロシアが4.5％、フランスが4.2％、イギリス（UK）が4％となっており、日本の回答者は1.3％で15位、中国の回答者も1.3％でした。 一方、言語別では英語が70.1％と他を圧倒しており、2位がスペイン語で5.4％、ロシア語が5％、フランス語が3.3％、ドイツ語が2.3％、中国語、ポルトガル語、そして日本語が1％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWeb Audio API、WebGLなど新しいブラウザAPIがどのくらい使われているかや
マークダウンとJavaScriptでインタラクティブなWebサイトを作れる「Reactive Doc」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、マークダウンで手軽にWebサイトを構築できるサービスをご紹介します。 一般的なマークダウン記法で簡単にWebコンテンツを作れるのですが、独自のコードブロックを挿入してインタラクティブなフォーム要素も挿入できるのが特徴です。 さらにJavaScriptで好きな機能を開発できる仕組みが提供されており、簡単なWebアプリを作るなど自由度の高いサービスに仕上がっています。 すべて無料で使えるので、ご興味ある方はぜひ参考にしてください！ 【 Reactive Doc 】 ■「Reactive Doc」の使い方 それでは、「Reactive Doc」をどのように使えばいいのか詳しく見ていきましょう！ 利用するためにユーザー登録やログインなどは一切不要です。サイトに訪れたらトップ画面にある【Try it】ボタンをクリックするだけです。 専用のWebエ
モダンなJavaScript/TypeScript実行環境「Deno」
class: middle, center <img src="./assets/logo.svg" align="center" width="200" /> モダンな JavaScript/TypeScript 実行環境 Deno --- class: middle, center 「Deno」 聞いたことありますか? 🙋♀️ 🙋♂️ --- class: middle, center 「Deno」 使ったことありますか? 🙋♀️ 🙋♂️ --- class: middle, center 今日は Deno を 「聞いた事ない」 ~ 「触った事はある」 ぐらいの人向けの話をします --- # 話す人 <img src="./assets/hinosawa.jpg" align="right" width="300" /> 日野澤歓也 twitter @kt3k Web
2022-02-14のJS: Parcel 2.3.0、Vite 2.8.0、Angular Compilerがどのように動いているか、JavaScriptでDDD
JSer.info #579 - Parcel 2.3.0がリリースされました。 Release v2.3.0 · parcel-bundler/parcel ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。 Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更などの変更が含まれています。 Reduce the number of npm dependencies needed by parcel by devongovett · Pull Request #7576 · parcel-bundler/parcel Vite 2.8.0がリリースされています。 vite/CHANGELOG.md at main · vitejs/vite macOS Montereyで50
JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI
アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで、商用プロジェクトでも無料で利用できます。 ピュアCSSで実装されたコンポーネント: JavaScriptを読み込む必要がないため、コンポーネントの待機時間はありません。 カスタマイズが簡単: スタイルの追加は簡単です。デフォルトのCSS変数をオーバーライドするか、クラスを使用してコンポーネントをカスタマイズできます。 スタンダードなHTML: 各コンポーネントは、モダンなHTML要素で構築されています。 ビギナーでもプロでも簡単: 簡単なプロトタイプから実稼働のW
100万行の大規模なJavaScript製システムをTypeScriptに移行するためにやったこと | CyberAgent Developers Blog
現在ピグ事業部の主力サービスである「ピグパーティ」でサーバーサイドエンジニアをしております新卒2年目の川口です。普段はSRE関連の業務を主とし、サーバーサイドの業務効率改善や、システムの運用保守、時には機能の開発や修正なども担当しております。 ピグパーティは、2015年にiOS/Androidでリリースされたアバターコミュニティアプリで、サーバーサイドはNode.js(JavaScript)+MongoDBを採用しています。 ピグパーティではこれまでにプライベートクラウドからGCPへの移設、Kubernetes(GKE)の採用など、技術的負債の排除や新技術の採用などを積極的に行ってまいりました。今回は、サーバーサイド開発時の大きなボトルネックになっていた、型がわからないことに起因する複数の問題を解決するために、TypeScriptを導入することにしました。その結果、システム規模に対して少な
Vanta.jsで3Dアニメーションを手軽に実装！
Vanta.jsで3Dアニメーションを手軽に実装！3Dアニメーションが手軽に実装できるVanta.jsというJavaScriptのライブラリがあります。Webサイト上で色や表示方法をカスタマイズして、コピペするだけで完成です。今回はこのJavaScriptライブラリを紹介します！ この記事は動画でも紹介しています。動画派の方はこちらをどうぞ！ 鳥をふわふわ動かしてみようVanta.jsのサイトに行くと、デモとして鳥がふよふよ飛んでるような背景が表示されています。この画面右側に、カスタマイズするためのパネルが用意されているので、好みのデザインに変えてみましょう。「Birds」の場合は色や鳥の数、鳥のサイズ、スペース、スピードなどが調整できます。 <div id="bird"></div> <script src="three.r119.min.js"></script> <script sr
JavaScript で学ぶビット演算の基礎
唐突にビット演算の話です。今回は本当に基礎的な事しか書きませんので、ある程度のレベルの方には常識レベルの話になることをご承知ください。 近年のプログラミング環境で、ビットを意識する機会はほとんど無くなりました。プログラミングの抽象化が進んだおかげで良いことだと思います。今や知らないのが普通なのかもしれません。しかし、もしちょっと低レイヤーな処理を書く機会があった時に、今までの私達にとっては常識レベルであった知識であっても、重要度が下がり学ぶ機会も無くなってしまったが故に、知らない人はそこで躓いてしまう可能性が高いことに気が付きました。この記事は、普段のプログラミングにはあまり必要のないビット演算を、とりあえずこれだけ知っておけばその先は自力でなんとかなるかな、というレベルまで解説したいと思います。 解説は JavaScript を使って行いますが、基本は他の言語でも同じです。 JavaSc
セガがjavascriptでぷよぷよを作るプログラミング講座を出しているが、とても良いプログラミングの教材になっている「写経はとても大事」
ショーヘー@デイトラ代表 | 受講生25,000人突破 @showheyohtaki プログラミング学習中の方へ👨💻 これ面白い！！セガがjavascriptでぷよぷよを作るプログラミング講座を出してくれてます😊 動作ごとに細かくコメントも入ってるので、ちゃんとソースコードを読んでから写経していったらめちゃくちゃいいプログラミングの勉強になると思う！ puyo.sega.jp/program_2020/ pic.twitter.com/Xr5hmPzZXI 2022-01-08 18:03:38 ショーヘー@デイトラ代表 | 受講生25,000人突破 @showheyohtaki このぷよ開発に使う『Monaca』は、本来iOS用はswift・Android用はJavaと、別々に開発が必要なアプリを、HTML・jsなどのWeb標準言語でまとめて開発できるという開発プラットフォームで
Wiki.js + Heroku を使って、無料で高機能の情報共有 wiki を簡単に作る
背景: GitHub wiki への不満 私の所属する研究室では、メンバー全員が１つの GitHub Organization に所属しており、情報共有はその Organization 上のリポジトリの GitHub wiki で行われています。 研究室がコンピュータサイエンス系であることもあってメンバーは GitHub や Markdown に慣れており、普段 GitHub wiki を使っていて困ることはそんなになかったのですが、それでも時々不満が出ることがありました。 不満として多いのは、色々記事を書いているうちに全体構造がよくわからなくなってしまうという点にあると思います。GitHub wiki ではディレクトリ構造を持てないので、全ての情報がリンクを経由してアクセスされることになり、段々と整理がつかなくなってしまいます。 複数のリポジトリにそれぞれ wiki を書くこともできます
[JavaScript] nodeツリーが見えるか見えないかを判定したい | DevelopersIO
こんにちは。きんくまです。 htmlのnodeツリーが不可視状態かどうかを判定したかたったです。 簡単にいうと、ユーザーからブラウザで見えているのか、見えてないのかを判定したいのです。 不可視の例 空のdiv <div></div> 改行タグや半角・全角の空白文字だけだったり。 <div> <br><br> <p> </p> </div> scriptタグ <script> //何か書かれている </script> 要素は存在しているけど、スタイルで不可視になっている <div> <p style="display:none;">あいうえお</p> </div> 上の組み合わせでこんなやつとか <head> <style> .sample { display:none; } </style> </head> <div> <p style="display:none;">あいうえお
![[JavaScript] nodeツリーが見えるか見えないかを判定したい | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6082d053d0b1940e3a9c4d81bf031a09b51ab0c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F04%2Fjavascript.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Switching a Jest Project from Babel to SWC
JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌
Moving from JavaScript to TypeScript
オープンソースの開発に携われるエンジニアを大募集！
JavaScript／TypeScriptランタイム「Deno 1.18」リリース、Web Cryptography APIが完成
Revisiting Conditionals in JavaScript and TypeScript
How to Create Bank Landing Page HTML CSS JavaScript
