ReactアプリをTypescriptで環境構築する
はじめに
私は業務で主にReactを使用しているのですが、Javascriptで書いています。でも「Typescriptで書きたいよね？」という話になりまして、導入方法を調べたわけです。
アプリの作成
npx create-react-app [アプリ名] --typescript
npxならば常に最新のものが使用できるから公式では推奨しているようです。
確かに、ローカルにあるcreate-react-appだと古いバージョンで作成してしまう可能性もありますし、updateをするのも面倒ですもんね、納得です。最新版に発生する不具合とかもあるけど、とりあえず考えないでおきましょう！
アプリの実行
アプリを作成したら、とりあえず実行します。編集はその次です。
Typescriptで作成しても、実行方法は変わらないようです。
cd [アプリ名] npm start
すると以下のような画面が表示されました。
Javascriptで作った時とちょっと画面違いますね。青じゃなくて青緑ベースになっています。それともバージョンが変わったからでしょうか？（面倒なので確認しません。）
ソースを編集してみる
「コンパイルとかで面倒だったら嫌だなー」と思いつつ、とりあえずApp.tsx（App.tsじゃなかった！！）を編集してみます。
そして保存すると、なんとすぐに画面更新されました。ありがたいことです。
次やりたいこと
作成されたソースコードを見てみると、やはりJavascriptの時とはちょっと違う箇所がちらほら...そのあたりをもう少し追ってみたいと思います。
React Native実行時にCould not find "iPhone X" simulatorというエラーが出た
はじめに
iOS13がリリースされたから？されるから？Xcodeを更新したらすんなりとは動いてくれなくなりました。
ググってみると、node_modules以下のファイルを書き換えるとかあるんですが、あんまそういうことしたくない。 と、いうか、以前は動いていたので原因違うんでは？と思ったわけです。
エラー発生
react-native run-ios
↑これを実行すると
info Found Xcode workspace "SampleApp.xcworkspace" error Could not find "iPhone X" simulator. Run CLI with --verbose flag for more details.
「iPhone X」のエミュレータが見つからないお！！とか言いやがるんです。
「えー、うっそぉ〜」とか思ってXcodeを起動してみて、ターゲットの箇所からエミュレータのリスト見てみると、確かにいない。最新の11とかはいますけども、XsもいるのにXはいない。
デバイスを追加してあげる
エミュレータのアイコンからメニューを出して、Device > Manage Devices... を選択します。（図1）
あとは表示されたポップアップからiPhone Xを追加してやればOKです。うん、そうだねそりゃ見つからないよって言いたくなるよね。ていうかXcodeお前今まで使ってたデバイスをリストから勝手に消すのやめーや。
おまけ
ちなみに実機だと別のエラーが出たりしたのですが、それはまた後日調べてみます。忘れなければ。
Vue.jsを試してみる
CLIのインストール
$ npm install -g @vue/cli
プロジェクトの作成
今回はすでにディレクトリを作成していたので、以下のコマンドを実行しました。
$ vue create .
すると以下のようなログに。
Vue CLI v3.11.0 ? Generate project in current directory? (Y/n)
yと入力してエンターキー。
Vue CLI v3.11.0 ? Please pick a preset: ❯ default (babel, eslint) Manually select features
これはデフォルトでよいのでそのままエンター。
実行
アプリの作成が終わったら、npm run serveで実行してみます。
編集してみる
コードは載せないけど、新しい.vueファイルを作成して、importして使用してみました。
ReactとかAngularはコードを変更するとすぐ画面が白くなってリロードかかるのにVueはそれが全然来ない。「おっっっっそ！！！！」って思ってしまいました...。
構築方法がよろしくなかったのですかね？？ちょっとしたツールでも作ろうかと思ったんですが、開発にストレスを感じそうだったので不採用ですかね〜。
ReactでReduxを使ってみる
関わっているプロジェクトで使われていたりするんですけど、導入をしたことがなくて。既に導入されているからActionだけ新しく書けばOK〜、ってパターンが多いのです。
でもそれだと、自分だけでなんか作る時困っちゃうので、導入手順も把握しておきたいなと。
いざ導入調べてみると、「いろいろあって手順がよくわかんないよ！！！」なーんてことがよくあるので、自分用にまとめておきます。
インストール
とりあえず必要なパッケージをインストールします。
npm install --save redux npm install --save react-redux
導入してみる
では早速導入！
まず、srcディレクトリの直下にreducer.jsを作成します。
const initialState = {
name: 'ピヨちゃん'
}
const reducer = (state = initialState, action) => {
switch(action.type) {
case 'SET_NAME':
return {
...state
type: action.type,
name: action.name
};
default:
return state;
}
}
export default reducer;
次に、index.jsでRedux関連のモジュールをインポートします。必要な箇所以外は省略していますが、Create React App CLIを使用していればだいたい同じかと思います。
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
...<< 省略 >>...
const store = createStore(reducer);
export default store;
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
はい、これでstoreの設置は終わりました。アクセスはできますが、変更はまだできません。
では、変更できるようなActionを作成します。srcの直下にaction.jsというファイルを作成します。
export const setUserName = (name) => {
return {
type: 'SET_NAME', // typeは先ほどreducer.jsで設定したtypeと同じものにします
name: name
}
}
次は、ストアを変更したい時...この場合nameというものを変更したいので、Actionとして作成したsetUserNameを呼び出します。
...
import store from './index';
import { setUserName } from './action';
...<<省略>>...
changeName = ( ) => {
store.dispatch(setUserName('おんぷくん'));
}
...
store.dispatch()の中で呼び出すという点に注意です。私はよく忘れて「あれ...ストアの更新ができていない...？」ってことになります。
ちゃんと書き換わっているのか、手っ取り早くログで確認してみましょう。先ほどのstore.dispatch()の1行後とかでよいかと思います。
console.log(store.getState());
これでストアのnameがピヨちゃんからおんぷくんに変わったことが確認できるかと思います。
typeがSET_NAMEに、nameがおんぷくんになっていればOKです。
まとめ
では手順をもう一度おさらいしてみます。
- 必要パッケージをインストール
- reducerを作る
- actionを作る
- actionを呼ぶ
あとはもっと応用的なことができればいいのですが、結構ハードル高いですね...
Vue Native触ってみた
きっかけ
普段お仕事なんかではReact Nativeを使っているのですが、たまには違うもの触りたいって思いまして。
Native Scriptってのもあるんですけど、調べてみたらなんか実機ないとデバッグがめんどくさいのかな...？って感じがしたのでやめました。
Vue.jsは4年くらい前にほんの少し触った程度なんですが、まぁいけるんではないかと、謎の自信があってVue Nativeを試すことにしてみました。当たって砕けろです！！
導入
CLIのインストール
よくあるCLIをまずはインストールするぜ！！ってことで以下のコマンド実行します。
npm install -g vue-native-cli
プロジェクトの作成
vue-native init VueApp
すると「ホーム画面に表示するアプリ名何にする？＾＾」なんて聞かれるわけですが、こういうの大体日本語入力するとターミナルが大変なことになるのでとりあえずSampleとでも入力します。多分後で変更できると思うので。
プロジェクトの実行
ターミナルにも表示されている以下のコマンドを実行します。
cd VueApp npm start
するとReact NativeのExpoでみたような画面がブラウザで起動します。
とりあえずiOSエミュレーターで起動...ってエラーになってしまいました。
エミュレーター自動で起動してくれないんでしょうか...
仕方ないので手動でエミュレーター起動して、もう一度実行したら成功しました。
...うん、すごく見覚えある。
それで、実行されたアプリがこちら。
開発サイクルとしてはReact Nativeのような感じでしょうか？？
次回
実際のコードをいじってみたいですね。次回があるのか怪しいですけども。
ここまで読んでくださってありがとうございました。
カービィカフェに行ってきたよ
はじめに
カービィカフェに行ってきましたよ！！いぇい。
ブログ自体は最近始めたので記事はないんですけど、実は3回目だったりします。メニューかわいいからね、何度も行きたくなっちゃうよね。
そもそもカービィカフェってなんで期間限定なんですかね...予約開始日毎回サーバー落ちてるしそれほど需要あるのだから恒常施設になってもいいと思うのですが...
でも期間限定だからこそみんな殺到するというのもあるんでしょうね。うーん、難しいですね。
それはさておき、食べたもの紹介～！
マキシムトマトの完全回復プレート
ギリギリまでメタナイトのフォンダンショコラと悩んだ（前回食べたらすごく好みだった）んですけど、「プレート欲しいなーせっかくだから新しいメニュー食べたいなー」ってことでこちらを注文しました。
こちらのメニューの特徴と言えば、やはりトマトを使用している点ですね！普通のカフェにトマトスイーツなんてあまりないじゃないですか。
で、どこにトマトが使用されているのかというと、チーズケーキの上にかかっているトマトジャムと、マキシムトマトカップの中のトマトシャーベットです。
チーズケーキにトマトジャムって斬新...！というか普通にミニトマトも乗っかってましたからね。うーんいいですね！！
で、気になるトマトジャムのお味ですが、トマトの酸味というよりは甘味のほうが前面に出ている感じです。とても甘いケチャップです。ようするにおいしい。チーズケーキに合いますね！！
トマトシャーベットも同様に甘味があっておいしかったです。で、これの回りの白いやつって実はヨーグルトなのですが、この二つの相性がばっちりでした。まぁヨーグルトのほうが強かった感じはしますが。難点があるとすれば、シャーベットを最初に取るのが大変ということでしょうか...ヨーグルトの海に沈むんですよね、ずぶずぶと。もしかして最初は混ぜ混ぜするのがよかったのでしょうか？
カービィのうきうきマシュマロ・オ・レ
飲み物はこちら、カービィちゃんのマシュマロがのったドリンクです。私が行ったときはカービィちゃんのお誕生日フェアとかで限定のチョコレートオ・レがあったのですが、いちごオ・レが飲みたかったのでいちごにしました。
マシュマロは２種類から選べて、カービィちゃんのお顔 or おしりです。お顔はもちろんすごく、すごーーーくかわいいんですけど、ここはおしりにしました。ドリンクの海に頭から突っ込んでいるカービィちゃんむちゃくちゃかわいいじゃないですか。ぷかぷか浮いてるカービィちゃんもとてもかわいくてギルティなんですけどね、とりあえずおしりです。えぇ、おしりぽよぽよしたかったんです。
こちらコースターもついてきます。ワドちゃん柄でした。
いちごオ・レのは、よくある普通のいちごオ・レかなーって思ってたらいちごの果肉らしきものが入ってました。あとはゼリーらしき何か？？ちょっとよくわからないですけど、おいしかったです。ただ今回アイスを頼んでしまって、ホットにすればよかったかなーってちょっと後悔してます。お店に入ったとき暑かったんです...。
感想
今回もとても楽しめました！カービィカフェ最高！！
さて、あと何回行けるでしょうかね。とはいえ「絶対食べたい！」というメニューは食べられているのでご縁があったらまた行きたいと思います。
でもまた延長決まってましたよね。となるとまたプレートが変わるとか新メニューとか...？悩ましいです。冷製パスタとかきてしまったら予約頑張らないと...。夏メニューとなるとかき氷とか、アイスクリームなんかもありえそうですね。メニューのビジュアル含め、とても楽しみです。
シャニライのセットリストイベントを初めて走った感想
きっかけ
「プレゼントボックスにLPがめっちゃ貯まってるし、推しのUR1枚くらい完凸させたいし、ちょっと走ってみるかー！！」
そんなことをとあるセットリストイベント開始前に思ったのですよ。
というのも、他にプレイしている某役者育成ゲームでも最高レアリティの推しの入手には2回は成功しているし、「なんとかなるのでは？」という見込みがあったのです。
必要ポイントの調査
とりあえず思いつきで走り始めたものの、過去のデータは大事ですよね。私にとっては初のイベント疾走ですし、いまいちゴールも見えていません。というわけで調べてみました。
URを完凸させるには、ランキングで1000位以上になればいいそうです。なるほど。ではその過去のボーダーラインを調べてみましょう。
前回のイベントのボーダーがおよそ1500000ポイントというデータがありました。記録してくれた人、ありがとう。なるほど、いち、じゅう、ひゃく、せん、まん、じゅうまん、ひゃくまん...え？ひゃくまん？？？
な、なるほど...なかなか大変そうです...。
ざっくりと色々計算してみる
私のデッキは、普段あんまり撮影とかもしないものですから、URとかあんまり揃ってないわけで、そんなに強いデッキではないんですよ。しかも私自身PROを回す実力はないのでHARDでプレイするしかありません。
そして、「デッキ編成するのめんどくさーい」という怠け者なので、デッキはおまかせでいきます。
すると、得られるポイントが大体以下のようになります。ただし記録時はフルコンではなかったり、GREAT判定があったりと、ものすごく前後があります。
| 項目 | ポイント |
|---|---|
| 1曲目 | 440 |
| 2曲目 | 550 |
| 3曲目 | 590 |
| 4曲目 | 630 |
| 5曲目 | 710 |
| 6曲目 | 770 |
| 7曲目 | 840 |
上記の表から、HARDを1週すると得られるポイントは、およそ4500です。あと7曲クリアで+400されて、ミッションクリアでいくらかもらえるので、だいたい5000ってことですかね。
必要なポイントは1500000なので、1500000 ÷ 5000 = 300、つまり300周するということですね。
7曲なので、1曲2分と仮定すると...1周するのに15分くらいですかね。15 × 300 = 4500、よって4500分必要です。4500分は時間にすると、えーっと...4500 ÷ 60 = 75なので、75時間ですかね？
うーん、すでにエグいですねぇ。イベント期間はおよそ1週間ですが、仕事や学校が8時間、睡眠時間を8時間、残りの時間は8時間。ですがその残りに会社や学校の移動時間、他に食事やお風呂などの時間も含まれるので、完全に自由な時間を4時間とすると、4 × 7 = 28となり、全然時間足りませんね。
というわけで、走る人は3倍ブーストを惜しみなく使いましょう。1週間それなりに時間かけられるよ！って人は1倍でもいいかもしれないですが、たぶん精神的にきつくなってくると思います。クリアボーナスが惜しいかもしれませんがきついなって感じたら3倍です。きっと救われます。
そして肝心な必要なLPですが、えーっと、HARDは1曲に20LPなので、先ほどの300周と合わせて、7 × 20 × 300 = 42000となり、42000LPが必要です。うわぁ...
ちなみに、40LPが5プリズムです。と、すると42000 ÷ 40 × 5 = 5250となるので、それくらいプリズムがあればボーダー狙えるということになります。たぶん。
実際に走った結果
結論から言いますと、URは無事に完凸できました。がんばりました。
で、実際の私の状況ですが、LPがプレゼントボックスに200ほど。LPは30だったり50だったりとバラバラですが、最低値の30で計算して30 × 200で6000は貯蓄があることになります。42000 - 6000なので38000足りません。すでにエグい。
そしてプリズムです。レベルをマックスにしていないRレアのブロマイドや読んでいないサイドストーリーのプリズムをかき集めてだいたい3000になりました。
...ちなみに走り始めたのはしっかりと計算をする前だったので、「3000もあればいけるんじゃない？」と考え走りました。ちょっと目論見が甘かったですね...成功したからいいものの...
途中からですが、記録もつけました。全ての日程が同じ時間に記録したわけじゃないから公平性はないですが。
| 曜日 | 残りプリズム | 順位 （括弧内は翌日朝6時頃の順位） | 獲得ポイント |
|---|---|---|---|
| 金 | |||
| 土 | |||
| 日 | 2671 | 647 (737) | 555887 |
| 月 | 2276 | 620 (706) | 725744 |
| 火 | 1746 | 553 (642) | 921828 |
| 水 | 1266 | 544 (626) | 1117297 |
| 木 | 401 | 331 (483) | 1425520 |
| 金 | 141 | 367 | 1525256 |
木曜日にぐーんとあがったのは3倍ブーストかけ始めたからです。それまでは、ボーナスがもったいないと思って5~7曲目のみブーストというスタイルにしていたのですが、「間に合わないのでは...？」と不安になったためブーストを使いました。
先述した計算よりプリズムが少ないですがなんとかなりましたね...レベルアップのLP回復にかなり助けられました...。レベルは記録してないのですが、少なくとも17はあがりました。
あと特記すべきこととしては、手動でできるときは手動でプレイするってことでしょうか。まぁ私は仕事中オート、休憩時間や行き帰りの電車は手動、帰宅してから手動って感じでしたが...。LPを無駄にしてしまうくらいならオートでも回した方がいいです。ただ、オートの時はあまり3倍ブーストしないようにしました。といっても100~200くらいしか差がないと思いますが...これが何度も続くとちょっと大きな差となってしまうのかな...と。
もしくは最後の曲だけは手動とか...色々しましたね。最初のうちなんかできないPROをひたすらオートでしたからね。途中からHARDに変えましたが、正直PROオートするよりはHARDのほうがいいような感覚でした。
まとめ
なので、自分の経験からいいますと、
- LPの貯蓄が6000以上ある
- プリズムが3000以上ある
上記を満たしていると1500000ポイント狙える圏内なのかな、と。プレイヤーのレベルにもよりますが...。
注意点としては、「PROの方が点数が多い！でもPROできないからオートで回そっ！」って方はHARDを手動でやった方がいいです。「HARDもできないよー」って方は、ごめんなさい、私はNORMALプレイしなかったのでなんともいえないです。
今回の調査結果は、今回のイベントでこうだったよーってだけなので、仮に本記事を参考にしたけどだめだった！とかいうクレームは受け付けませんのであしからず。あくまで参考程度に読んでください。
とりあえず他のソシャゲがろくにプレイできないくらいシャニライまみれの1週間になったので、今後ランボ狙って走ることはしないと思います。ほんとに疲れた...。
