問題 jest + typescript で、eslintが以下のエラーを出力した。 'describe' is not defined. eslint(no-undef) typescriptだと @types/jest を入れろと言われるが、eslint ではそれだけではダメだった。 解決策 eslint-plugin-jest を入れる必要があった。 w…

本記事は英記事を勝手に翻訳したものです。 Mostafa Gaafar さんの元記事 dev.to 概要 async/await は NodeJS7.6 で導入され、現在も全てのモダンブラウザでサポートされています。私はJSにおいて2017年から１番の変更だと思っています。もしそう思われない…

概要 Vue.js で drag & drop できる UI が作りたいときどのライブラリを入れてどう作ると良いか調べたのでまとめておく。 TL/DR Vue.Draggable が一強。迷ったらこれを使っておけばよさそうではある。 ただ、だいたいのライブラリは SortableJS を使って作ら…

Java で テストカバレッジを取ろうと思い、 IntelliJ でおもむろに Run 'All Tests' with Coverage したら、こういうエラーが各テストで発生した。 java.lang.ClassFormatError: Nest-host class_info_index 85 has bad constant type in class file app/mod…

黙って max connections を増やす。 mysql -u root -p mysql> set global max_connections = 1000;

Cypress 導入の方法まとめ Cypress で E2E テストを構築したので作り方をまとめておく。 www.cypress.io Cypressのいいところはドキュメントがしっかりしててサンプルも多く書き味も悪くない。puppeteerほど柔軟ではないもののやりたいことは大抵実現できる…

概要 スタディサプリEnglishを100日（３ヶ月強）継続したところで率直な感想とレビューを書いてみようと思う。 はじめたきっかけ そもそもの英語のレベル感でいうと、TOEICは700点程度で、調子いい時には日常会話ができる程度。 教科として、英語はどちらか…

styled-componentsでpropsから値を指定する styled-components でよくこういう書き方をすることがある。 const StyledInput = styled.input` padding: 20px; width: ${({width}) => width}; `; 以下のように props から width の値を伝搬して値を指定するこ…

こんな感じ ※ 個人の感想です。

概要 AMPは何なのかなんとなくわかったけど、結局何すればいいの？というときのためのAMP化までの工程を５つの手順にまとめる。 0. 準備 まずAMP化したい記事やポストがあることが前提。 1. AMP化のおまじない AMP化するためのおまじないを書く。 htmlにAMP…

不安に感じやすい人へ 僕は何事にも不安に感じやすい人だけど、それに対してどういう考え方で行動しているかという話をしたので、ここにそのときのことを書き残しておく。 人は誰しも不安になる まず「不安」を感じない人はいない。誰しも不安を感じたことは…

概要 GAE（GCP）のDockerビルドにある時から失敗した。 エラーログ Beginning deployment of service [default]... ╔════════════════════════════════════════════════════════════╗ ╠═ Uploading 1 file to Google Cloud Storage ═╣ ╚════════════════════…

概要 2019年度版僕が興味のある大きいWeb系カンファの時期と場所まとめ。 まとめ Facebook F8 4/30 - 5/1 サンノゼ www.f8.com Google I/O 5/7-9 カリフォルニア events.google.com React Europe 5/23-24 パリ www.react-europe.org Apple WWDC 6/3-7 サンノ…

概要 webpackのbundleサイズのパフォーマンスヒントが厳しい。 244KBはさすがに厳しい。 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: index.js (449 KiB)…

概要 ちゃっとロゴを作るのに便利 logo-maker.stores.jp シンプルで良い感じ logo.squarespace.com らんらんらんちはこれ hatchful.shopify.com 使った事ないけど以下もよさそう www.777logos.com editor.freelogodesign.org

概要 nuxtでクライアント側から$axiosでAPIアクセスする際に、一番ベストなホストの設定の仕方はどうすべきなのか調べた。 nuxt-axios-module nuxt.config.js で以下のようにmoduleを設定すれば、nuxtのfetch(or asyncData)で$axiosを呼ぶことができる。この…

概要 nuxtは pages 配下で fetch メソッドを用意することで、ページを読み込む手前でページに必要なデータをfetchすることができる。 しかしページからページへの遷移では発火するが、キーワードやページ番号といったクエリが変更しても fetch は発火しない…

概要 nuxtのSSRモードで位置情報取得は行えないので、SSRを行わないようにする。 具体的には、 <no-ssr> で囲むことで該当箇所がCSRになるので、 getCurrentPosition をクライアント側で呼び出すことができる。 該当するコード <template> <div> <no-ssr> <section class="container"> ... </section> </no-ssr> </div> </template> <script> function getCurrentPosi</no-ssr>…

概要 Vue.js+Element-UIで作っていたformのinputで、Enterを押したらsubmitを発火するようにしたくて、@keyup.enter.nativeを使った。 <el-input-number v-model="value" placeholder="値" clearable size="small" style="width: 150px;" @keyup.enter.native="onEnter"> これでオーケーかと思いきや、 @keyup.enter は日本語変換でも発火してしまった。 以下の記事によると、 [Vue.js] 日本</el-input-number>…

gRPCに入門した 入門したコードは以下にある github.com 参考にしました qiita.com qiita.com 構成 ちょっとレポジトリのフォルダ構成が雑でわかりづらいですが、 フロントエンド（BFFの想定）はtypescript、バックエンドはgolangでAPIが作られることを想定…

発生した問題 vueコンポーネント(SFC)を作成し、webpack v4でproductionビルドするとstyleタグの情報が消えてしまう問題が生じた。 原因 package.jsonで sideEffects: false を定義していた。 これによりvueコンポーネントのstyleタグがtree shakingされてし…

概要 タイ・バンコクで2018-2019年の年越しをしたので、そのときにやったこと、特にやってよかったことなどをまとめておく。 基本情報 日程：2018/12/28 - 2019/01/02 渡航： NRT → BKK / BKK → HND 総計：25万円程度/人 やったこと 航空券とホテル 11/10にE…

研究室のOB会でエンジニアになろうって話をしたので、残しておく。 speakerdeck.com

概要 react/reduxのプロジェクト向けに、redux-pluto というボイラープレートを利用しているので、（redux-plutoほど多機能で考えられたものではないが）同様のnuxt版ボイラープレートを作った。 github.com 基本的な機能だけを簡単に実装しているので大した…

PS4はiPhone 6/6sのイヤホンをマイクとして使えない 年末の休みになって、ふと思い出したので書いてみる。 7月にPS4版Dead by Daylightを買って友人とやることにした。Dead by Daylightは知り合いと一緒にやるとクソ面白いのでオススメなんだけど、ここでは…

styled-componentsで子にstyleをあてたい reactの外部ライブラリを使っていたりすると、内部で階層的にDOMを生成してしまって、直接子のDOMを触れないケースがたまにある。 class名だけ指定できたりするが、styleを指定できないとき、styled-componentsのよ…

Headless chromeのpuppeteerを使ったサービスでjestのテストを動かしていたらテストには成功したのにエラーらしき文言が表示された。 Jest did not exit one second after the test run has completed. This usually means that there are asynchronous oper…

はじめに 新卒から丸４年間働いた富士通を退職し、2018年4月1日からリクルートテクノロジーズでフロントエンドエンジニアとして働いています。 最初転職してすぐにエントリを書こうかと思ったのですが、転職先でうまくいくかもわからないし、前職との違いも…

jestのtimeoutの時間を変える jestのテスト時間が長くかかってしまって、タイムアウトエラーが発生することがある。 jestだとデフォルトで5秒でタイムアウトしてしまうため、5秒以上かかるテストができない。 そこで、timeout時間を延ばす設定を書く。 jest…

puppeteerはchromiumがインストールされる github.com Note: When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API. 200MBくらい取られるので容量に余…