しぐれ煮ログしぐれ煮ログコンビニでバイトしてます。トップ記事一覧ログ一覧2019-06-01最新のサービスが見つかる「LITFIRE」を開発しました!6月1日に公開しました。https://litfire.jphttps://twitter.com/babelrc/status/1130786347608727552個人開発も含めて新しいサービスが見つかる・投稿できる場所が欲しいなと思いつくりました。ログインしなくてもURLだけで誰でも簡単に投稿できるようになっています。自分のものである必要もありません、見つけたサービスをぜひ投稿してください。LITFIREは二匹で開発しました。開発期間は二日ほどです。それから、三週間ほど何人かのユーザにテストしてもらいました。コンテンツも200以上に増えました。RTしてくれた人たちは感謝です。Webアプリの中身WebページはTypeScriptとcreate-react-appで開発しています。依存する主なモジュールたちです。}Material-UIMaterial-UIというUIコンポーネントライブラリを使用しています。最高のライブラリです。framework例えば、Cardの右上にあるタップすると回転するボタンは以下のように定義してます。memo(IconButtonExpand)これのことです。useMediaQuery@material-ui/coreのuseMediaQueryという関数を使用しています。コンポーネント内でブレイクポイントを扱うことができます。Material-UIデスクトップで2カラムなのでモバイルとではコンポーネントを切り替える必要がありました。}モバイルではCardの並びを変えています。Themes@material-ui/stylesのStylesProviderおよびThemeProviderを用いてライブラリのコンポーネントのデフォルトのPropsを定義できます。Material-UI何度も同じPropsを定義する必要が無くなり可読性が高くなるかな思います。}ちなみにwindow.themeのようにしておくと開発中にWebインスペクタから内容確認できます。gridを用いています。})RxFireRxFireというライブラリを使用しています。frameworks例えば、以下のような関数を定義してReactコンポーネント内で呼び出しています。}この関数はProductをリアルタイムデータを取得するものです。Observableはunsubscribeできるのでコンポーネントが破棄された後にuseStateの関数が呼び出されて壊れるのを防ぐことができます。functionを使用しています。アプリから関数を呼び出す以下はプロダクトを作成する関数ですが、引数と戻り値を型定義するのが安全です。Functionsと共有します。Routerreact-router-domを用いてルーティングを実装しています。React.jsパスが切り替わるごとにGoogleAnalyticsにデータを送信できるようにしています。}また、ルーティングをネストさせるようにしてしています。RouteProductIndexは以下のように定義されています。APIに頼ることになりますが、スクロール位置のリセットを防ぐ工夫が必要です。Restoration賢い方法ではないですが、useStateの初期値を復元してローディングを表示するのを防いでいます。0)window.scrollToSPAでは新しいページに遷移した際に、スクロール位置を一番上に戻してあげる必要があります。window.scrollTouseEffectを用いて必要な時だけ呼び出すようにしてください。(何かをタップするたびに上にスクロールされたらイライラすると思います。}例えば、以下のような関数が定義できます。APIを使用しています。概要URLからリサイズしたURLを生成する関数を定義しておくのがいいです。/>例えば、このように定義できます。}headindex.htmlは以下のように定義しています。GoogleBotに正しい情報を読み取ってもらう為には、コンポーネントが呼び出された際にこの値が変わるようにしなければいけません。</head>以下のようなReactコンポーネントを定義しておくといいです。memo(Head)さいごにLITFIREの開発に関する内容を開発会議というサービスに投稿しました。LITFIREを紹介する記事をCrieitというサービスに投稿しました。