かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

javascript

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

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

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

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

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

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

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

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

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

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

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

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 クッキー操作できるjs-cookie使ってみた

インストール # 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 …

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

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

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

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

JavaScript async / await で並行処理

前回のあらすじ 直列処理 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()…

Node.jsでFetchAPIを使いたい

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

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

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

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

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

ESlint acyncとFetchAPIがエラーになる

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

Ajax (XHR) まわりいろいろ試してみた。

jQueryの$.ajax, XMLHttpRequest, FetchAPI, axios, superagentを簡単に試してみた

Fetch API 試してみた。

恥ずかしながらFetchAPIたるものがあるのを知らなかったので、ざっくり試してみた。 Fetch API Service Workersでも使えて、プレーンなJavaScriptのXMLHttpRequestより強力で柔軟な操作ができるそうです。 GET fetch(api_url, {method: 'GET'}) .then((res) …

APIのモックアップに便利なjson-server使ってみた。

フロントエンドの制作とかで使えるAPIのモックアップにjson-serverってのが便利だよーって教えてもらったので使ってみた。 インストール $ yarn add -D json-server デフォルトのデータを作成 db.json { "articles": [ {"id": 1, "title": "json-server", "a…

PHP / JavaScript ファイル生成してDLさせたいけどmax_input_varsにかかってしまう問題にパワープレイで立ち向かった話

PHP製の管理ツールで、CSVを生成してDLするシステムを作っていました。 データ量が多いとエラーになるということで調べたら、PHPのmax_input_varsにかかって居るのが原因でした。 そして、使っているサーバーがhetemlでmax_input_varsの上限を変えることが出…

JavaScript Blobオブジェクトでファイルを作成してダウンロードしてみる

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support f…

HTMLでES moduleをつかうメモ

ES2015で、scriptタグモのtyoeで指定できるモードにmoduleが追加されたようです。 script:グローバル名前空間を必要とする標準的なスクリプトのためのもの module:明示的なインポートとエクスポートを必要とする、モジュール化されたコードのためのもの sc…

node.js モジュール(ES Module)のimport/exportにハマる。

node.jsでimport/exportで試そうとしてハマったのでメモ。 $ node -v v11.4.0 import / export を使っているファイルの拡張子は.mjsでないとエラー // moduleA.js export const hi = (name) => `Hi ${name}. `; // main.js import {hi} from './moduleA.js';…

JavaScript (ES2015) 同じ名前のモジュールをインポートしたい

webpackを調べていた時にwebpackのメリットとして 各モジュールを閉じたスコープにしてまとめてくれるので、モジュール名や変数名が被るのを気にする必要がなくなる というのがありました。 で、同じモジュール名だったりした時、インポートする側はどうする…

今更の webpack 4 導入とbabel使うところまでのメモ。

3年ほど山ごもりをしていて、浦島太郎状態なので、その間に進んだフロント周りのキャッチアップを ちょっとづつ進めています。 今回はwebpackについて、フリーな個人制作が多くgulpで何とかなるしと秘伝のタレ使いまわしていたのですが、JavaScriptのモジュ…

IoT初心者がobnizと戯れてみて、"簡単に"とは何かについて考えてみたメモ。

これはobniz Advent Calendar 201812日目の記事です。 はじめまして。 IoTデバイスを触ったり、回路作ったり自体が初めてのド素人です。 obnizのハンズオンに参加してJavaScriptSDKを使って"簡単に"LEDを光らせたりモーターを動かしたりができたので、調子に…

JavaScript 該当する文字を全部変換したいメモ

例えば次のようなテキストを "藤堂ユリカ\n一ノ瀬かえで\n神崎美月" "藤堂ユリカ 一ノ瀬かえで 神崎美月" のように置き換えたい時 JavaScriptにはreplaceAllのようなメソッドがないので、 const str = "藤堂ユリカ\n一ノ瀬かえで\n神崎美月"; str.replace("…

HTML 本当は怖い target="_blank" 。rel="noopener" ってなに?

WordPressの投稿で別ウィンドウで開くリンクtarget="_blank"を作成すると、 <a href="{URL}" target="_blank" rel="noopener">LINK TEXT</a> のようなrel="noopener"属性を持ったaタグが出力されます。 rel="noopener" の意味 1. target="_blank" のセキュリティ上の脆弱性の問題を避ける Without this, the new …

今更のバベる。 Babel 7を試してみたメモ

BabelやWebpackとかを業務で使う機会がなくて、なんとなくな感じだったので自分の手動かして設定しながら試してみました。Babel 7になっていて検索で出てくる情報だとうまく行かなかったり試行錯誤したのでメモ。 Babelとは babel + webpack の構成で合わせ…

JavaScript (ES2015) 今更のPromise (3) 非同期処理を順番に実行するチョットマニアックなメモ

前回までのあらすじ 非同期処理を平行に実行する場合はPromise.allやPromise.raceを使えばよいのですが、非同期処理で受け取った値を使って次の処理を行いたいなど順番(同期的)に実行したい場合のメモ Promise~thenでのメソッドチェーン たぶん一番正当なや…

JavaScript (ES2015) 今更のPromise (2) Promiseが返された後の処理のメモ

前回のあらすじ 通常のPromiseを返す関数で明示的にresolve()、reject()をreturnしてないと関数の終わりまで実行されるのでは?と思い調べてみました。 明示的に resolve/reject がreturnされていない場合 function myFunc(a, b = 0) { return new Promise((…