nikumaro2’s blog

webエンジニアです。HTML、CSS、Javascript、React.jsの開発についてまとめます。また、初心者英語TOEIC350点。音楽(ベース)、ゴルフなどもたまに、、

javaScript

【ReactNative expo】スマホアプリを公開するまでにしたこと

スマホアプリを初リリースしました。リリースまでにしたことなどまとめたいと思います。 リリースまで 2、3時間を週5日×3ヶ月くらいでリリースしたので、大体100時間ちょっとくらいでリリースできた気がします。 Reactを本格的に使いのが初めてだったの…

複数のasync awaitを呼ぶときの注意点

async await処理で、ハマったので備忘録としてメモしておきます。 以下のように連続でA()、B()を呼び出して処理をする。 function() { A(); B(); } A()、B()では、関数の最初にasync awaitで同じ処理をする。 A = async () => { let { status } = await Perm…

react-native-mapsに重畳(overlay)する際にレイアウトが崩れる問題

react-native-mapsで、マップの上にボタンを重畳しようとして、ずっとレイアウトが崩れてしまう問題があったが、 重畳したい要素にflexを指定していたのが原因でした。 以下のように、closing tagにして、styleにabsoluteを指定することで解決しました。 ren…

【React Native】react-navigationの導入 (expo)

React Nativeプロジェクトにreact-navigationを導入しようとしたら、手こずったので、備忘録として。 今回は、expoを使う場合なので注意。 react-navigationを導入するには、以下をインストールする必要があるが、それぞれのバージョンが対応していないと、…

【React】Reactプロジェクトで、個人的に使いたいライブラリまとめ

Reactで使いやすいライブラリを調べていたので、備忘録としてまとめます。 全体的に、学習コストが低く簡単にコードが書けそうなものを選んでいます。 レイアウト emotion CSS-in-JSとして、学習コストが低く、簡単に使える emotion – フレームワークに依存…

【React】unstatedとunstated-nextの違い

reactでの状態管理について、Reduxが有名だが、以下の問題点がある。 * 学習コストが高い * コード量が増えてしまう * 大規模で堅牢なシステム構築などには向いているが、react-nativeなどを使う場面は、開発スピードが求められる場合が多いと考えられるので…

【HTML × CSS ×  JavaScriptの関係性】Visual Studio Codeを使ったHellow world

HTMLとCSSとjavascriptの関係性についてまとめる。 以下のコードをコピペして、実行してみると上の関係性が理解できると思います。 最初に まず空のフォルダを作成 以下のようなファルダを作成する。各ファイルは空のファイルで良いので拡張子は以下のように…

【React】Electron で開発中(webpackでビルド) __dirnameでフォルダパスが取れない問題

Electron と Reactでwebpackでbabelしていたら、__dirnameでフォルダのパスが取得できるはずが、'/'になってしまっていた。 以下のようにwebpackで指定したら、無事に取得できました。 node: { __dirname: false } 以下、参考に __dirname returns '/' when …

【node.js】Reactを使うメリット

Virtual DOMでパフォーマンス向上 通常は、HTMLのDOMを書き換ると、DOM全体を書き換える。しかし、Virtual DOMのおかげで、一部だけを差分更新することで、画面更新速度が高速になる。 また、Virtual DOMはReactを使ってDOMを書き換えるだけで、適応されるの…

【node.js】electronでpython-shell require できない

main.jsで以下のようにしたらrequireできた。セキュリティ的にあまりよくないらしいが、、、 webPreferences: { nodeIntegration: true } 以下、参考に nikumaro2.hatenablog.com

【Electorn】require できない (require is not defined)

Electron 5以降から、nodeIntegrationのデフォルトがtrueからfalseに変更になったらしい。 falseだとrequireができない。 main.jsで以下のように変更することでrequireが使用できるようになる app.on('ready', () => { mainWindow = new BrowserWindow({ web…

【React初心者】React + Electron + VSCodeでデバックまでのHello World

ElectronとReactでアプリケーションを作成する際に、vscodeでブレークポイントを張ってデバックできるまでに結構手こずったので備忘録として。 環境 windows10 node.js:ver10.15.1 Visual Studio Code :ver1.36.0 最初に まず空のフォルダを作成(React_Ele…