技術メモ

プログラミングとか電子工作とか

Javascript

create-react-appで作成したプロジェクトのテスト

React周辺は周りの誰にも聞けないし本当に手探りで色々やってます。 いいかげんフロントでもテストを導入しないと意味不明になってきたので、まずはReact自体のテストを学習します。 基本的にはJest公式などを参考にしながら進めています。 環境構築 プロジ…

Next.js+TypeScript+CSS Modulesの環境でStorybookを使う

去年の10月に同じような記事を書いた気がするんですが、もううまく動かなくなってました。 元々フロントは専門外なのでちょくちょくしか触らないのですが、なかなかに辛い・・・ と思ってたのも1日。やはり世界には優秀な方々がたくさんいるようで、既に解決…

YouTubeのSuperChatをGoogle Spredsheetに読み込む(SuperChatEvents: list使用編)

YouTube Live Streaming API(YouTube Data API v3)を利用してスーパーチャット情報をGoogle Spredsheetに出力してみました。 が、結論から言えば実用性が無かったので供養エントリです。なんでダメだったか知りたい人など対象です。 (あとOAuthの勉強の題…

Storybookでwebpackの設定に手を加えずにCSS Moduleを適応する

※2021-02-10 追記、下記の方法や他の方法でStorybook上でCSS Moduleがうまくあたらないので、今後はstyled-componentsの採用を検討しています。 そのうちまたこの方法でうまくいくようになるかも知れないので残しておきますが、現段階ではうまくいきませんで…

Next.js (+TypeScript) の初期構築(@2020-09-25)

去年にNext.jsの学習をしていたのですが、Amplifyとの相性が悪くて(Cognitoの認証周りでたいへん苦労した)使うのを辞めていました。 ただ、久しぶりに色々調べてみると、どうやら公式ドキュメントにもNext.js用のチュートリアルがあるみたいなのでちょっと…

AWS LambdaをTypeScriptで開発する

JavaScriptはオワコン!とまでは言いたくないんですが、やはり普段からTypeScriptを利用していると極力JavaScriptは避けたいところ。 ということで基本JavaScriptで開発されているであろうAWS LambdaのNode環境ですが、TypeScriptで開発を始めるまでをまとめ…

React Hook Form入門 その2(基本編)

前回の続きです。 基本的な使い方 フォームの要素を書き出す フィールドを登録する 非同期処理 バリデーションを適応する UIライブラリの利用 対応するUIライブラリを利用する Controllerを利用してカスタム登録処理をする TypeScriptの対応 基本的な使い方 …

React Hook Form入門 その1(導入編)

去年はNuxt.jsやNext.jsなど色々触ってたんですが、結局プレーンなReactが扱いやすいんじゃないかと思い色々試行錯誤しています。(Nextは結構良い感じだったんですが、Amplifyとの相性が悪くて不採用となりました) 基本的にはReact + Reduxの組み合わせが…

Nuxt.jsが2.9になってからTypeScriptの対応が変わったようです。

どうも、靖宗です。 一生環境構築してる気がします。フロントもう嫌や・・・ ということでTypeScriptの対応がなにやら変わった?ようなので公式に沿ってセットアップしてみます。 Nuxtプロジェクトのセットアップ ここに関してはいつも通りです。 よければ以…

Nuxt.jsでTypeScriptが使いたいので、ESLintをいじる

靖宗です。 前回ESLintを設定したんですが、できればコレからはTypeScript(以下TS)を積極的に利用していきたいと考えています。 なので、TSにあった.eslintrcにしていきます。 Nuxt.jsのプロジェクトのセットアップ 別の記事を参照されたし。 パッケージの…

Nuxt.jsでいっつもやるやつ(初期の環境構築)

どうも、靖宗です。 最近Nuxt.js(Vue.js)をさわり始めたのですが、フロントよわよわ界隈としてはなかなか良さげです。 (React.js触ってる人も両方やるとより理解度が高まるかも?という動機で触ってました) 毎回機能を作り込むまでは同じなので、自分用…

Nuxt.jsでESLint(Prettier)が使いたいけどよくわかんなくなったのでまとめた

こんにちは、靖宗です。 特にチームでのJavaScript案件はやってないんですが、チームじゃなくてもESLintを導入するべきなんじゃないかと感じ、導入してみることにしました。 とはいえよくわかんないので記事にしながら学習します。 とりあえず今回はTypeScri…

ReactをTypeScriptで使うときに調べたこと

Reactで コンポーネント.propTypes = { propNum: PropTypes.number, }; とか書くのがとてもだるい気がしたので、TypeScriptを勉強しておりました。そこでふと「Reactコンポーネントの継承はどうすんだ?」と思い調べて見ると良さげな記事がhttps://qiita.com…

アロー演算子覚え書き

material-uiのサンプルコード見てた時にアロー関数が意味不明になって調べた handleChange = name => event => { this.setState({ [name]: event.target.value, }); }; アローが二重?ふざけてる。 そもそも括弧省略していいのか。知らなかった。 なので (na…