ひびのログ

日々ではないけどログを出力していくブログ

JavaScript

【資料公開】TypeScript の社内勉強会を開催しました!

タイトルどおりなのですが、TypeScript の社内勉強会を開催しました! 勉強会で使用した資料 https://gitpitch.com/tee-talog/try-typescript 今回は GitPitch を利用してスライドを作成しました。 簡単にスライドが作れるので、それほどデザインにこだわら…

既存プロジェクトに Prettier を導入したけど、コードレビューが辛すぎる件(ラノベタイトル風)

お気持ち表明(いわゆるポエム)です。 前置き 現在関わっている JavaScript プロジェクトには Prettier が入っていません。 また、ESLint は入っていますが(Standard)、--fix をしていない状況です。 そして、Vue.js を利用してしますが、eslint-plugin-v…

ESLint が一部設定されている JS + Vue.js プロジェクトに Prettier を導入しようとしてハマった

TL;DR eslint-plugin-vue を導入してから Prettier を入れないと、変な風にフォーマットされることがあるよ。 TL;DR 背景 Prettier を導入したい! 導入方法 1. Prettier を実行してから ESLint を実行 2. ESLint と同時に Prettier を実行 地獄 どうしてこ…

勇なま:マップを作った

現時点のソースはこちら github.com 進捗どうですか マップを表示して、カーソル移動をできるようにした。押しっぱなしも OK。 アローキーと WASD でカーソル移動。G で初期位置に戻る。 今後負荷がかかりそうなので、軽減のためにマップは表示されていると…

勇者のくせになまいきだ。を再現してみたかった

記事リンク まだないよ。 リポジトリ github.com 導入 皆様は「勇者のくせになまいきだ。(略して勇なま)」をご存じでしょうか? 一言で表すと、神ゲー です。 思い出補正がかかっている可能性は否めないですが、モンスターを増やして勇者を倒すという、簡…

Vue.js でアクセシビリティを考慮したダイアログのフォーカス移動を考えてみた

UI フレームワーク等ではすでに対応しているかもしれませんが、自分でも作ってみました。 リポジトリ github.com src/App.vue : 親コンポーネント src/components/MyDialog.vue : ダイアログ本体 サンプル https://tee-talog.github.io/vue-dialog-focus/ 背…

YouTube でモデレーターや指定ユーザー名のチャットを強調する Chrome 拡張機能作りました

YouTube でモデレーターや指定ユーザー名のチャットを強調する Chrome 拡張機能作りました

【未解決】Nuxt.js を 2 にアップグレードしたかったけど断念した話

だめだったやり方 前準備 参考:Release v2.0.0 · nuxt/nuxt.js · GitHub まずは .nuxt node_modules yarn.lock package.lock.json を削除 node >= 10、npm >= 5 が推奨なので、それぞれアップデート。 nodist を利用しているので、 $ nodist 10.15.1 10.15.…

Cypress で立ち上がるブラウザの設定をリセットする

テストが起動しなくなった! Cypress のテストを実行しようとしたところ、下記の画面が出てテストが実行できなくなりました。 理由は明確で、Cypress で起動するブラウザの設定をリセットしたからです。 エラー画面 Whoops, we can't run your tests. This b…

APIキーの最適な読み込み方法を考える

Qiita に「APIのトークンをコードに書いている人へ」という記事が上がっていたので、実際APIキーとかをどういう風に読み込むのが良さげなのかなーと考えてみた。 言語依存のコマンドラインツール等を使用する JavaScript ならnode-env-fileとかdotenvとか? …

ECMAScript2019 に入りそうな構文メモ

執筆時点で、Stage3 のものをピックアップします。 タイトルは「ES2019に入りそう」となっていますが、本当に入るかは保証しません。 策定中の機能はどんなんがあるのかなーというのをちらっと調べたメモ書きです。 リポジトリは以下です。 github.com Funct…

わかモナ ~わかる!数式が出てこないモナドへの入り口~

数年前から関数型プログラミングが流行り始めて、やってみよう! という人もいらっしゃるかと思います。なにを隠そう、私がその口です。 そして Lisp や Haskell なんかに手を出した時、「モナド」という言葉が出てくるかもしれません。 知らないことは調べ…

TypeScript で動的にメソッドを追加する

JavaScriptでは、prototypeに適当に代入してあげればメソッドやプロパティの追加ができますが、 型という楽園を手に入れた TypeScript では簡単にはできません。 でもどうにかこうにかやる方法があったので、ググって色々試した結果を載せておきます。 ちな…

たった3分で、初心者が Travis CI を導入する!

最近(前から?)「テストが重要」とか「CI」とかよく聞くけど、導入するの大変そう…… と思っている、そこのあなた! いえ、たった「3分」で導入できちゃいます。 モダンな開発環境には欠かせない CI を、簡単にサクッと導入してみましょう! 3分でできる対…

Redux(っぽいもの)を見よう見まねで実装してみた

React + Redux しか触っていなかった私が、Vanilla JS 用で簡単ではありますが、自分でReduxを作りました。

Slack bot をBotkitで作成してみる!

BotkitでSlackのbotを動かします。まずはHello World。そしてちょっと踏み込んだ内容。

npm パッケージ作成奮闘録 ~Browserify を添えて~

先日作成した npm パッケージについて、所感等まとめておこうと思います。 npm パッケージ作りました 詳しくはこちらの Qiita のページを参照してください。 qiita.com 内容としては、「insertAdjacentHTML」を使いやすくしよう! ということで作成しました…

OSSのライセンスについて今一度考える

ReactがMITライセンスになりました 9/26にReactのv16.0がリリースされ、MITにリライセンスされました。 以前のような追加の文面もなく、正式なOSSとして使用できます。 github.com ただし今回の件で、大きな企業が作っている≒安心して使用できるOSSでも、 開…

じゃらんの検索結果からプラン詳細を別タブで開くJavaScript

タイトルのとおりです。 動機 じゃらんから予約しようとして、プラン詳細を別タブで開こうと思ったときに、どうやっても同じタブで開かれてしまって「うがああああああ!!!!」と声を上げるのも今日まで。 ある雨の日、ある風の日。 そして今日。 悲しみと…