コンパイラかく語りき

import { Fun } from 'programming'

JavaScript

【React.js/JavaScript】テキストエリアの文末にフォーカスする(autofocus on textarea end)

概要 HTML の <textarea /> には autofocus という属性があり、これを指定するだけでフォーカスが効きます。 textarea - HTML: HyperText Markup Language | MDN ただし、初期状態でテキストが入力されている場合、文頭にカーソルが置かれてしまいます。 そんな時は、set</textarea>…

【echarts】複数線形チャートにて MarkArea 背景色の opacity が重なる問題(multiple markarea opacity)

問題 echarts では複数線形チャートが作れる。 参考: https://echarts.apache.org/examples/en/editor.html?c=line-stack ここで、MarkArea を利用して部分的な背景色を適用したい場合がある。以下の画像で言うところの、薄青色の部分。 参考: https://echar…

【JavaScript】Error 内容を JSON.stringify する(原因不明の空オブジェクト文字列の正体?)

概要 Error オブジェクト(のインスタンス)を JSON.stringify すると、空オブジェクトの文字列になる。 JSON.stringify(new Error('this is erorr')) // '{}' ログ監視・エラー監視などでありがち。 原因 空オブジェクトの文字列になってしまう理由としては…

【JavaScript】文字列から px 以外の数値部分だけを取り出す

なにがしかの方法で要素のスタイルを取得したはいいものの、px のついた文字列だった場合の対処。 数値部分だけを取り出すには、 parseInt が使える。 const txt = '120px' parseInt(txt, 10) // 120 もちろん、 em でも rem でも % でも同じことができる。p…

【Angular.js】ng-tempate へ複数の変数を渡す方法

いつも忘れるこの記法。 Angular.js で ng-template に複数の変数を渡したい場合の書き方。 <ng-container *ngTemplateOutlet="template; context:{ text: 'foo', item: 'bar' }"></ng-container> <ng-template #template let-text="text" let-item="item"></ng-template> ``` 参照: [Angular - NgTemplateOutlet](https://angular.io/api/common/NgTemplate…

【JavaScript】DataDog で sourcemap(ソースマップ)対応する方法

概要 DataDog で sourcemap を利用して、コンパイル前のファイルを参照させる方法を調べてみた。 DataDog の sourcemap 対応状況 DataDog は sourcemap に対応している。 参照: Make Sense of Application Issues With Datadog Error Tracking | Datadog dat…

【Mongoose】空配列を持ったドキュメントを取得する

Mongoose のドキュメント取得に関して。空配列を持ったドキュメントを取得する方法。 例えば、以下のようなデータから id: 2 のデータのみ取得する。 { id: 1, items: ['foo'] } { id: 2, items: [] } これらのデータを Data スキーマとすると、以下のように…

【Mongoose】ネストされた ref を populate する

概要 Mongoose には ref という機能がありまして、他のコレクションのドキュメントへの参照 ID を持つことができます。 ref は populate を使って解決します。 この記事では、ネストされた ref を解決する方法について書きます。 参考: Populate - mongoosej…

【Mongo】配列要素を populate/lookup した後に sort する

概要 Mongo/Mongoose で配列要素を populate した後に、要素のフィールドでソートする方法について。 コードサンプルは JavaScript で書いています。 サンプル 以下のようなデータを想定します。 // user { id: "foo" comments: ["1", "2"] // comment コレ…

Next.js v9 での TypeScript プロジェクト作成

概要 Next.js v9 で TypeScript プロジェクトを作成する方法について。 環境 このブログ記事の内容は、以下の環境をベースにしています。 OS: MacOS Mojave 10.14.6 Node.js: v10.15.0 next.js: v9.0.5 方法 Next.js アプリケーションの作成 まずは普通に Ne…

【JavaScript, VSCode, Prettier】import 文を自動改行

td;dr VSCode で Prettier の設定を行い、 import 文を自動改行する。 概要 ESLint/TSLint によって1行のコードの長さを制限することができます。 ESLint: max-len TSLin: max-line-length import 文もこの対象になりますが、auto fix が効かないので手動で…

【JavaScript】Vue.js で retweet / link リンク【Twitter】

概要 ツイートを埋め込むような web サービスを作る場合、リツイートとイイネのリンクを実装することがあるかもしれません。 そのリンク(正式名称はインテント)を Vue.js で作成する方法です。 実装 リンクの定義です。 // ツイート ID (いわゆる id_str…

【Node.js】Mongoose の upsert で、 ドキュメント作成時のみ追加するフィールド

Mongoose の upsert 便利ですよね。正しくは、upsert: true オプションですね。ドキュメントが存在しなければ作成、存在すれば更新をしてくれます。 参考: How do I update/upsert a document in Mongoose? - stackoverflow.com さてそんな upsert を行う時…

【JavaScript】Google Optimize を React アプリケーションで使う

Google Optimize を React アプリケーションで使う 概要 AB テストツールである Google Optimize を React.js で作るアプリケーションで使う。 React アプリケーション作成 簡単に React アプリケーション を作成できる create-react-app を使う。 $ npx cre…

【JavaScript】forEach と for文 における配列イテレーション差異

forEach と for文 における配列イテレーション差異 解説 JavaScript において、 forEach と for 文の違いはいくつかあると思うのですが、今回は配列イテレーションの差異について書きます。 new Array(n) のような形で配列を作成すると、empty item が初期値…

jQuery脱却の第一歩 doc-readyをつかってみる

クライアントのJSを書くとき、DOMのロードを待つ必要がある時があります。そんなとき、jQueryなら、以下のように書きますね。 $(document).ready(function() { // your code comes here... }) ただ、JSの小さなモジュールを作るためにいちいちjQueryを使うの…

Promiseチェーンの中で条件を満たすまで同じ処理を繰り返す(リトライ処理)

Promiseチェーンの中で、特定の条件を満たすまで同じ処理を繰り返したい場合があります。 例: データロード処理 そんな場合のコードサンプルです。 コード こちら。 const retryPromise = (func, delay) => { const retry = (resolve, reject) => func() .th…

今さら始めるJavaScript Promiseの基礎の基礎

最近ようやくPromiseを触り始めました。わりと雰囲気で使ってしまっているので、ここらで自分のために整理を…。 ただ、基本的な例がすでに複雑というか、初心者にとってはムズい気がするので、超噛み砕いてみました。 Promise - MDN 最小構成 Promiseオブジ…

最小構成で始めるRollup.js

最小構成で始めるRollup.js Rollup.jsについては、既に素晴らしい記事があります。 Rollupがちょうどいい感じ しかし、初心者がRollupを使い、なおかつJSのモジュールシステムに馴染みがないとすると、もっとシンプルな構成が望ましいかなと思い、この記事を…

React, Express, Webpack, Relay, GraphQLでつくるSPA

アプリケーションと呼ぶには程遠いですが、ひとまず最低限の形になったのでメモ。 From REST to GraphQLを読んだのが、直接のきっかけっちゃあきっかけ。 JSだけで、一通り作ってみようと。 注意書き 筆者は、ReactもRelayもGraphQLも初心者です。このポスト…

【JavaScript】Array.prototype.sliceとArray.prototype.spliceの違い

Arrayの標準メソッドにはsliceとspliceがあります。紛らわしいですよね。しかも挙動まで似ています。 ちょっと自分の中で違いを忘れてきてしまっていたのでメモ。 Array.prototype.slice 配列の一部をコピーします。 gist1ab3b38c61b8413eae2b4981cfc614c7 d…

【JavaScript】配列の中からペアではない単一要素を見つけるにはXOR(排他演算子)が便利

プログラミングの問題を解いていて、ベストプラクティスを発見したのでメモ。 問題 奇数個の要素を持ったInt型の配列Aが与えられる。その中からペアにはならない単一の要素を見つける。 例 A[0] = 9, A[1] = 3, A[2] = 9, A[3] = 3, A[4] = 9, A[5] = 7, A[6…

Qiitaの"俺たちはJavaScriptの非同期処理とどう付き合っていけば良いのだろうか"をやってみる

非同期周りにまだ慣れてない感じがあったので、素振りです。 こちらの記事をただただ写経しました。 qiita.com 書いたコードはこちらに。 github.com Promiseにまだまだ慣れていないなと感じたので、改めて噛み砕いてQiitaに投稿しました。 qiita.com

webpackはどのように動いているのか(1)

ずっとWebpackのソースコードを読んだり、仕組みを知りたかったのですが、時間がなくてやれずにいました。 今日からはWebpackの仕組みについて、ちょっとずつ探っていこうと思います。何度かに分けて書きますが、記事が溜まってきたらQiitaにでもまとめます…

npmパッケージ「array-flatten」

npmのパッケージを触ってみるシリーズ。 chuckwebtips.hatenablog.com chuckwebtips.hatenablog.com array-flattenとは 配列を平坦化してくれるパッケージです。 詳しくは後述の例を参照ください。 github.com インストール $ npm install array-flatten 使…

webpack上でglobを使う

webpack上でglobを使う方法について、業務で触れることがあったのでメモ。 インストール なにはともあれインストール。 $ npm init -y $ npm install webpack glob ディレクトリ構造 ディレクトリを以下のように作りました。 src/にJSファイルが格納されてい…

SourceMapとは何なのか

JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。 ってことで調べました。 SourceMapとは SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。 Json形式で記述されています。 なぜSourc…

JavaScriptでユーザーの位置情報を取得する

JavaScriptでユーザーの位置情報を取得する方法について調べた。 syncer.jp www.htmq.com 意外とカンタンにできるっぽい。 しかも、W3Cが策定に関わっているので、安心仕様。 書いたコードがこちら。 gistdbc84ee9993fca1615ff このコードを読み込んでブラウ…

JavaScriptで競技プログラミングを解く際のテンプレをつくった

これの続きです。 chuckwebtips.hatenablog.com JavaScriptで競技プログラミングを解く際の、ある程度のテンプレを作成しました。 ※ 筆者はまだ競技プログラミングを2回しか受験していません。今後テンプレには手が加えられる可能性があります。 こちらです…

JavaScriptで数値ソートする場合

JavaScriptで配列の内容をソートするとき、sort関数を使います。 ただし、sort関数はデフォルトで文字列比較を行ってしまうんですね。 数値比較をするには、引数に比較関数を渡してあげる必要があるんですね。 すっかり忘れていました。 サンプルコード gist…