はじめに 昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。 本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。 JSConf JP 2019 とは JSConf JP は世界的な JavaScript Conference である JSConf の…

Chrome Dev Summit 2019 とは Chrome Dev Summit is an annual conference where developers can learn about the latest tools and updates coming to the Google Chrome browser. Chrome Dev Summit は、開発者がGoogle Chrome ブラウザに関する最新のツー…

Nihonbashi.js で登壇した AMP 開発のつらみを発表した。 そのときのスライド。 speakerdeck.com

GCP の Cloud Function は誰でも呼び出せる GCP の Cloud Function で HTTP 関数を作成すると、デフォルトでは誰でもアクセスできてしまう。 （9/25現在。今後変わるらしい。） アクセス制限をつける 自身のアカウントに cloudfunctions/admin 権限がついて…

Next.js で AMP ページを作る Next.js では簡単に AMP ページを開発することができる。 Next.js v8 での方法 withAmp の HoC が用意されているので、関数でコンポーネントをはさみこむ。 import { withAmp } from ‘next/amp’ function Home() { return <p>Welco</p>…

AMP Validator のChrome 拡張 Chrome 拡張で AMP validator が提供されている。 chrome.google.com 閲覧しているページに AMP 版のページがあるかわかったり、 開発している AMP ページが AMP-valid かどうか判断できる。 しかし、リクエストが多発する... n…

ValidationError: CSS Loader Invalid Options nuxt を v2.9 にあげようとしたら css-loader の validation error が出てしまった。 ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& Module build failed (from ./node_modu…

Next.js + AMP + typescript + styled-components ( + storybook)でやったことと気をつけること Next.jsでAMP化するときは、 pagesのコンポーネントに対して、nextAmpでwithAmpをimportし、withAmpで囲う。 import { withAmp, useAmp } from "next/amp"; wit…

問題 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…