Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する
@babel/polyfillのページにBabel 7.4.0から非推奨になったと書かれている。 > As of Babel 7.4.0, this package has been deprecated この記事ではwebpack4でBabel7.4を ...
シャローコピー(shallow copy)とディープコピー(deep copy)の違い
変更前後の値を比較する際に、ディープコピーが使われる。 例えば、商品の管理画面を作成しているとする。 商品名や説明、金額を変更できるが、管理画面を使っている人は変更前はどんな値だったか確認しながら変更したいと思う。変更前の値と変更後の値を比較するには、変更前の値をどこかに保持しておかねばならない。そこでディープコピーが使われる。 ここでシャローコピーを使うと、 ...
JavaScript axiosをasync、awaitとtry、catch、finallyで制御する
HTTP通信ライブラリのaxiosを使って、 APIをasync、awaitで制御するコードを書いていく。 [[toc]] webpackでbabel7 + webpack-dev-server + json-serverの環境構築 Promiseやasync、`aw ...
JavaScript dayjsはMoment.jsの代替になるか?
JavaScriptの日付操作には罠が多く、業務では日付操作を簡単かつ安全に操作するライブラリが使われる。日付操作のライブラリの中でもMoment.js(Star数40,601)はよく知られているが、ファイルサイズが大きくパフォーマンス改善の妨げになることがある。 そこでこの記事ではより軽量で ...
JavaScript webpack4でhtml-webpack-pluginを使い、キャッシュ制御、テンプレートにejsを使う
html-webpack-plugin、css-loader、mini-css-extract-plugin、ejs-compiled-loaderを使い、分割したejsをテンプレートにして、ブラウザキャッシュを回避できるCSS、JavaScriptを読み込ませたHTMLを出力できるようにする。 [[toc]] html-webpack-pl ...
JavaScript Babel7で出来ることを確かめる
webpackやrollupのようなバンドラーや、Vue CLIのような開発ツールとともにBabelが使われている。しかし、そもそもBabelは何なのか、そしてどう使えばよいのだろうか。 この記事では、Babel7の挙動を確認していく。 2019/5/22追記 [Babel 7.4.0で非推奨になった@babel ...
JavaScript ejsの使い方
テンプレートエンジンであるejsの基本的な使い方を見ていく。 [[toc]] ejsとは ejsはJavaScript用のテンプレートエンジンだ。 ejsを使うことでHTMLをヘッダーやフッターで分割してファイルを管理したり、HTMLエスケープをしたり、繰り返し処理や分岐を簡潔に記述できるようになる。 e ...
JavaScript markdown-itとよく使うプラグインまとめ
JavaScriptでMarkdownをHTMLに変換したいときには、markdown-itが使える。VuePressでも使われているので、そのデフォルトの挙動とプラグインをいれることで何ができるようになるのかを確認していく。 [[toc]] markdown-itとは markdown-itはMarkdownパーサーだ。 Markdown(マー ...
Rollup なぜrollup-plugin-commonjs、rollup-plugin-node-resolveプラグインが必要なのか
Rollupで複数のファイルを1つにまとめる際にrollup-plugin-commonjs、rollup-plugin-node-resolveプラグインが使われる。この2つのプラグインはいったいどんな役割があるのだろうか。Rollupの概要をおさえた上で、環境をつくり動きを確認していく。 [[toc]] Rollupとは Rollupとは、モジュ ...