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: { // テス
JavaScriptからURLのGetパラメーターを取得する２つの方法 | PisukeCode - Web開発まとめ
URLにくっついてる ?hoge=123 みたいな、 Getパラメーターを取得したい場合って多いと思います。（実際多い） そのやり方はURLをゴニョゴニョ解析したり、あるいは専用オブジェクトを使ったりと様々。 そこでJavaScriiptからURLのGetパラメーター取得する方法をまとめました。 個人的によく使う方法が２つあるので、コード例付きで紹介していきます。 方法１．URL.searchParams から取得する まず１つめが URL.searchParams から取得してあげるという方法 その名の通り、これは検索クエリ（ ?x=1&y=2 みたいなの ）を保持するプロパティです。 多分これが一番簡単なやり方かもしれません。 実際にどうやって取得するかは次の通りです。 まず次みたいに、GetパラメーターつきのURLがあるとしましょう。
Jestでテストを書こう！
はじめに はじめまして。 エンジニアのtaptappunです。 我々は普段からビットコインという「お金」を扱ったサービスを開発しています。 そのため、日々バグをなくす努力をしており、その一つとして自動テスト(CI)を導入しています。 ビットバンクでは普段、Node.js(TypeScript)を用いて開発しています。 今回はNode.jsのテストフレームワークであるJestを利用したテストの導入方法と実践的なテストの書き方について紹介していきます。 Jestについて Jestは、Facebookが開発を進めている、オープンソースのJavaScriptのテストフレームワークです。 Jest(Github) TypeScriptで記述したものでも利用できます。 テストフレームワークであるため、テストを書くために必要な一通りの機能が提供されています。 弊社ではTypeScriptで記述したテスト
【javascript】reduce - Qiita
reduceメソッドについてまとめます。 reduceメソッドとは 隣り合う2つの配列要素に対して左から右へ同時に関数を適用し、単一の値にする。というメソッドです。 例えば、「配列の中身を一つずつ足していって合計を求める」ということができます。 reduce() 以下、構文です。 array.reduce(callback [, initialValue]) array：対象となる配列 callback：配列内の各値に対して実行される関数、4つの引数を持つ accumulator：現在処理されている要素よりも一つ前の要素かinitialValue、もしくは一つ前の要素で実行された関数の結果 currentValue：現在処理されている要素 currentIndex：現在処理されている要素のインデックス array：対象となっている配列 initialValue：最初の実引数として渡される値
[JavaScript] Arrayメソッド破壊・非破壊チートシート - Qiita
引数として与えられた関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を返す
![[JavaScript] Arrayメソッド破壊・非破壊チートシート - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c4ecdfac1efa43a44f69150bcd40fad212429fb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMEFycmF5JUUzJTgzJUExJUUzJTgyJUJEJUUzJTgzJTgzJUUzJTgzJTg5JUU3JUEwJUI0JUU1JUEzJThBJUUzJTgzJUJCJUU5JTlEJTlFJUU3JUEwJUI0JUU1JUEzJThBJUUzJTgzJTgxJUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgyJUI3JUUzJTgzJUJDJUUzJTgzJTg4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kNjRhZmQ1MDQxZmU4OWNlYmQ0ZjVkZmJjNzMzYjMyMg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBTaG9rb3JlcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDk0NzllNTZhZDY5NzNjYzhhMDU3MTI0NDNiODUyNmQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D026a1a17774a4ac5765b47cc96639d8a)
【JavaScript】（.lengthじゃダメ！）連想配列の要素数を取得する方法
どうも、コウイチです。 今回は、JavaScriptで連想配列の要素数を取得するところで見事にハマりましたので、覚え書きがてら書いてみます。
JavaScriptで文字列の有無を調べるにはindexOfではなくtestを使う
indexOfではなくtestメソッドを使う JavaScriptで文字列の有無を調べる際にindexOfが使用されているコードをよく見かける。 indexOfを使用すれば以下のように文字列の有無を調べることができる。 indexOfは指定した文字列が含まれている場合は初めて出現したインデックス。見つからなかった場合は-1を返す。 var str = 'This is a apple pen'; if (str.indexOf('apple') !== -1) { console.log(true); } else { console.log(false); } // => true indexOfは正規表現が使用できないため文字列の有無を調べるなら正規表現が使用できるtestメソッドを使用したほうが良い。 例えばappleまたはbananaも含まれているかどうかをindexOfで調べるに
JavaScript (ES2015) 文字列中に変数展開できるテンプレート構文のメモ - かもメモ
JavaScriptで変数を展開した文字列を作成する時、+で文字列連結をしていましたがES2015(ES6)からは``(バッククォート)で囲うテンプレート構文(Template literal)で書くことができるようです。 ※ IEやAndroidでは未対応なブラウザもあるようなので、WEBサイト制作とかの場合はまだバベる必要がありそうです。 ブラウザ実装状況: テンプレート文字列 - JavaScript | MDN テンプレート構文(Template literal)による文字列中での変数展開 var val = "JavaScript" // 今までのやり方 var str1 = "Hello " + val + "!" // => Hello JavaScript! // テンプレート構文 var str2 = `Hello ${val}!` // => Hello JavaScr
JavaScript環境構築の設定をひとつずつ丁寧に -そのプラグインってどうして必要なの！？-：パイン缶
この本はWebフロントエンド開発の環境構築を1つ1つ丁寧にみていく本です。 特に設定が足りない状態で動かすとどうなるのか、なぜその設定が必要なのかについて踏み込んでいきます。 環境構築の難しさは設定をどれか1つでも間違えると動かないことにあります。 そのため環境構築をする上では、自分がした1つ1つの設定が何をしているのかを正確に把握しなければいけません。 そこでこの本では暗黙的に「そういうものだから」と思われがちな設定に注目し、解説します。 どの設定を足さなければ動かないのかをなるべくサンプルコードを示しながら解説します。 例えば、次のような例を扱います。 * babel-cli を使わずにトランスパイル * @babel/preset-env を使わずにトランスパイル * ESLintのpluginとextendsの役割の違い、またはその例外について * eslint-config-pr
Object.assign() - JavaScript | MDN
コピー先オブジェクトのプロパティは、コピー元に同じキーのプロパティがあると上書きされます。より後のコピー元のプロパティが、より前のものを同様に上書きします。 Object.assign() メソッドは、コピー元オブジェクトから列挙可能 (enumerable) かつ直接所有 (own) のプロパティだけをコピー先オブジェクトにコピーします。この際、コピー元オブジェクトには [[Get]]、コピー先オブジェクトには [[Set]] を使いますので、ゲッターとセッターを呼び出すことになります。これはプロパティの代入 (assign) であり、プロパティをコピーしたり新しく定義したりするのとは異なります。そのため、コピー元にゲッターが存在する場合、新しいプロパティをプロトタイプにマージする用途には不適切でしょう。 プロパティ定義を (列挙可能属性も含めて) プロトタイプの中にコピーするには、この
huskyでgit commit時にnpm testを走らせる - hiro08gh
こんにちはかみむらです。 OSSのライブラリを見回ってたときにhuskyというライブラリの存在を知りました。調べてみると、スターが1万ついてる有名ライブラリみたいです。概要はgitコマンドをhookにして、指定したコマンドを走られることができます。例えばコミット時にlinterとtestを走らせたり、push時にtestを走らせたりです。それでは簡単に見ていきましょう。 huskyのgithubページ github.com 改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで 作者:山田 祥寛発売日: 2016/09/30メディア: Kindle版 インストール npmまたはyarnでインストールします npm install --save-dev husky or yarn add -D husky 使用方法 huscyのgithubページにある例を参考に
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
2019年にIE 11に対応するためのbabel設定 - Qiita
{ ... "scripts": { "build": "webpack --config webpack.config.js" }, "devDependencies": { "@babel/core": "^7.7.2", "@babel/preset-env": "^7.7.1", "babel-loader": "^8.0.6", "core-js": "^3.4.1", "regenerator-runtime": "^0.13.3", "webpack": "^4.41.2", "webpack-cli": "^3.3.10" } } module.exports = { presets: [ [ '@babel/preset-env', { targets: { ie: '11' }, useBuiltIns: 'usage', corejs: 3 } ] ] }
Object.assign()を使ったコピーいろいろ - Qiita
Object.assign()を使ったコピーについて調べたことを整理する。 Object.assign(target, ...sources) 1個以上のソースオブジェクトについて、その直接所有(own)で列挙可能なプロパティの値をすべてターゲットオブジェクトにコピーして、新しいオブジェクトを生成します。 第一引数に指定したオブジェクトに第二引数以降の全てのオブジェクトのプロパティを第一引数に指定したオブジェクトにコピーしてくれる。 第一引数に無名オブジェクトを指定することで、コピーした内容の新規オブジェクトを作成できる。 let obj1 = {a:1, b:2}; let obj2 = Object.assign({}, obj1); console.log(obj2); // {a:1, b:2}
JSON-RPCって何？ - Qiita
この記事は、JSON-RPC 2.0 を調べたことを走り書きしたレベルものです。実際の利用経験に基づいた情報でもなければ、しっかり時間をかけて裏付けをとった情報でもないため、誤った理解が含まれている可能性がある点にご注意ください。ツッコミや編集リクエストは歓迎します。 概要 JSON-RPC は、 RPC (Remote Procedure Call) を実現するプロトコルの1つです。その名の通りJSON形式でリクエスト＆レスポンスを表現するシンプルな仕様となっています。 例えば、次のようなリクエストをJSONで送ると、別のマシンで subtract(42, 23) が実行され、結果の 19 がレスポンスとして返ってきます。
すっきり書きたい JavaScriptの条件分岐 - Qiita
(※追記 2020/2/19 コメントのご指摘をもとに、記事を修正しました) はじめに 未経験からNode.jsの現場に配属された2019年新卒エンジニアが、学習の振り返りとしてJavaScriptの基礎の基礎をまとめます。 過去のJavaScript基礎シリーズ↓ JavaScriptでvarが推奨されない理由を整理してみた 今回は、多くの書き方が存在するJavaScriptの条件分岐に関して、よりすっきりとした書き方を考えていきます。 Goal 思考停止のelseやswitchから離れる 可読性やリファクタリングのしやすさの観点から、JavaScriptの条件分岐を使いこなす まず「すっきり」を定義する 本記事で目指したい「すっきり」を、以下のように定義します。 コードの可読性が高いこと バグが生まれにくいこと 後からリファクタリングがしやすいこと コードの可読性が高いこと プロジェク
【JS】addEventListenerが機能しない理由についてご教示ください
プログラミング初心者です。 初歩的なミスかと思いますが原因が分からず どこにミスがあるのかご教示いただけないでしょうか。 よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ###前提・実現したいこと ボタンをクリックすることで、ボタンに書いていある文字をinnerHTMLで変更したい。 ###発生している問題・エラーメッセージ クリックしても文字が変更されません。 JSコンソールでは以下のようなアラートで、addEventListenerが機能していなとのことです。 Uncaught TypeError: Cannot read property 'addEventListener' of null ###ソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Stop at 00
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
動的に増える要素へのイベント設定 - komagataのブログ
JavaScriptで連想配列から特定のキーだけ抽出 - Qiita
jest で非同期関数をテストするときの注意点 - Qiita
