先日に引き続き、今回も GSAP で実装したアニメーションをご紹介。 今回は、タイプライター風アニメーションというのか、1 文字ずつ文字が表示されるアニメーションを実装した。 TextPlugin 使い方 React での実装例 まとめ 関連する記事 TextPlugin greenso…

スクロールアニメーションを実装するにあたり、GSAP の ScrollTrigger を使うことで簡単に実装できたので、今回はその実装方法を紹介する。 GSAP とは ScrollTrigger の特徴 React での実装例 インストール 使い方 参考例 まとめ GSAP とは GSAP（GreenSock …

今回、HP 内で意図的にブラウザバックを制御して、UX を向上させられるようにしたので、実装方法を紹介する。 ブラウザバックの制御に関して 実装例 まとめ ブラウザバックの制御に関して ブラウザバックを制御するためには、セッション履歴を操作する必要が…

最近は、UIフレームワークばかりを使っていて、独自でアニメーションを実装する機会がなかったが、React で簡単なタブ切り替えのスライドイン・アウトを実装する機会があったので、React での CSS アニメーション実装に関して備忘録を残しておく。 react-tra…

今回、Excel ファイルをブラウザで読み込み、json に変換して、API で POST する処理を実装したので、備忘録として残しておく。本記事では、Excel ファイルをブラウザで読み込み、json に変換するまでのコードを紹介する。 SheetJS js-xlsx サンプルコード …

React の SPA を実装する際に、画面遷移時にローディング画面を挿入したいことがある。今回、React v16.6 から利用可能になったReact.lazy と React.Suspense を初めて使ってみたので、備忘録として残しておく。 React.lazy とは React.Suspense とは React.…

最近、Next.js をよく使っている私だが、先日の案件で SPA で S3 などを用いた静的ウェブサイトとしてホスティングしたいという話になった。よし！今回も Next.js でいくぞ！と意気込んだが、検討した結果、通常の React で React Router を使って実装するこ…

Vue.js エンジニアの React 入門。 React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。 これまでに、以下の内容についてまとめてきたので、参考にご覧ください。 概要比較 コンポーネントの実装方法 コンポーネントの親子関係 ライフサイ…

React の様々なコードを読む中で、頻繁にみる HOC に関して、整理するためにまとめを行った。 Higher-Order Component（HOC） とは ja.reactjs.org Higher Order Components はComponentのラッパーみたいなもので、よくHOCと略される 日本語に訳すると「高階…

Vue.js エンジニアの React 入門。 React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。 これまでに、以下の内容についてまとめてきたので、参考にどうぞ。 概要比較 コンポーネントの実装方法 コンポーネントの親子関係 今回は、「ライフ…

Vue.js エンジニアの React 入門。 React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。 今回は、「コンポーネントの親子関係」である。 親子間でのデータのやり取り、イベントハンドリングを確認する。 Vue.js まずは、Vue.js での実装方…

Vue.js エンジニアの React 入門。 React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。 今回は、「コンポーネントの実装方法」を紹介する。 Vue.js は HTML テンプレートであり、React は JSX で全く異なる。（ただし、React は必ず JSX …

日本・アジア圏では、Vue.jsは人気があるように観測されるが、実際にグローバルな視点でみると、Reactが圧倒的に人気・シェアがある。npmtrends.comでnpm installされている数を比較してみる。 NPM Trends: Compare NPM package downloads 数字でみても、Vue…