Reactのグローバル変数を管理する

Reactでグローバルに変数を使いたい機会ができた。

そういえば使い始めのころにNativeでグローバル変数の利用に右往左往してました。

今は大分慣れてきたので色々な方法を考えてみます。

続きを読む Reactのグローバル変数を管理する

Next.jsのファイル構成と共通ページ設定

React.jsのSSRをしたくてNext.jsを触ってみて少しずつ理解できて来たのでちょくちょく覚書きしていきます。今回は設計や共通ページなどの大枠。

リンク先でReadmeと公式ドキュメントを載せておきますが、内容は同じなので見やすいほうを見ればいいと思います。また、有志の日本語翻訳もありますが、最初にざっと読む用に向いている気がする。

react v16.12.0 next v9.1.4

続きを読む Next.jsのファイル構成と共通ページ設定

Next.jsでReactサーバーサイドレンダリング

React Nativeを触っていたらWebの方も触りたくなってきた。

これまでCreate React Appを使っていましたが、SSR(Server Side Rendering)したかったのでNext.jsを使ってみます。

キャッシュ設定もしたかったのでExpress併用も考えます。

続きを読む Next.jsでReactサーバーサイドレンダリング

React Nativeで複数画面の共通変数管理

ReactNativeで複数画面間の共通変数を扱うことを考える。

共通の定数ならグローバルで用意して読み込めばいいけど変数は少し厄介だった。

複数画面の管理はReact Navigation、設定保存などにはAsyncStorageを使う。

React Native 0.60 Expo v34 react-navigation 3.12.0

続きを読む React Nativeで複数画面の共通変数管理

React Native, Expoでアイコンを使う

Expo Managedでアイコンを使ったり、アイコンを含めたボタンを作成します。

参考にしたリンクは以下。

React Native 0.60 Expo v34

続きを読む React Native, Expoでアイコンを使う

React Native, ExpoでドラムロールUI入力

モーダルを出さずにくるくる回して設定するUIをExpoで使いたい。

マザー2の影響かドラムロールUIって言ってしまいますが、一般的にはwheelらしいです。spinnerって言ってるのもありましたが、これは他にも色んな意味を指しすぎなので使いにくい(ローディング、時計など円状のUI、数値入力の横の▲▼など)。

続きを読む React Native, ExpoでドラムロールUI入力

React Native, Expoで端末内の画像取得と保存

画像系のアプリを作ろうと思ったら、端末の画像を読み取ったり保存したい。

出来たらExpoで完結したいので色々方法を調べてみた。

制限に沿わない場合はワークフロー見つつBareに切り替えることも考える。

React Native 0.60 Expo v34

続きを読む React Native, Expoで端末内の画像取得と保存

React Native, Expoを使ってみる

React Nativeを使ってアンドロイドのテストアプリを作ってみます。

ネイティブな部分は後回しにするとしてExpoを使って簡単に。

続きを読む React Native, Expoを使ってみる

javascriptでメタタグの作成と編集

HTMLヘッダ内のメタタグ(<meta name="" content="">)を編集(ない場合は作成も)をするスクリプトを書いてみました。

以前にOGPなどの外部表示設定を確認したのでスクリプトで動的に変えてみたかったのが理由です。

ただツイッターなどのサービスではOGPのためのアクセスでスクリプト実行までしてなさそうなので、サーバーサイドで書き換える必要があります。

なので今回のスクリプトはnode.js向け、あるいはタイトルのみの編集向けです。

続きを読む javascriptでメタタグの作成と編集

ReactでDataTablesを使う

Reactアプリ内でjQueryプラグインのDataTables.jsを使うためのメモ。

ReactとjQueryはあまり相性が良くないので$は最低限使うだけです。

合わせて使う方法からコンポーネント化まで。

続きを読む ReactでDataTablesを使う