Node.js の Core へ ESM と CJS の新しい方式が実験的フェイズ(stability: 1)として入ります。 ESM 対応は安定化までのプランとしてステージを 4 つ(0 -3)用意しており、現在が 2 です。 modules/plan-for-new-modules-implementation.md at main · nodejs/modules Node.js Modules Team. Contribute to nodejs/modules development by creating an account on GitHub. 2019 年の 10 月に実験的から安定的へ移行するのが最終目標となります。(stage:3) 内容まとめ --es-module-specifier-resolution=node|explicit で処理解決方法を決定する ex

記事執筆時点での最新版の Node.js では、モジュールシステムとして ES Modules を使うことができる。 また、CommonJS で書かれたモジュールを ES Modules で読み込むこともできる。 Node.js のモジュールシステムは複雑すぎて苦手意識があったので、整理した。 この記事の内容は、Node.js のv14.7.0で動作確認している。 Node.js のモジュールシステムはバージョン毎に挙動が大きく変わるので、注意が必要。 そのファイルは CJS なのか ESM なのか Node.js で使えるモジュールシステムとして、ES Modules（以下、ESM）の他に CommonJS（以下、CJS）があり、CJS がデフォルトになっている。 Node.js におけるモジュールシステムを理解するためにはまず、Node.js が各ファイルをどのモジュールシステムとして

概要 npmプロジェクトで利用しているnpmパッケージ(依存パッケージ)でvulnerability(脆弱性)が見つかったときの対処フローについて記載します。 （GitHub等が親切に"We found potential security vulnerabilities in your dependencies."のように通知してくれるので便利）

nodenvで欲しいバージョンのnodeが見つからない…… プロジェクトで指定されたバージョンのNode.jsをインストールしようとして とうっても、欲しいバージョンがリストに出てこないときってありませんか？ どうやらnodenvはインストール時に登録されているバージョンしか表示してくれないようです。 調べてみても、nodenvを消してから再インストールするみたいな、ええっ🙄という情報が多いです。 nodenvをアップデートする一番簡単な方法 anyenvのプラグインであるanyenv-updateを使いましょう。 ※ そもそもanyenv使っていない人は、こちらなどが参考になります。anyenv、オススメです。 anyenv-updateのインストール anyenvのルートディレクトリ（デフォルトでは~/.anyenv）の下に、pluginsディレクトリを作り、リポジトリをクローンしま

概要 JavaScript/TypeScriptを書く中で、自分自身の気づき、他の方から頂いたアドバイスをメモとして残してきました。 その中で、使用頻度が高そうで、知っていれば誰でも簡単に実践できる物を抜粋して記事にしました。 ですので、主にJavaScript/TypeScriptの使用歴が浅い(プログラミングの歴が浅い)方向けに少しでも参考になれば幸いと考えています。 (※JS/TSに限った事では無いものも含まれます。また、こちらに記載した記法が必ずしも優れていると言うわけではありません。本記事はあくまでも、JS・TSを利用した際にこんな記法もあるよという紹介が主要点です。) 早期returnを利用する 条件を満たす場合に直ぐに return することで、コードのネストを減らし、コードの見通しを良くするテクニックです。 簡単な例としまして下記のコードが、 const checkNumb

独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境

例外処理 この章ではJavaScriptにおける例外処理について学びます。 try...catch構文 try...catch構文は例外が発生しうるブロックをマークし、例外が発生したときの処理を記述するための構文です。 try...catch構文のtryブロック内で例外が発生すると、tryブロック内のそれ以降の処理は実行されず、catch節に処理が移行します。 catch節は、tryブロック内で例外が発生すると、発生したエラーオブジェクトとともに呼び出されます。 finally節は、tryブロック内で例外が発生したかどうかには関係なく、必ずtry文の最後に実行されます。 次のコードでは、tryブロックで例外が発生し、catch節の処理が実行され、最後にfinally節の処理が実行されます。 try { console.log("try節:この行は実行されます"); // 未定義の関数を呼び

非同期処理:Promise/Async Function この章ではJavaScriptの非同期処理について学んでいきます。 非同期処理はJavaScriptにおけるとても重要な概念です。 また、ブラウザやNode.jsなどのAPIには非同期処理でしか扱えないものもあるため、非同期処理を避けることはできません。 JavaScriptには非同期処理を扱うためのPromiseというビルトインオブジェクト、さらにはAsync Functionと呼ばれる構文的なサポートがあります。 この章では非同期処理とはどのようなものかという話から、非同期処理での例外処理、非同期処理の扱い方を見ていきます。 同期処理 多くのプログラミング言語にはコードの評価の仕方として、同期処理（sync）と非同期処理（async）という大きな分類があります。 今まで書いていたコードは同期処理と呼ばれているものです。 同期処理

※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術

はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu

JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか)JavaScriptdebug初心者初心者向けデバッグ方法 更新 2019/5/20 console.trace()、console.time()、 console.timeEnd()、console.clear()を追記しました。 この記事について JavaScript大好きっ子とよももです！ JavaScriptの上手なconsole.log()の使用方法を調べていたらいろんな使い方があること、console.log()の他にも色々なデバッグ方法があることを知りました。 自分の勉強も兼ねてまとめてみることにしました。 賢いconsole.log()の使い方 例えば... 下記のような３つのオブジェクトがあるとします。

lightsail起動して、nodenvでNode.js入れるまで。普通にlithgsailのNode.js入ってるイメージ使えばいいんだけど、何か色々の用途で使いたかったからプレーンなOSスタートだった。 nodenvインストールする この辺見ながら上からする。 % git clone https://github.com/nodenv/nodenv.git ~/.nodenv % cd ~/.nodenv && src/configure && make -C src

背景・動機 業務でReduxを利用していますが、公式サイトに以下のようなコードが現れビビったので調べました。

訳者前書き 本記事は、InspiredWebDevの原文記事(英語)について、自身の理解を深める為に日本語翻訳したものです。 はじめに JavaScriptは絶えず進化している言語であり、過去数年で多くの新機能がECMAScriptの仕様に追加されました。 この記事は、Alberto氏の著書「最新のJavaScriptの完全ガイド(Complete Guide to Modern JavaScript)」の抜粋です。 同書では、ES2016、ES2017、ES2018、ES2019の新規追加要素について説明しています。 記事の最後に、すべてを要約したチートシートをダウンロードするためのリンクがあります。 1. ES2016の新機能 ES2016で導入された２つの新機能について説明します。 Array.prototype.includes() 指数演算子(べき乗) 2. Array.prot

TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための

この記事はFringe81 アドベントカレンダー2017の16日目です。 始めに ES6のimport/exportについては ・基本的にexport defaultを使う ・exportする対象が複数あれば、exportを使う ・exportされたモジュールはimportで受け取る ぐらいの雑な理解をしてました。 「基本的にexport defaultを使う」については、Design goals for ES6 modulesにて、以下のように言及されてます。 16.8 Design goals for ES6 modules If you want to make sense of ECMAScript 6 modules, it helps to understand what goals influenced their design. The major ones are: ・D

はじめに JavaScriptやTypeScriptで集合演算をしようと思って調べてみると、ES6以降Setは導入されているものの、これらの演算はbuilt-inで実装されていないようでした。 これっていうイディオムないんかと調べてみても、for文でどうのこうのとか、lodashを使いましょうとか、とてもじゃないですが納得できない…。 自分の中で、まぁこれなら許せるかという書き方について備忘しておきます。 Union(和集合) const x = new Set([1, 2, 3]); const y = new Set([2, 3, 4]); const union = new Set([...x, ...y]); //1, 2, 3, 4

はじめに こんにちは、モチベーションクラウドの開発にフリーのフロントエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2019」10日目の記事となります。 概要 Web系の開発をしているエンジニアであれば、Chrome DevToolsをよく利用されている方も多いかと思います。 特にフロントエンドエンジニアであれば、毎日のように、お世話になっているのではないでしょうか？ しかし、Chrome DevToolsは多機能であるがゆえ、あまり知られていない機能も多いはず。 そこで、この記事では、私が普段よく使っている機能や、今年になって知った便利な機能、面白い機能をまとめて紹介して行きたいと思います。 Console編 CSS - consoleを華やかに console.log('%cHello Qiita',

付録: JavaScriptチートシート JavaScriptの言語機能に関するチートシートです。 言語機能 コメント データ リテラル 文字列 データアクセス 演算子 関数と挙動 コントロールフロー モジュール その他 ガイド プロジェクト構造 言語機能 コメント コメントの書き方について。