2020-06-09のJS: Firefox 77.0、HTML5 Boilerplate 8.0.0、React TypeScript Cheatsheets
JSer.info #491 - Firefox 77がリリースされました。 New in Firefox 77: DevTool improvements and web platform updates - Mozilla Hacks - the Web developer blog Firefox 77.0, See All New Features, Updates and Fixes Firefox 77 サイト互換性情報 | Firefox サイト互換性情報 Firefox 77 for developers - Mozilla | MDN 開発者ツールのSource Mapロード時間の改善、デバッガーのステップ実行の改善、ネットワークパネルの改善などが行われています。 またES 2021で入る予定のString#replaceAllの実装、JPEG画像がExifデータに基づい
JavaScriptの歴史については「JavaScript: The First 20 Years」を読む
JavaScript/ECMAScriptというプログラミング言語の歴史について書いた文章はWikipediaなどいろいろなものがあります。 その中でも、ECMAScript 2015のSpec EditorであるAllen Wirfs-Brockによって書かれた”JavaScript: The First 20 Years”が特におすすめです。 JavaScript: The First 20 Years JavaScript: The First 20 Years | Zenodo “JavaScript: The First 20 Years”はHOPL IV - History of Programming Languages向けに書かれたPaperです。 JavaScriptの誕生からECMAScriptの策定、ECMAScript/JavaScript各バージョンでの違い、ブラ
JavaScript: The Definitive Guide, 7th Edition
2.1 The Text of a JavaScript Program2.2 Comments2.3 Literals2.4 Identifiers and Reserved Words2.4.1 Reserved Words2.5 Unicode2.5.1 Unicode Escape Sequences2.5.2 Unicode Normalization2.6 Optional Semicolons2.7 Summary 3.1 Overview and Definitions3.2 Numbers3.2.1 Integer Literals3.2.2 Floating-Point Literals3.2.3 Arithmetic in JavaScript3.2.4 Binary Floating-Point and Rounding Errors3.2.5 Arbitrary
国税庁法人番号を使った経産省発、法人種別名の抽出コンポーネントのESモジュール版公開
ブラウザやDenoでサクッと動く、法人番号からの検索するESモジュールができました。 好評な経産省によるオープンソース「IMIコンポーネントツール」の7つ道具、一通りできました！ 「IMIコンポーネントツール」法人種別名の抽出コンポーネント追加(src on GitHub) サンプルとしていれている番号はどんな法人でしょう？ [変換]ボタンを押してみまてください。 使い方は簡単です。下記コードを main.html として保存して、ブラウザで開くだけ！ <script type="module"> import IMIEnrichmentHojin from "https://code4sabae.github.io/imi-enrichment-hojin-es/IMIEnrichmentHojin.mjs"; const main = async () => { const json
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
日本政府発のJavaScriptライブラリを勝手にweb標準化するプロジェクト、全角-半角統一コンポーネントのESモジュール/Deno対応版公開
全角半角という言葉は、パソコン普及前夜のワープロ時代の遺物。「住所を全角で入れてください」など、優しくないお願いは排除し、必要な処理はプログラムでしましょう。 日本政府、経済産業省（経産省）から「IMI 情報共有基盤 コンポーネントツール」が発表されました。 5つ星オープンデータの語彙を定める「共通語彙基盤IMI」に関連したオープンソースなJavaScriptで作られたツール群です。 Node.js を前提に作られていますが、ブラウザや Deno で動かしたいので、ひとまず簡単そうな「全角-半角統一コンポーネント」を移植。インストール不要で下記のようにすっきり使えるものができました！(src on GitHub) $ cat > main.mjs import IMIMojiConverter from "https://code4sabae.github.io/imi-moji-conv
Concepts | webpack
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from. Since version 4.0.0, webpack does not require a configuration file to bundle
Stack Overflowの調査によると、デベロッパーの5割以上が「フルスタック」エンジニアを自認。最も使われている言語はJavaScript、最も愛されている言語はRust
IT技術者向けQ＆Aサイトとして知られるStack Overflowは、同サイトの利用者6万5000人のデベロッパーの回答から得られた調査結果「2020 Developer Survey」を発表しました。 調査は今年の2月に行われ、北米、南米、欧州、アフリカ、アジアなどグローバルに広がる同サイトの利用者から回答が寄せられました。調査結果は回答者であるデベロッパーの年齢や学歴、プログラミング開始年齢、現在の地位や役割、使っているプログラミング言語やフレームワーク、好みのプログラミング言語や嫌いな言語、好きなプラットフォームなど多岐に渡っています。 回答者の地理的分布は、米国が19.5％、カナダが3.4％、英国6.1％、ドイツ6.1％、インド13.1％、ロシア1.7％、中国0.6％、日本0.5％などとなっています。 ここでは調査結果から4つだけ見どころを紹介したいと思います。 1つ目は「Dev
webpackの次のバージョンで入るassetModulesの紹介 - 技術探し
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
決定版！イマドキの ESLint 設定！ | DevelopersIO
2021 年度版は Zenn に書きましたのでご覧ください。 ESLint 設定を作成する技術 そろそろ書かねばな、と思っていたところに必要としてくださる方がいらっしゃることがわかったので書きました。 eslint, eslint-plugin-prettier, typescript-eslintの組み合わせは僕の中では完全に鉄板になったんだけど、「決定版！イマドキのESLint設定！」みたいなタイトルの煽り記事を書く元気はないんだよな…… — なかざん (@Nkzn) June 1, 2020 2020 年 6 月現在のまとめです。 TL;DR 先にベースの完成形となる設定ファイルをおいておきます。 JSON に比べ YAML のほうが記述量が少なく構造が把握しやすいので YAML で書いています。次の内容をプロジェクトのルートディレクトリーに .eslintrc.yml として保存し
vendor.js の終焉と Granular Chunks - 徒然技術日記
webpack を使った code splitting のベストプラクティスとして，v3 以前の CommonsChunkPlugin の時代から node_modules 以下に置かれている依存ライブラリを vendor.js という単一の chunk にまとめる方法が紹介されていました． これは webpack の公式ドキュメント Caching | webpack や Google の Make use of long-term caching | Web Fundamentals | Google Developers でも説明されている通り，「ライブラリのコードはアプリケーションコードに比べると更新頻度が低い」という仮定のもと vendor.js にライブラリコードを切り出すことで，キャッシュ効率をよくすることが主な目的でした． しかし時は流れ，いつしか「ライブラリのコー
JavaとJavaScriptでwebブラウザとのソケット通信① - Qiita
背景 [更新]：APIを使用して簡単に実装した ネット上で多人数同時通信のものを作成するため、ソケット通信について実践したことを記述。 チャットやオンラインゲームのような、複数でのリアルタイム通信を希望。 「webブラウザ」で実行できるようなプログラムを「Java」で組みたかったのだが、ググってもあまり出てこないので記述しておく。 (知識不足でネットワークプログラミングという言葉も知らなかったため、ググり方に問題があるかも…) データの読み書き等の超基本的なところからスタート。 ソケット通信 通信方法の1種。 サーバーとクライアントに対して、HTTPのgetアクセスやpostアクセスのように単一方向への通信ではなく、リアルタイムでの双方向通信が可能。 ⇒ サーバープログラムとクライアントプログラムの2つが必要。 詳しくはググってほしい。 実行環境 windows10 eclipse (To
オープンソースのJavaScript／TypeScriptランタイム「Deno 1.0」がリリース
Denoは、単一の実行ファイルとして提供され、外部コードのフェッチに対応しているので、他のツールを使用することなく任意の動作を定義できる。 コードはWebブラウザと同様にサンドボックス内で実行され、ストレージやネットワークへのアクセスなど、悪意のある行動につながるような操作は、標準では許可されていない。 JavaScriptのコードをスタンドアロンプロセスとして動作させるための取り組みとしては、すでにNode.jsが存在するが、Node.jsは多数のユーザーを抱えていることからシステムの進化が難しく、かつ時間がかかる。また、JavaScriptの仕様変更や、TypeScriptのような派生言語の登場が、今後のNode.jsの開発を困難にする可能性がある。 さらに、Denoの開発者は、Node.jsにおける外部ライブラリとのリンクがNPMリポジトリを介して一元化される点が、Webの理想と一致
JavaScriptコードの静的解析ツール「ESLint v7.0」リリース | OSDN Magazine
JavaScriptの静的コード解析ツール「ESLint」開発チームは5月8日、最新のメジャーリリース版となる「ESLint v7.0.0」を公開した。 ESLintはJavaScriptコードの問題を検出できる静的なコード解析ツールで、さまざまなテキストエディタに組み込まれている。ほとんどの問題に対して自動的なコード修正が可能で、また構文解析を行っているため、検索・置換型で発生するような誤認識などのエラーが起きないという。 ESLint v7.0は2019年6月に公開されたESLint v6.0に続くメジャーリリース。Node.jsのバージョン8系が2019年12月にサポート終了を迎えたことを受け、最新版ではそのサポートが削除された。 コードルールでは、複数のルールでbigintを認識するようにアップデートした。また、Node.js/CommonJSルール10件が非推奨となった。esli
2020-05-12のJS: ESLint v7.0.0、Next.js 9.4、npm 7の変更予定
JSer.info #487 - ESLint 7.0.0がリリースされました。 ESLint v7.0.0 released - ESLint - Pluggable JavaScript linter ESLint v7.0.0 の変更点まとめ - Qiita メジャーアップデートであるため、ビルトインルールの変更が含まれています。 eslint:recommendedのルールを更新、いくつかのビルトインルールのデフォルトオプションの変更、Node.js関係のビルトインルールをeslint-plugin-nodeへ移行などが行われています。 また、.eslint.jsをデフォルトでignoreしないように変更、--configや--ignore-pathオプションでのパスの扱いの変更、プラグインの読み込み元ディレクトリが.eslintrc.*を基準とする変更なども含まれています。 その
Next.jsで個人サービス作ったので技術スタックを公開する｜Vexus2
一昨日「買って応援！」というサイトをリリースしました。 コロナの影響で打撃を受けている生産者や飲食店、販売店の方々が「廃棄になるよりは･･･」という思いで各所で販売されていますが、情報が散らばっていたのでまとめている【買って応援！】するためのサービスです。 割とモダンな構成で作っているかなと思うので、使用している技術・サービス周りを少しまとめてみました。 Frontend今回は初めてProductionでNext.js(React)を使いました。 元々自分はNuxt.js(Vue)を書くことが多く、いつもだったら「Nuxt.js(Vue) + Firebase + Heroku + Algolia (+ 必要に応じてFastly)」を採用することが多いんですが、直近のNext.js 9.3から強力なSSGサポートが入ったこともあり、個人でやるんだしせっかくなら、ということでフレームワークも
next.js の amp モードで tailwind.css を purgecss と合わせて使う
このリポジトリ でやったこと。 やろうとしたこと tailwind.css は Utility First と銘打った CSS フレームワークで、コンポーネント化を前提としたモダンフレームワークと相性がいいです。今回は next.js の amp-mode で tailwind を使おうとしてみました。 Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs 問題 前提として、 amp には inline css の容量制限があり、75kb を超えると AMP と認識されなくなります。 tailwind はビルドして使うのが前提のフレームワークですが、全部入りの tailwind.min.css は 1.3 M あります。これでは到底、75 kb に収まりません。 AMP の CSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Developer, Author, and Speaker | Juan Cruz Martinez
Setting up efficient workflows with ESLint, Prettier and TypeScript
Babel 7.10 Ships with Better React Tree-Shaking
