Reactでグローバルに変数を使いたい機会ができた。
そういえば使い始めのころにNativeでグローバル変数の利用に右往左往してました。
今は大分慣れてきたので色々な方法を考えてみます。
カテゴリー: React
Next.jsのファイル構成と共通ページ設定
React.jsのSSRをしたくてNext.jsを触ってみて少しずつ理解できて来たのでちょくちょく覚書きしていきます。今回は設計や共通ページなどの大枠。
リンク先でReadmeと公式ドキュメントを載せておきますが、内容は同じなので見やすいほうを見ればいいと思います。また、有志の日本語翻訳もありますが、最初にざっと読む用に向いている気がする。
react v16.12.0 next v9.1.4Next.jsでReactサーバーサイドレンダリング
React Nativeを触っていたらWebの方も触りたくなってきた。
これまでCreate React Appを使っていましたが、SSR（Server Side Rendering）したかったのでNext.jsを使ってみます。
キャッシュ設定もしたかったのでExpress併用も考えます。
React Nativeで複数画面の共通変数管理
ReactNativeで複数画面間の共通変数を扱うことを考える。
共通の定数ならグローバルで用意して読み込めばいいけど変数は少し厄介だった。
複数画面の管理はReact Navigation、設定保存などにはAsyncStorageを使う。
React Native 0.60 Expo v34 react-navigation 3.12.0React Native, Expoでアイコンを使う
Expo Managedでアイコンを使ったり、アイコンを含めたボタンを作成します。
参考にしたリンクは以下。
- Expo：ドキュメント、GitHub
- React Native：ドキュメント&GitHub
- アイコン一覧
React Native, ExpoでドラムロールUI入力
モーダルを出さずにくるくる回して設定するUIをExpoで使いたい。
マザー2の影響かドラムロールUIって言ってしまいますが、一般的にはwheelらしいです。spinnerって言ってるのもありましたが、これは他にも色んな意味を指しすぎなので使いにくい（ローディング、時計など円状のUI、数値入力の横の▲▼など）。
React Native, Expoで端末内の画像取得と保存
画像系のアプリを作ろうと思ったら、端末の画像を読み取ったり保存したい。
出来たらExpoで完結したいので色々方法を調べてみた。
制限に沿わない場合はワークフロー見つつBareに切り替えることも考える。
React Native 0.60 Expo v34React Native, Expoを使ってみる
javascriptでメタタグの作成と編集
HTMLヘッダ内のメタタグ（<meta name="" content="">）を編集（ない場合は作成も）をするスクリプトを書いてみました。
以前にOGPなどの外部表示設定を確認したのでスクリプトで動的に変えてみたかったのが理由です。
ただツイッターなどのサービスではOGPのためのアクセスでスクリプト実行までしてなさそうなので、サーバーサイドで書き換える必要があります。
なので今回のスクリプトはnode.js向け、あるいはタイトルのみの編集向けです。
ReactでDataTablesを使う
Reactアプリ内でjQueryプラグインのDataTables.jsを使うためのメモ。
ReactとjQueryはあまり相性が良くないので$は最低限使うだけです。
合わせて使う方法からコンポーネント化まで。