umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法

投稿者: Anonymous React.js を用いて Web サイトを開発しています。 モジュール形式で提供されていない、<script> タグで読みこんでグローバルオブジェクト(window)に追加されたオブジェクトを利用するタイプの外部スクリプトを、React.js でうまく扱う方法についての質問です。 たとえば、決済代行業者 PAY.JP が提供する payjp.js はまさにそのパターンで、素の HTML の場合は以下のようにして利用できます: <!– 外部スクリプトのロード –> <script src=”https://js.pay.jp/v2/pay.js”></script> <!– ロードしたスクリプトを用いて各種処理を実行 –> <script> // スクリプトによってグローバル空間に定義された `Payjp` を用いる const payjp = Payjp(‘API キー’) payjp.foo() // 何らかの処理 </script> こういった外部スクリプトを React.js で扱う場合、以下のような問題点があると考えます: <script> を書く位置を気を付けないと、コンポーネントのライフサイクルの中でスクリプトが二重にロードされることがある グローバル空間にロードが完了したタイミングを動的に検知する必要がある 1 については、コンポーネントではなくテンプレート HTML 側に <script> を記述したり、Next.js のようなテンプレートがないフレームワークでは Layout コンポーネントの中で <script> を記述することで、何とかなると思っています。…(Continue Reading)

Next.jsのgetStaticPaths内でParamsを参照できますでしょうか

投稿者: Anonymous 最近Next.jsを個人で触り始め、現在Next.js Ver9.3.5でネストした動的ルーティングを実装しようとしています。 やりたいこと やりたいことは /tokyo/shinjuku/ のようなページでの getStaticPathsの動的な実装です。 フォルダ構造は以下のようです。 [prefecture_name_e]/index.jsでは動的である必要がなかったため[prefecture_name_e]/[city_name_e]/index.jsで getStaticPathsの動的な実装を行おうとしています。 $ tree pages/ pages/ ├── [prefecture_name_e] │ ├── [city_name_e] │ │ └── index.js │ └── index.js ├── _app.js └── index.js 実現のためやってみたこと [prefecture_name_e]/[city_name_e]/index.js ファイルにて getStaticPathsの実装を以下のようにやろうとしました。 getStaticProps({ params })と同じようにParamsを使ってみました。 export async function getStaticPaths({params}) { // その都道府県の市区町村一覧を取得します const res = await fetch(`${process.env.apiHost}/prefectures/${params.prefecture_name_e}/cities`) const json = await…(Continue Reading)

React.jsでコメントアウトができずアロー関数を使った表示ができない

投稿者: Anonymous React.jsでアロー関数を使って表記リストを表示しようとしています。 参考書『React.js & Next.js超入門』に掲載されていたプログラムで Webでサンプルコードのダウンロードができるようなのですが、zipファイルの解凍でエラーが出て見れない状態です。 問題 ①React.js部分は、Javaスクリプトなので、以下の記事を参考にすると{// }のコメントアウトが使えるはずですが、実行中のコードではコメントとして認識されません。 参考記事: React JSX コメントを書きたい! – かもメモ ② Webブラウザでは以下のように表示されるはずですが、現行のコードを実行したところ「wait…」と表示されます。 ブラウザの更新やGoogleChrome以外でも、確認しましたが表示が変わりません。 <div id =”root”>wait…</div>の部分のデフォルトのままということでしょうか。 表示したいもの React Google *Googleの検索サイトです [※Googleに移動][3 http://google.com] 現在表示されるもの React wait… ③Reactの表記について ダブルクォート” “とシングルクォート’ ‘の使い分けが、以下のコードではcolor: ‘white’,以下がシングルになっているのですが、どのような決まりなのでしょうか。 ここはCSSでしょうか。 const dfn = { fontSize: “20pt”, padding: “10px”, } const dt = { fontSize: “16pt”, color: ‘white’, backgroundColor:…(Continue Reading)