Babel のインストールと設定ファイルの作成 $ yarn add -D @babel/core @babel/cli @babel/preset-env babel.config.js module.exports = { presets: [ [ "@babel/preset-env" ] ], }; Jest のインストール $ yarn add -D jest 公式ドキュメントによると bab…

Babel + Jest で JavaScript のテストをする

先に JSX 内で &nbsp; が含まれる場合のテストのハマりどころ書いてしまったけど、改めて JavaScript での扱いをメモ。 JavaScript での取得 <p id="elm">星宮&nbsp;いちご</p> const elm = document.getElementById('elm'); elm.innerText; // 星宮 いちご elm.firstChild.n…

JavaScript &nbsp; なスペースのあるHTMLの扱い

HTMLで時々見かけるやつ。 &nbsp; &nbsp; Non-Breaking Space 文中で折り返しさせたくない語句を繋ぐ時に使う特殊文字。 JavaScript で &nbsp; が含まれるHTMLを扱う時のトラップ コンポーネント時代の昨今だとJSXとかJavaScript内にHTMLを書いたりすること…

JavaScript, React &nbsp; なスペースのあるHTMLのテスト

React で作ったアプリを Jest + enzyme でテストしている時にTypeError: Cannot read property 'equal' of undefinedというエラーになったのでメモ enzymeのAPIリファレンスを見ながらこんなテストを書いていました。 describe("App", ()=> { const app = sh…

React Jest + enzyme 'equal' of undefined になる

react-create-app とかボイラーテンプレートでサクッとできる時代だけど、自分で作ってみて学ぼうと思ったので、秘伝のタレ作ってた 構成 /build ... ビルドされたファイルが出力される /src |- /stylus | |- App.styl |- index.js |- index.pug package.js…

Webpack Babel + Pug + Stylus で ホットリロードできるSPA開発環境作った。

create-react-app で作ったプロジェクトを npm run eject して webpack の秘伝のタレを眺めていて次ような記述を発見しました。 const loaders = [ // 略 ].filter(Boolean); 0 とか null とか undefined とか false になる値を配列から削除してる array.fil…

JavaScript null とか undefined を配列から取り除く

VDOMなフレームワークを使っているとHTMLの属性を直接触る機会はあまりないと思いますが、カスタムデータ属性 data-* の操作には getAttribute / setAttribute より dataset を使うと簡単です。 カスタムデータ属性 data-* カスタムdata属性の名前はdata-で…

JavaScript data-属性の操作

React のアプリで例えば編集モードの時にはフィールドで、そうでない時はテキストを表示するなど、条件によって表示を変えたい時など JSX 内で分岐をさせたい場合とか。 ふと思った。 JSXの中でif文使いたい場合って何がスタンダードなんだろう？JSXの中で {…

React JSX の中で if で分岐させたい

React Hooks を使ったアプリでボタンの状態やフィールドへのフォーカスなど ref を使った操作を、そのボタンやフィールドの親コンポーネントから呼び出したい時のメモ。 日本語が不自由なのでサンプルを 例えばボタンを押した時に非同期処理をするから、処理…

React Hooks 親コンポーネントから子コンポーネントをのDOMを ref を使って触りたい。

[{id:1, ...}, {id:2, ...}. {id:3, ...}, ...] みたいな配列を{id: {...}, id: {...}, id: {...}, ...} なオブジェクトに形式に変換したい時のメモ。 e. g. 元の配列 const arg = [ {id: 1, name: '星宮いちご', type: 'cute'}, {id: 2, name: '霧矢あおい'…

JavaScript 配列をオブジェクトに変換したい。

ReactのJSXでクラス名を付ける時に変数と固定値な文字列を一緒に使いたいとき コレはうまくいかない return ( <button className="btn btn-${btnState}">BUTTON</button> ); 文字列結合する function Button() { const [btnState, setBtmState] = useState('primary'); return ( <button className={'btn btn-' + btnState}>BUTTON</button> ); } テンプレート構文 …

React JSX className に変数と固定値を混ぜて使いたい

文字列をそのままJavaScriptとして実行できる邪悪なパーツとされるeval と new Function のメモ。 node使ってモジュール入れてBabelしてwebpackする時代に使う事なんてなさそうだけど、、、 eval グローバル・スコープ内にある変数にアクセスできる let n = …

JavaScript eval vs. new Function

ES2015 で使えるようになった class ですが、JavaScriptではあくまでクラスっぽいモノ(プロトタイプ・オブジェクト)として実装されているらしいので、継承元のプロパティやメソッドを使えるsuperがどうなってるのか気になったので調べてみたメモ。 super con…

JavaScript (ES2015) super のメモ

ReactのJSXでコメントを書く方法のメモ JSX Comment JSXの{ }の中はJavaScriptが動作するので{ }で囲ってコメントを書くことができる {/* 一行コメント */} {/* 複数行 コメント */} // も使えるが{ }の閉じタグの前に改行が必要。 {// 一行コメント } 改行…

React JSX コメントを書きたい！

キーの名前とプロパティの変数名が同じなら省略できる ES5 var cute = '星宮いちご'; var cool = '霧矢あおい'; var sexy = '紫吹蘭'; var soleil_es5 = { cute: cute, cool: cool, sexy: sexy, }; console.log( soleil_es5 ); // { cute: '星宮いちご', coo…

JavaScript (ES2015) Object の色々メモ

ReactのJSXで複数のタグを返すコンポーネントを作りたい時 JSXはルートが1つのタグでないとエラーになる 例がアレだけど、これはエラーになる function ListData() { // トップの改装に複数のタグあるとエラーになる return ( <li>星宮いちご</li> <li>霧矢あおい</li> <li>紫吹蘭</li> …

React 複数のタグを返して render したい

React入門初心者マンとして引き続きエクセル的なモノを作るチュートリアルをやっています。 今回テーブルをソートしようとしてハマったのでメモ。 react: ^16.8.3 react-dom: ^16.8.3 リストのような配列から作られるエレメントには key を指定する V-DOMはD…

React ソートしたときの key にハマる

React入門初心者マンです。 Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門作者: Stoyan Stefanov,牧野聡出版社/メーカー: オライリージャパン発売日: 2017/03/11メディア: 単行本（ソフトカバー）この商品を含むブログを見る この本…

React 切り替えた input タグに focus させたい

単純に文字列を1文字づつ追加していくだけのものですが See the Pen Text Typewriter with Javascript Promise by KIKIKI (@chaika-design) on CodePen. ※ 表示エフェクトはForkしたものですが、表示ロジックは丸っと作り直ました PromiseはsetTimeoutを繰り…

JavaScript タイプライターみたいなエフェクト作ってみた。

雰囲気で使ってたから、ちょうどいい機会だしと思い簡単に調べてみたメモ document.getElementById id名で要素を選択して取得する idは#idNameではなく、idName Elementを返す idはHTML上ではユニーク(な筈)仮にidが重複して存在している場合は最初にマッチ…

JavaScript jQueryを使わずに要素選択するやつのメモ。

Element.classList classListは配列のように扱えるDOMTokenListオブジェクト // HTML: <div id="main" class="c1 c2 c3"></div> const main = document.getElementById('main'); const classList = main.classList; console.log( classList ); // => DOMTokenList(3) ["c1", "c2", "c3", value: "c1…

JavaScript classListでクラス属性を操作するゾ

インストール # 1. ダウンロードして使う GitHub からスクリプトをダウンロードしてスクリプトタグで読み込む <script src="/path/to/js.cookie.js"></script> # 2. CDNを使う <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> # 3. NPMでインストール npm $ npm install js-cookie --save yarn $ yarn add js-cookie 読み込み import Cookies …

JavaScript クッキー操作できるjs-cookie使ってみた

こんにちは、Webpackでのbundle化初心者です。 今までgulpで分けたJSファイルをconcatして一つにまとめていました。gulpのconcatだとファイル名を01-みたいなprefixをつけて結合順をコントロールしてました。webpackだとその辺りも解決してくれるっぽいので…

Webpack 4 で Cannot assign to read only property 'exports' of object エラー

gulpでは本番環境用にconsole.logを削除するのにgulp-strip-debugした後にgulp-uglifyでminify化すれば削除できていました。 webpackで、productionモードの時だけconsole.logを削除する方法のメモ 環境 node v10.15.0 webpack v4.29.0 1. UglifyJsPlugin ug…

Webpack 4 production モードで console.log を削除したい

前回のあらすじ 直列処理 async / await 、非同期処理を順番に実行(直列処理)を簡単に書くことができます。 async function sleepSquareFunc(x) { return new Promise((resolve, reject) => { setTimeout(() => { resolve( x * x ); }, 1000); }); } async f…

JavaScript async / await で並行処理

async function は Promose を返す returnすると返される値がPromise.resolveされる throwすると値や例外がPromise.rejectされる 何も返さないと関数終了時にundefinedがreturn(resolove)される // return = Promise.resolve() async function resolveFunc()…

JavaScript 今更の async / await

node v11.4.0 fetchを使ったJavaScriptファイルをnodeの実行しようとしたらfetchなんて無いよってエラーになりました。 node.jsには現状デフォルトでFetchAPIが入っていないようです。 node-fetch を使う $ yarn add node-fetch JavaScriptファイルでnode-fe…

Node.jsでFetchAPIを使いたい

最近Compass漁ってNuxt+Firebase とかReactNative(Expo)+FirebaseとかのHands-onに色々と参加していました。 フレームワークで生成した静的ファイル(HTML+CSS+JavaScript)をFirebaseやNetlifyにデプロイすれば簡単にFirebaseと連動したWEBサービス・アプリが…

[WIP] Firebase Cloud Firestore 接続情報が漏れるとパケ死しないか気になっていたので調べてるメモ

株式会社ROLOさんが主催しているJavaScript Buildersで受けたHands-onでやったことを復習も兼ねて調べながらメモ。 1. Nuxtのプロジェクトを作成 $ npx create-nuxt-app <Project Name> $ cd <Project Name> create-nuxt-appをインストールした覚えがないのですが、npxコマンドだとそのま</project></project>…

Nuxt で Firebase を使う (Cloud Firestore & Hosthing)

簡単なESlintの設定で試してたら、acyncとfetchでエラーにったのでメモ .eslintrc { "root": true, "extends": [ "eslint:recommended" ], "env": { "es6": true, "node": true, "commonjs": true }, "parserOptions": { "sourceType": "module" }, "rules":…

ESlint acyncとFetchAPIがエラーになる