🌕 moonでのmonorepo管理とpackemonでのCJS/ESMのdual package
🌕 moonでのmonorepo管理とpackemonでのCJS/ESMのdual package 🌕 moon 一貫性を持ったmonorepo管理ツール for JavaScript ハッシュを使ったファイルキャッシュ プロジェクトのパッケージ間の依存関係の分析とタスク実行 Node.js/npmパッケージマネージャーのバージョン管理と一貫性 TypeScriptのProject Referendcesの一貫性 比較 Nx: The Framework + Pluginで拡張する Lerna: Nx傘下、ライブラリ公開向け Turborepo: タスク実行の最適化をする moon: monorepoでの一貫性を提供する Packemon: moonと同じ作者。ESM/CJSのライブラリ公開向け 比較(言語) Nx: TypeScript + C++[^1] Turborepo: Go
UAX31: Unicode Identifier の話
今日はまた去年の作業が元ネタで、プログラミング言語の識別子に使える文字に関する話です。 レターか数字 「1文字目にはアルファベットか _、2文字目以降にはそれに加えて数字を使えます。」 30年くらい前にはこれが「プログラミング言語の識別子(変数名など)に使える文字列」の定義でした。 _ の部分はプログラミング言語次第ですが、「1文字目にアルファベット、2文字目以降に数字」の部分は結構いろんな言語でそうだったんじゃないかと思います。 まあ、昔のプログラミング言語は ASCII コードで書く物だったので、上記の条件は [a-zA-Z] とか [0-9] みたいな正規表現で書けたんですが。 Unicode の時代になると「アルファベットだけでいいのか」とか「アルファベットって何だ」という話になります。 レター まず、「アルファベット(alphabet)」というと母音と子音が分かれてる文字のことで
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
JavaScriptのIterator / Generatorの整理
目的と対象読者 IteratorとIterableとGeneratorとGenerator Functionの区別が曖昧な人 (記事前半) Generatorの制御フローを完全理解したい人 (記事後半) の理解を深めるための記事です。 まとめ IteratorとIterableの関係 Iteratorは狭義には呼び出し元の next 呼び出しに応じて要素を出力するインターフェースである。 IterableはIteratorを生成するインターフェースである。 IterableだからといってIteratorとは限らず、IteratorだからといってIterableとは限らない。しかし実際には多くのIteratorはIterableのインターフェースも実装している。 Iterableとコレクションは相互変換可能である。 Iterableは for-of ループで処理できる。 IteratorとG
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
2021/02/25(木) Node学園 35時限目の発表資料 https://nodejs.connpass.com/event/203464/ Node.js の ES Modules 対応についてRead less
【Rome】RomeはJavaScriptをやめてRustにするってよ - Qiita
RomeはLinterでありCompilerでありBundlerでありFormatterでありTesterでありMinifierであり…… ともかく、フロントエンドの統合ツールチェーンです。 これまでBabel、ESLint、webpack、Prettier、Jestなど様々なツールでバラバラに行っていた作業が、Romeひとつ使うだけで完結するようになるという、これまで何度再発明されてきたかわからない究極のフロントエンドツールです。 まあ、今のところ日本での知名度はさっぱりなのですがね。 で、これまでRomeはJavaScriptで書かれていたのですが、これをRustで書き直すことが発表されました。 以下はRome公式サイトの記事、Rome will be written in Rustの日本語訳です。 Rome will be written in Rust 🦀 RomeはJavaSc
ちょっと複雑なシェルスクリプトをJavaScriptで書く - lacolaco-engineering
ちょっと複雑なシェルスクリプトを https://github.com/google/zx を使って書くとJavaScriptプログラマにとってはメンテナンスしやすい /lacolaco/lacolaco.iconはzx歴 3-4ヶ月ってところ (2021-08) 嬉しいところ async/awaitが使える 配列が扱いやすい モジュールで再利用しやすい 他のNode.jsライブラリと併用できる Prettierでフォーマットしやすい Lintしやすい エディタ支援が安心 Made by Google 微妙なところ JavaScriptプログラマ以外にとっては無用 とはいえシェルスクリプトによほど慣れてる人以外はよく整理されたJavaScriptのほうがセマンティクスを読み取りやすいのではないか スクリプト自体はこんな感じ（公式READMEより） code:js #!/usr/bin/en
HTML の DOM に指定した id って JavaScript のグローバル変数に格納されるって知ってた？
はじめに タイトルの通りなんですが, HTML の DOM に指定した id はすべて同じ変数名としてグローバル変数に格納されます. つまり id を好き勝手付けちゃうと知らぬ間にグローバル空間が汚染され, 予期せぬバグを起こしてしまう可能性があります. なので id の値は慎重に考えて付けましょうという. っという注意喚起もしたいんですが, 実は今回伝えたいのはそれではありません. メインはこの仕組みを逆手に取って活用することで手軽にツールを作ったりできますよーという紹介になります. この tips を活用して, ちょっとした Markdown Editor も作ってみたのでよかったら参考にしてください. 具体例 具体的な例は以下です. このように, 要素に id を指定していた場合はグローバルに変数として格納されているので document.getElementById を呼ばなくても
オリジナルのJavaScriptライブラリを公開しよう
オリジナルのJavaScriptライブラリを公開します！ ライブラリの作り方よりかは、実際に公開する手順やCI/CDについて解説します。 【技術】 ・ JavaScript ・ Node.js ・ npm/yarn ・ Mocha ・ Chai ・ Git/GitHub ・ GitHub Actions
Reactを自作しよう
この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele
2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる
2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
Front-End Performance Checklist 2021 (PDF, Apple Pages, MS Word) — Smashing Magazine
Let’s make 2021… fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016. Ah, you can also get useful front-end tips in our email newsletter. This guide has been kindly supported by our friends at LogRocket, a service t
JavaScriptで要素をフェードイン・フェードアウトで切り替える ―async/awaitでrequestAnimationFrameを使う― - あなたとあなたの話がしたい
妻の歌人としての個人サイトのトップページで、短歌をアニメーションで切り替える処理をJavaScriptで書いている。 jQueryには上のような専用メソッドがあるフェードイン・フェードアウト処理を自分でググりつつ書いてみたところ、試行錯誤できるポイントがあったのでまとめておきたい。 setTimeoutを使った当初実装 まずjQueryの実装は高度に共通化されていて読み解くのがなかなか大変そうだったので、ググって実装方法を探してみた。 このStack Overflowの回答が分かりやすかったので、参考にして実装してみた。 それがこれ。ループでsetTimeoutを使って100ミリ秒ごとに少しずつopacity（不透明度）を変化させている。 分かりやすい処理でちゃんとフェードイン・フェードアウトしたので満足しつつ、念の為他のサイトの実装例も色々と見てみたらもっと良い実装方法がありそうだった。
Unminify
If you’ve minified some code for your website or web app, you should have kept the original, unminified code for future reference. If you accidentally lost the originals or are reverse-engineering some code from another developer, you might need to unminify some already minified code. That’s where our totally free unminify tool comes in! What is minification? When a developer writes code, they wil
JavaScript で遅延評価を導入して起動を高速化した話
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 Flash Player を JavaScript で実装していた際に、現場から「起動の高速化」という難しい要求をもらった際、「遅延評価」を導入したところ大変効果がありました。今回、その遅延評価について簡単なご紹介をしたいと思います。 Flash Player 起動までのステップ 当時 Flash Player を JavaScript で提供していた際、当時のスマートフォン端末においてロード完了から最初の画面が出るまで大体 150ms くらいかかっていました。普通の Web ページであれば 150ms はロード時間の中に吸収され許容範囲になる可能性が高いのですが、当時 Flash Pl
async/await は Promise を置き換えない - Okapies' Archive
まとめ async/await 構文は、Promise で書ける処理のうち特定のケースしか表現できない 特定のケースとは、ある非同期処理の前処理と後処理がそれぞれ 1 個ずつの場合のみである async/await 構文は初心者に非同期処理を導入する際に適しているが、非同期処理を逐次処理として書けるという幻想を与えるので、どこかで知識をアップデートする機会を設けるべきである この記事はなに？ 少しバズったのでまとめておこうかと。 「async/await があれば Promise なんて難しいものは要らない！」とか言ってるウブな子に、複数の API に並列にリクエストを投げて一つ以上成功した時だけ先に進む、みたいな問題を与えて愛でてみたい。— Yuta Okamoto (@okapies) 2020年12月11日 async/await は Promise のネストを手続き的なコードに見え
polyfill を深堀りする - mizdra's blog
この記事ははてなエンジニア Advent Calendar 2020 5日目の記事です。4日目は id:syou6162 さんで、数字のバラ付きを考慮して意思決定する技術でした。 qiita.com developer.hatenastaff.com こんにちは、id:mizdra です。今年新卒としてはてなに入社し、WebアプリケーションエンジニアとしてGigaViewerというマンガビューワーを作っています。 最近のはてな社内では「tech-future」という、様々な技術を見つめ直すワーキンググループを運営しています。この会では、ある技術についての要点をまとめるだけでなく、その技術にまつわる歴史を紐解いて整理し、その上で全体を俯瞰して将来その技術がどういう方向に向かうのかを議論し、未来を予測する手がかりを作る、といった挑戦的な取り組みをしています。既に弊社のエンジニアから「tech-
JavaScript 長いループ 分割 - hitode909の日記
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのCollection操作をする時はお願いがある、一呼吸置いてから操作をしてくれ
What is the difference between ˍˍˍ and ˍˍˍ in the front-end development? - this vs that
