ES2015のコードをBabel+Jestでテストする - コピペコードで快適生活
まだ試したことがなかったので、やり方をメモ。 ライブラリのインストール # bableのインストール npm install --save-dev @babel/core @babel/cli @babel/preset-env # jestのインストール # babel-jestも一緒にインストールされる npm install --save-dev jest # importはNode.jsで使えないため # requireに変換するライブラリをインストール npm install --save-dev @babel/plugin-transform-modules-commonjs babelの設定 babel.config.js module.exports = { presets: [ [ "@babel/preset-env" ] ], env: { test: { // テス
ES2015(ES6)+webpack+babel-loaderで開発環境を構築 - Qiita
やること ES2015(ES6)とwebpackを組み合わせて、簡単なWebアプリケーションを作ってみます。 webpack はjsやcssなど、webページで読み込まれる部品の依存関係を解決し、合成してくれるモジュールバンドラーです。 webpackはgulp,gruntなどのタスクランナーと組み合わせて使うことも多いですが、今回は使用しません。 以下の条件を満たすプロジェクトを作成します。 classを継承する classをimportして使用する IE11が対応していない、ES6のPromiseを使う Mac OS X High Sierra Webpack 4.20.2 Node.jsをインストール 必要なモジュールはnpm(Node Package manager)でインストールが出来ます。 まずはNode.jsをインストールします。 brew install node これでn
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
Jest · 🃏 Delightful JavaScript Testing ドキュメント
スナップショット機能で大きなオブジェクトを容易に追跡できるテストを作成できます。スナップショットはテストと一緒に、あるいはインラインに埋め込んだ状態で表示できます。
prettier時代のESLintの設定 - Qiita
prettierとはコードフォーマッタである。 コードのフォーマットを完全に自動化してくれる恩恵は大きく、現状prettierを使わない理由はない。 go fmtみたいなものでユーザが設定を書くのではなくライブラリ側で一意に決まる。 Atomの設定をしていれば、保存するたびに修正されるので何も考えずに導入すればいいと思う。 Reactのjsxやflowも対応している。 すでにeslintよりもgithubのスターが多いのは驚くが。 prettier/prettier: Prettier is an opinionated JavaScript formatter. しかし、問題はeslintと役割が一部かぶることだ。 prettierが直すそばからeslintがそれを直すようにエラーを出し、そのeslintのruleを無効化したり見直したりする作業を繰り返すのはしんどい。 そこでeslin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ES6の import / export - Qiita
GitHub - heavenshell/vim-prettier: Prettier-Eslint-Cli for Vim