tsyringe による依存注入 tsyringe を使うと TypeScript アプリケーションにて依存注入を実現することができます。 GitHub - microsoft/tsyringe: Lightweight dependency injection container for JavaScript/TypeScript アプリケーションコードは以下のよ…

React のコンポーネントライブラリである AntDesign の話。 AntDesign を利用したコンポーネントに対するスナップショットテストが落ちていた。スナップショットの変更箇所は以下のような感じ。 <div class="ant-select _select_1826e5 css-dev-only-do-not-override-w8mnev ant-select-single ant-select-show-arrow"> </div>

概要 React のコンポーネントライブラリである Ant Design ant.design その Ant Design の Calendar コンポーネントにて、日本語ロケールを指定する方法。 結論 結論から書くと、以下のように指定しました。 ※アプリケーション全体から参照できるよう、共通…

React の Custom Hooks に対して、ユニットテストを書いていました。 testing framework には vitest を利用。 さらに、@testing-library/react を追加。renderHooks という関数が含まれており、Custom Hooks のテストを実行することができます。 testing-li…

概要 ネイティブアプリを開発する際に一部のページをウェブで表示する、という要件はあると思います。（いわゆるウェブビュー） その際に、ウェブビューを React.js と Next.js で作成する方法です。 ※ちなみに筆者はネイティブアプリ開発の経験はありません…

React でのアプリケーション開発にて、Recharts はメジャーなグラフライブラリの1つです。 そんな Recharts では、 style という props からスタイル指定が可能です。以下は、Y軸へのスタイル指定の例。 <YAxis // ...ここにその他の props たち style={{ fontSize: '12px', fontWeight: 300, fontFamily: 'oswald' }} /> CSS Custom Properties を利用したバージョンが以下</yaxis>…

tsParticles を利用すると、ウェブページ内に動的な演出を追加できます。 github.com 今回、 tsParticles の links というプリセットを設定しました。 github.com ところが、ドキュメントを見ても線の色を変える方法が分からない…。 ソースコードを見ていた…

React Portal を使うと、コンポーネント構造の制約を受けずに、アプリケーション内の任意の箇所に DOM を挿入することができます。 モーダルの実装などで役に立つかと思います。 ja.reactjs.org そんな React Portal ですが、Next.js の SSR/SSG を利用した…

概要 HTML の <textarea /> には autofocus という属性があり、これを指定するだけでフォーカスが効きます。 textarea - HTML: HyperText Markup Language | MDN ただし、初期状態でテキストが入力されている場合、文頭にカーソルが置かれてしまいます。 そんな時は、set</textarea>…

概要 React アプリを開発しているときに、ルーティング遷移前に確認モーダルを出したい時がある。 「このページを離脱してもいいですか？」のような。 React Router の Prompt を利用すると、簡単に確認モーダルを実装できる。 React Router: Declarative Ro…

Google Optimize を React アプリケーションで使う 概要 AB テストツールである Google Optimize を React.js で作るアプリケーションで使う。 React アプリケーション作成 簡単に React アプリケーション を作成できる create-react-app を使う。 $ npx cre…

React.js v16.6.0 にて追加された新機能を試してみました。 reactjs.org 環境づくり React.memo React.Suspense と React.lazy static contextType static getDerivedStateFromError() 環境づくり サクッと、create-react-app を利用しました。 create-react…

アプリケーションと呼ぶには程遠いですが、ひとまず最低限の形になったのでメモ。 From REST to GraphQLを読んだのが、直接のきっかけっちゃあきっかけ。 JSだけで、一通り作ってみようと。 注意書き 筆者は、ReactもRelayもGraphQLも初心者です。このポスト…

RelayでSPAを作っています。前回までで、ひとまず形には為りました。 chuckwebtips.hatenablog.com ただ、現在の状態だと１つのページしかありません。 （求人一覧が表示されている状態） 求人をクリックしたら、求人の詳細画面にうつる。みたいな処理をReac…

つくるやつ React, Webpack, Express, Relay, GraphQLあたりをつかった何か。 内容はあまり重要ではなくて、ひとまずぜんぶJSだけで作ってみたい。 ただし、以下の記事でも書かれているように、必要ないものをどんどん盛り込むのは違うと思う。 medium.com …

すみません、こちらの記事に完全にお世話になりました。 サーバーサイドReactをwebpackを使って最小構成で試す (ES6 ＆ TypeScript) - Namiking.net 以下、すべて写経のメモになります。 いつものクライアントレンダリング まずは、HTML。 gistacfad61f44971…

引き続き、Reduxのお勉強です。 chuckwebtips.hatenablog.com 今回はようやくReduxに触れます。ひとまずactionを書こうと思います。 CSS in JS with Webpack actionの前に、ちょっとだけスタイルを書きます。 今回は、HTMLではなく、JS内にスタイルを持って…

Reduxのお勉強の４日目です。と言っても、まだまだReactの復習でしかありませんが。 前回は、AppコンポーネントにひもづくSlideコンポーネントとPageコンポーネントを作成しました。 chuckwebtips.hatenablog.com 今回はスライドのデータを用意して、Pageが…

Reduxのお勉強です。 前回はすべての親要素となるAppコンポーネントを作成しました。 chuckwebtips.hatenablog.com 今回は子要素を作成したいと思います。 今回作成するものはスライドです。スライドなので、各々のページと、それを格納するスライドの親子コ…

Redux練習記録です。 前回は基本的なセットアップを行いました。 chuckwebtips.hatenablog.com 今回からは実際にReactを書いていきます。 Reactの基本となる、コンポーネントを作成します。 コンポーネントディレクトリ Reduxを利用する場合のコンポーネント…

前回までで、Reduxチュートリアルの写経が終わりました。 chuckwebtips.hatenablog.com でも、やっぱりまだ分かってなくて、というか実はReactだってまだまだ書けなくて、まとめて理解を深めるために、なんか作ります。 得意のスライドでも作ります。 今回は…

します。 手始めにQiitaのそれっぽいポストを読みます。この記事は、その勉強メモになります。 1日目 Reduxとは qiita.com 背景 Reactの登場によって、Reactに非同期とDOM操作を任せられるようになった。ただし、State（状態）の管理は開発者に委ねられてい…

どうも、chuckです。 前回は以下の記事を参考に、Rails環境にWebPackを導入してみました。 qiita.com その記事がこちら↓ chuckwebtips.hatenablog.com 前回までで、環境設定は終わったので、今回は実際にJSを書いてビルドをしてみようと思います。 モダンJav…

タグ機能ってあるじゃないですか。 イメージ的には以下のプラグインのような感じ。 Select2 - The jQuery replacement for select boxes こんな感じで、選択肢から何かを選ぶ形式。それで、ちょっと離れたところにあるDOMにも影響が出る感じ。 要は、複数のD…

前回まででReactの雰囲気をそれとなくつかむことができました。 chuckwebtips.hatenablog.com おまけにこちらの記事も読みました。 blog.masuidrive.jp 今回からは、Reactを実際に書いていこうと思います。 利用させていただいたチュートリアルがこちら。 c1…

これの続きです。 chuckwebtips.hatenablog.com 前回は、jQueryでもオブジェクトを使うことによって、状態の記述を分離できるよという話でした。 今回は、session storageを利用して、状態をある程度保存してみます。 作ったDEMOがこちら。 http://chuck0523…

もう2016年ですね。いい加減、脱jQueryしなくては。 でも、Reactってちょっと怖いですよね。 そこでとても良い記事を見つけました。 postd.cc 軽く冒頭を読んでみたところ、なかなか面白い。こんな自分でも面白いと思えました。 なので、数回に渡って噛み砕…

「試す」なんて気軽に書きましたが、まだRails初心者です。Reactに至っては、公式のチュートリアルを１度やった限りです。 果たして達成できるのでしょうか…。 参考にしたのはこちらの記事。 qiita.com いつもどおり、rails new。なにはともあれ。 $ rails n…

どうも！chuckです。 今回はフェイスブック製のJavaScriptライブラリである、React.jsについて勉強していきます。やり方として、公式のチュートリアルを消化していこうと思います。 （たぶん前に一回やったことあったような気がするけど、忘れちゃった…ｗ） …