Next.js + TypeScript のプロジェクトで相対パス辛いなとなったので、そのエイリアスの設定方法 import { SomeComponent } from '@/components/SomeComponent みたいなやつです Next.js での path alias with absolute imports の example があります https://github.com/zeit/next.js/tree/master/examples/with-absolute-imports const path = require('path') module.exports = { webpack(config, options) { config.resolve.alias['@'] = path.join(__dirname, 'src') return conf

Next.jsでimportのaliasを貼る時に、自分がハマったのでその時に解決した方法を解説していきます。 手順だけ知りたい人は手順から読んでください。 この記事で解説する手順はTypeScriptを利用している時に綺麗にできる方法です。 TypeScriptなんて使ってないぞと言う人は下の背景とまとめだけ読んでいただければいい方法が見つかるかもしれません。 背景 TypeScriptを導入したプロジェクトでは~にsrcディレクトリなどのaliasを貼るのにいろいろな場所にコンフィグを書かなければいけません。 多くの記事で紹介されているのはtsconfig.jsonとwebpack.config.jsに設定を記述してeslint-import-resolver-webpackを使って解決する方法です。 それぞれのファイルでは以下のように記述します。

import clsx from 'clsx'; // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' // Objects clsx({ foo:true, bar:false, baz:isTrue() }); //=> 'foo baz' // Objects (variadic) clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' }); //=> 'foo --foobar' // Arrays clsx(['foo', 0, false, 'bar']); //=> 'foo bar' // Arrays (variadic) clsx(['foo'], ['', 0, false, 'bar'], [['baz

async/awaitを使ったコードのエラーハンドリングのもやもや es6で導入されたasync/await、皆さん使われていますか？ かつてのコールバック地獄から始まり、Promiseを経てこのasync/awaitが使えるようになったことで、非同期処理はとてもシンプルに書けるようになりました。 しかしこのasync/awaitですが、特にexpressなどを使ったサーバーサイドで書いている時にエラーハンドリングどうしたら良いか困ったりした経験はないでしょうか？ 内部的にはPromiseが使われているので、要はPromiseのエラーハンドリングと同じなのですが、僕は当初もやもやしていました。 もやもやその1： catchした後も実行が止まらない… 例えば下記みたいなコードを書いた経験がある方もいるのでは？ 私も最初書きましたｗ const getItem = async(req, res

はじめに アプリなんかで「最初は匿名認証で、後からアカウント登録してもらう」と言う手順を踏みたい場合があったりする。 公式さんではこのように説明される。 匿名ユーザーがアプリへ登録した後、新しいアカウントの下で引き続き従来の作業を行えるようにしなければならない場合があります。たとえば、アプリへの登録前にユーザーがショッピング カートに追加したアイテムを、新しいアカウントのショッピング カートにも入れておく、といったケースです。ステップは次のとおりです。 匿名アカウントを永久アカウントに変換する 僕の場合はアカウント登録のハードルを下げたかったから、この方法を使おうと考えた。 多くの人にとっては 新規アプリダウンロード→アカウント登録が必要→「めんどくせ〜。即アンインストール！」 と言った感じで、ノリでダウンロードしたアプリは中々使用してもらえないw そして僕が運営しているアプリ「〇活カレン

まえがき 別記事でaws-sam-initを導入して、サーバーレスアプリケーションの開発を便利に進めることができるようになったが、やはりサーバーレスならDBとしてはDynamoDBが相性が良く、組み合わせて使いたい。 とはいえ、RDBのOracleDBやPostgreSQLと違って、DynamoDBってAWS固有のプロダクトだからローカルで試せないよね・・・どうせ安いし本物のDynamoDB使っても良いけど、なんだかなぁ・・・開発だし・・・ はい。天下のAWSさんはローカルで動かせるDynamoDBちゃんを公開してくれています。是非、使わせてもらいましょう。 ※追記: 2020年のAWS DevDayにてDynamoDBに関する講演を行う機会がありました。貴重な機会を頂きありがとうございました。 その際にDynamoDB Localについても言及しています。参考程度に併せてご覧ください。

この記事の概要 Next.js + TypeScriptのプロジェクトにJestを導入する手順を解説した記事です。 対象読者 Next.jsを触った事がある人 TypeScriptの基礎的な知識がある人 Jestについて基礎的な知識がある人 この記事を書こうと思った動機 最近Next.jsで個人開発を始めました。 Next.jsはReactベースのフレームワークです。 Reactの create-react-app に似たcreate next-appというコマンドがあります。（プロジェクトのテンプレートを自動生成するツールです） ただしReactの create-react-app と違ってテスト実行環境は用意されていません。 そこでJESTを導入する手順を残しておきます。 実行環境 Node.js 14.15.3 Next.js 11.1.2 React 17.0.2 具体的な手順とゴ

最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で

この記事には、サンプルへのリンクを掲載しておりますが、OS側の設定などで『スクロールバーを非表示』などにしていると、何言ってんだこいつってなると思います。 Macの方は [システム環境設定]-[一般]からスクロールバーを表示するようにしてから読むとわかりやすいと思います。 Windowsは標準で出てると思います。自信ないですけど。 本記事のサンプルです。適宜ご参照ください。 http://codepen.io/naru0504/pen/dYpLJg ※ styleタグとか使っているのはQiita上で動くと勘違いしていたからです。いやだってKobito上で適応されていたんですもん……。公開してから知ったんですもの……。書きなおすのがめんどうでそのままにしてあります。 スクロールバーを消してほしいという要望があった。 今回の記事では以下のような例を扱います。あるエリアに固定されていて、スクロー

※本記事で言う「Vim」とは「Vimキーマップ」のことです。 Vim、使ってますか？ Vimって使ったことのない人からすると何がいいのかよくわからないですよね。特に「移動はhjklで行う」あたりが最高に意味不明でした。 私もつい最近まではなんで皆vimにこだわるんだと思っていた口です。別に無くてもいいじゃないかと。 しかし、物は試しということで1週間ほど使ってみたら……びっくりするほど手に馴染みました。 まだ2か月程度しかVimを使っていない小学生ですが、それでも以前と変わらない速度で編集できています。また、マウスやカーソルキーに手を伸ばす機会が減り、他のマウス必須な操作をキーボードで行えるようにカスタマイズするきっかけにもなりました。 そんなわけでVimが思ったより良かったこと、そしてVim入門にはVSCodeが向いているんじゃないかと感じたことから、何番煎じかわからないですがこの記事を

伝えたいこと javascriptを触っていて嫌でも触らないといけないPromiseオブジェクトの返し方でreturn new Promise()とreturn Promise.resolve()の使い分け方法。 結論から言うと再帰関数を使用する際に明確な違いが生まれる。 以下コードと少し解説です。 const correct = 1 const generateRand = (digit) => { return Math.floor(Math.random() * digit) } const getCorrect = () => { return new Promise(resolve => { const delayTime = generateRand(1000) console.log(`delayTime: ${delayTime}ms`) setTimeout(() =>

==> default: Available bridged network interfaces: 1) en0: Wi-Fi (AirPort) 2) en1: Thunderbolt 1 3) en2: Thunderbolt 2 4) bridge0 5) p2p0 6) awdl0 ==> default: When choosing an interface, it is usually the one that is ==> default: being used to connect to the internet. default: Which interface should the network bridge to? 1 vagrant ssh eth0 Link encap:Ethernet HWaddr 08:00:27:C9:39:9E inet addr:1

Async functionを使うとポーリングがループで書けて便利だったので共有します。 下記のようにサーバーサイドでバックグラウンド処理が完了したら次の画面に遷移する、というような状況で、waitって関数でポーリングすると想定してください。 startBackgroundProcessing(); wait().then(() => { moveToNextScreen(); }); const sleep = (n) => new Promise(resolve => setTimeout(resolve, n)); const isProcessing = async (id) => { const {processed} = await new Promise((resolve, reject) => $.ajax({ type: 'GET', url: '/api/v1/some

背景 ある workflow から別の workflow を起動したくなることありますよね。 最近では circleci がようやく workflow（circleciではworkflowも含む概念としてpipelineといいますが） を起動するAPI v2がGAになりました。 Github Actions では repository dispatch event API を利用することで、任意の actions を実行できるようになりますのでご紹介します。 repository dispatch event とは から作成できます。 以下の2つのパラメータを指定することができます。 event_type 必須 client_payload 任意のjsonを指定できます こんな感じで手元から試すことができます $ curl -vv \ -H "Authorization: token ${

言いだしっぺの法則により、Advent Calendarのトップバッターになってしまったので、Web開発で便利なTipsを紹介したいと思います。 概要 ~/.ssh/config にサーバーごとの接続設定を書いておくと、ssh コマンドや scp コマンドを実行するたびにいちいち引数を指定する必要がなくなり、幸せになれます。 初級編 ユーザー名やポート番号の指定 通常、ログインユーザーとは異なるユーザーや、22番以外のポートを使ってSSH接続する場合は、次のようにコマンドライン引数で指定してあげる必要があります。

🎄メリークリスマスイブ!🎄 この記事は、React-Spring1というアニメーションのライブラリを紹介する NTTテクノクロス Advent Calendar 2019 の24日目の記事です。23日目は@yuitomoさんの記事、明日25日最終日は@korodroidさんの記事です。 2019年、令和初の年末も押しせまってまいりましたが、みなさん如何おすごしでしょうか? NTTテクノクロスの上原と申します。React/Gatsbyを用いた社内キュレーションサイトの構築や運用などを担当しています。当社では上記含め、SPAの開発にReactが採用されるケースも比較的多く、社外ブログにReactVRの記事を書いたり、去年のアドベントカレンダーイベントではGatsbyの記事「Reactベース静的サイトジェネレータGatsbyの真の力をお見せします」を書いたりしております。 はじめに Webサ

最初に こんにちは、jackです。 実は先日社内講習会にて、「Alfredによる業務効率化」という発表をしたところ思いの外反響があったので、それを記事にしてしまおうということで書いていきます。 タイトルにもある「完全版」という名の通りこの記事は、まだAlfredを知らない方から、聞いたことあるって方、使ってはいるけどの使いこなせてない人まで、これさえ見れば誰でもAlfredマスターになれる方法を紹介していきます。 また、私の思う最強の使い方もいくつか紹介できればなと思います。 目次 Alfredとは インストール方法 基本機能 App Launcher ファイル検索 Alfredがすごいのはここから ブックマーク検索 システム操作 おすすめ！ Powerpack(有料版)のすごさ Powerpackライセンスの種類 Clipboard History Snippets Workflows

GatsbyでSPAをつくろうとすると Gatsby.jsは「爆速サイト生成」として有名な静的サイトジェネレータで、ブログなどの作成管理などで注目されています。 また、その性能からSPAの作成にも有効だと書かれている情報サイト多くあります。 しかし、実際にSPAを作ろうとすると、SPA特有の設定などが必要になります。日本語での制作例や設定例などはまだ少なく、まとめサイトのようなものも見つけにくい状況です。 ここでは、実際に作ってみて分かった、最低限必要な設定などをまとめました。 試行環境 ソフトウェア バージョン

Typescriptでreduxのmiddlewareを書こうと思ったら型がよくわからなくなったので、覚書。 この書き方だと古いのかうまく行かなかったので。 結論 reduxのindex.d.tsを読めばわかることなのですが... import { Middleware, MiddlewareAPI, Dispatch, AnyAction } from 'redux'; export const timerMiddleware: Middleware = <S extends AppStore>({ getState }: MiddlewareAPI<Dispatch, S>) => (next: Dispatch<AnyAction>) => (action: any): any => { /* middlewareの処理 */ return next(action); };

小ネタです。 AxiosはBearer認証がめんどくさい axios でAPIを呼ぶときの認証にBearerトークンを指定する場合、下のような書き方をすると思いますが、 axios.get('https://api.example.com/api/v1/foo', { headers: { Authorization: `Bearer ${token}`, } })