著者アーカイブ asaba

asaba 著者:asaba

【react】BrowserRouterを使って実機でビルドすると画面が描画されない件

今開発中のReactでreact-router-domライブラリのBrowser-routerでこけました。

どのような現象かというと、npm startで起動するとコンポーネントがちゃんと描画されるのですが、yarn run buildでビルドしてから

cordova run android(browser)で反映させてた時に真っ白になります。しかもログにエラー扱いで表示されないので解決するのに時間が

かかってしまいました。

解決方法はというと、まず下記のスクショを見てください。

importでHasuRouterを定義した後に、<BrowserRouter>で<switch>タグで囲んだ遷移のリストを囲んでいるのが分かります。

本来はこれを使って<switch>タグで<Route>タグのpathと一致した場合にそのページに遷移するというベーシックな

画面遷移ですが、実機だとうまく描画してくれなかったです。

どうしようかなと思いネットを漁っていたら見つかりました解決方法が見つかりました。(リンク先は忘れてしまいました、すみません。。)

v4に移行した後は、<HushRouter>で囲むとsuccessするよー!みたいなことが書いてあったことは覚えています。

とりあえず下記の画像のようにタグ名を変えてビルドー>無事コンポーネント描画され大成功!!です。

ものすごくざっくりですが、v3で慣れていた方はこれに限らず色々と書き方が変わっていたのでv4マイナーチェンジぶりにいらいらするかもしれないですね。

詳細をうまく伝えられなかったのは残念ですが、もう少しreactに詳しくなった後に説明したいと思います。

 

 

asaba 著者:asaba

【iosアプリ】これで必勝!?危険物乙四過去問アプリ

App storeを漁っていたら危険物乙四免許過去問のアプリが・・・

試しに見てみました。

中身は、結構簡略に作られており、冊子のような分厚くて持っていくのも面倒ではないのでカフェとかで勉強するにはよさそうですね。

広告が頻繁にでてきますが、質は間違いなく良いので試してみる価値はあると思います。

P.S.筆者が受けたときにこんなのがほしかったです。

asaba 著者:asaba

【create-react】Cannot read property ‘thisCompilation’ of undefined npm ERR!

npm install –save-dev webpackで最新のwebpackをインストールしてnpm run webpackしたところで

Cannot read property ‘thisCompilation’ of undefined npm ERR! というエラー出現

npmのバージョンとインストールしたwebpackのバージョンに開きがあったのが原因でした。

なので、一旦ダウンロードした新しいwebpackをnpm remove webpackでアンインストールして

一回り古い@3.11.0をインストールして解決。同じことではまっている方は今使っているnpmのバージョンを確認してみてください。

それでは!

 

asaba 著者:asaba

【create-react】入力した文字を出力する方法

またまたcreate-reactについてです。今回は、テキストボックスに入力した値を画面上に出力する方法です。

reactは、通常親コンポーネントから子コンポーネントに渡した値をthis.stateで更新しますが、render()内に書き込んでも値を更新することができます。

初級ですがreactを触ったばかりという方の力になれたらなと思います。

いきなりですが、まずconstractorで初期値”james”を定義します。その後にpropで子コンポーネントに渡しています。

その後に自由に値を入力することができるコードがこちらです。

スクショのようにonchangeでイベントを定義することで、name: e.target.valueでnameの中身jamesに続く値をsetstateで更新することができます。

アプリのログイン時にパスワードを入力するときに●が後追って表示されるけどあんな感じに使われるのかな?

イメージしやすいので簡単ですね。今日もこんな感じで少ないですが少しずつ情報を増やしてアウトプットしていきたいと思います。

reactは画面遷移の手段が面倒だったりes5とes6の書き方で大きく変わったりと最初のうちは手がかかりますが、決まり事を守って書いていけばプログラミング歴の浅い方でもクオリティの高いアプリを作ることができそうです。

良いUIフレームワークも揃っているので、こちらもぜひともマスターして使いこなしたいですね、それでは!

asaba 著者:asaba

【cordova react】Invariant Violation: You should not use Route> or withRouter() outside a Router>

reactのチュートリアル中にハマりました。

 

チュートリアル中せっかくなのでアプリを画面遷移させるところまで試してみようと思い、index.jsとMyComponentをコーディングしてyarn run buildでビルド。

そしたら下のエラーに遭遇。


<span style="color: #ff0000;">Invariant Violation: You should not use Route> or withRouter() outside a Router>
</span>

訳すと、ルーターの外でwithRRouterを使ってはいけません。です。

export default withRouter(MyComponent)ってスコープ内だっけと思いましたがそんな訳ないよなと思いスタックオーバーフローへ。

するとありました。解決方法と原因。めっちゃシンプルでした。↓

https://stackoverflow.com/questions/47314541/you-should-not-use-route-or-withrouter-outside-a-router-when-using-react-route

 

 

<BrowserRouter></BrowserRouter>を定義していない・・・だと・・・

 

 

考えてみたらコンポーネントを上記のタグで囲まない限りいつまでも場外扱いですよね。

Routerを使いたいのにRouterを定義していないならそりゃ使えないよねと(汗)反省して下記のようにindex.jsを編集しました。

画面遷移はreact-routerの使い方を理解すれば大丈夫そう。筆者もここにきてようやくstateとpropなどのライフサイクルが分かってきたので、複数のコンポーネントで値を渡していじれるようになれば少しは楽に開発できるかなと感じました。

長いですが頑張て行きたいと思います。

 

 

 

 

asaba 著者:asaba

【iosアプリ】jsAnywhereでどこでもプログラミング

手軽にプログラミングができるjsAnywhereというアプリをダウンロードしてみました。

このアプリの特徴は、名前の通りいつでもどこでもプログラムを書くことができ、JS、CSS、HTML別にプログラムを見ることが出来ます。

背景色やフォントも変えることが出来る点は従来のエディタと変わらないですね。持ち込みができるエディタと考えたほうがいいかもしれません。

プログラムかけてもデバッグできないのかーと思ったらブラウザ上でしっかり行うことができました。設定画面で設定できます。

facebookやdropboxとも連携できるので、自分の作ったプログラムをsnsにアウトプットして共有することもできます。

最近ではスマホでもプログラミングができるツールが増えてきたのですが、自分は現在javascriptを使っているのでたまたまこのアプリを見つけて紹介させていただきました。

スマホでプログラミングをしたいと思ったとき、ちょっとしたtipsを見つけたときにはいいのではないでしょうか。

asaba 著者:asaba

【cordova】unable to load platformAPIでブラウザが開けなかった時の解決法

今回は再びコルドバの話題に戻ります。

先日cordovaを7.0.1から8.0.0にアップデートした時のことです。

直後にブラウザで動きを試したいと思い、いつものようにコマンドでnpm run serveでブラウザを実行したところ、下記のエラーが出現しました。

コルドバのバージョンをcordova.jsやモジュールにも認識させないといけなかったみたいです。

browserのplatformを入れ直したところ一発で解決しました。

一旦rmで消して↓


cordova platform rm browser

addで追加します


cordova platform add browser

ちなみに他のplatformを消す必要はないのでそこは大丈夫です。

一応このエラーの解決はしましたが、以前chromeで開けてたアプリがIEで表示されるようになってしまいました。原因は調査中です。

解決方法が見つかり次第このブログに書いていきたいと思います。

 

 

asaba 著者:asaba

【Cordova&react】cpコマンドが使えないときの対処法

reactを使ったcordovaアプリの開発環境を作っている時の話です。

reactのチュートリアルで開発環境を作っていて、config.xmlを違うフォルダにコピーする必要があったので

コマンドプロンプトでcp tutorial-cordova/config.xml tutorial/でコピーをしようとしたところ、おなじみのエラーが出ました。

ディレクトリのパスが間違っている若しくは環境変数にパスが設定されていないので実行できないよというエラーです。

しかし、筆者はどちらも正規の手順で設定済みで特に間違いはありませんでした。解決方法が分からないので、仕方なくcpコマンドを使わずにそのままコピーをしました。手動です。

このconfig.xmlを

このtutorialフォルダにコピーします。↓

考えてみたらただコピーするだけのコマンドなので手で直接コピーしてしまっても何の支障もなかったのです。

環境変数の設定ミスなどがなければ、これでも全然コピーできるので同じエラーで悩んでいる方はやってみてください。

 

 

 

asaba 著者:asaba

【javascript】特定の配列の値を削除する方法

少し前にjavascriptで配列の操作について勉強しました。実用性はあまりないですが、今回はそのためになったことを備忘録に残します。

配列の値を削除したいと思ったときにsplice()という関数の使い方を覚えました。下の例に沿って説明します。


<script>
var i = 0;

var arr = [85, 78, 92, 62, 69];

for(i=0;i<5;i++){

console.log(arr);

arr.splice(0, 1);

}
</script

コードを見ると、arr[]で5つの値を設定して配列文だけ出力しています。

その後にsplice()を使っていますが、引数を二つ取っています。一つ目の引数で、何番目の値を、二つ目の引数で削除する数を示しています。

つまり、0番目の値「85」を一つ消すという意味になります。

for文で5回回しているので、回を追うごとに値は減っていき最終的には値がない配列が出力されることになります。

使い方は分かるのですが、やはり実用性があまりないです。なのでこのページを見た方は配列の勉強程度に思っていただくと幸いです。

 

 

asaba 著者:asaba

【iosアプリ】夕ご飯が決まっていない、そんな時の強い味方 --今日の晩ご飯ーー

夕ご飯の計画が決まってない、自分で決めるのが億劫という方に向いてるアプリを見つけました。

名前そのままですが、「今日の晩御飯」というアプリです。

このアプリは、真ん中の押すというボタンを押すだけで、ランダムに料理名を出してくれます。画像ではエビフライとでています。(気に入らなければもう一度押してください)

で、料理名そのままの状態でレシピというボタンを押すと、なんとAPIを叩いてクックパッドのページに飛んでレシピを教えてくれます。

作ったことないなーとか余計な心配は一切しなくていいのでこれは助かります・・・!

更に、外食ボタンを押すと、googleに飛んで近くの店名(ここではジョイフルです)を教えてくれます。素晴らしすぎる・・・

友達や家族と何を食べるか意見が分かれた場合とかこのアプリを使えば盛り上がること間違いなしだと思います。

独身でも迷いを打ち消してくれるたのもしいアプリだと思います。

以上、優柔不断をスパっと打ち消してくれるアプリでした。短めですが今日はこれで終わります。

P.S.地元を離れてしばらく外食andスーパーのお惣菜ばかりだったので、もう少し早く出会いたかったです。