初めに
音楽投稿アプリを開発しました！
ウェブサイト：
Apple Store:
https://apps.apple.com/app/id1511131064
Google Play:
https://play.google.com/store/apps/details?id=com.front_music
開発言語はReactとReact Nativeを使用しています。
開発から運用まで全て個人で行っています。開発から運用まで大変だったことなど色々書いていきたいと思います。
React & React Nativeについての所感
気づけばReactを書き始めてから1年ぐらいがたってしまいました。Reactを学ぶきっかけとなったのはアルバイトです。それまではフロントエンドについてはあまり興味がなく、Pythonをよく書いていました。バイト先ではReact(JS)がメインだったので面接に受かってから学び始めました。バイトの頻度は週二回1日8時間くらいでした。
React
Reactは個人的にすごく書きやすい。個人的にhtml内のscriptの中やUIとは独立したjsファイルにjsを書くのが嫌いだったので。見にくくないですか？
Reactでつまづくとすれば、それはstateという概念だ。hooks周辺を理解するのは難しい。
useEffectについてひたすら調べまくりました。正直日本語でこれ以上に分かりやすい記事は他にないと思う。
https://iqkui.com/ja/a-complete-guide-to-useeffect/
あとは例外的ではあるがファイルアップロード関係かな。バイト先ではGraphQLというバックエンドとフロントを繋ぐものを使用していたのだが、これに使えるファイルアップローダーの無さといったらもう。そもそもGraphQLを通してファイルアップロードするのもどうかと思うんだが。バックエンドでPrismaとかDockerとか使ってたからしゃあなしか？
今回バックエンドについては特にかくつもりないので割愛します。
とまぁこんな感じでReactに慣れてきたらReact Nativeも書くようになりました。
React Native
React Nativeで一番大変なのはコードを書く以前の準備だと思います。モバイルアプリの開発はSimulatorをたてた状態で行わないといけませんが、慣れないうちはこれが大変です。iOSで言えばpodあたりやXcodeの設定をしっかり把握していないとビルドが失敗します。バイト先はアプリの運用をしていたので、既に完成されているものをビルドしなければいけません。ビルド時間は5~10分くらいかかっていました。ですので、慣れていないと後少し!!というところでビルドが失敗したりしてドツボにハマったりします。
という感じで僕のモバイルアプリ開発の始めは苦しむことが多かったですが、今はiOSもAndroidもできているのでいいかなという感じです。
そう、これがReact Nativeの利点だと僕は思う。ネイティブ言語でiOSとAndroidの開発をしようと思ったら、swiftやjavaの両方を学ばなければいけないからだ。React Nativeを使えば、多少の差があることは確かだがUIでいじる必要があることはほとんどない。ビルドの仕方とリリースの仕方を学べばそれでいい。多少の差に言及しておくとそれはアプリ内でファイル操作をする時だ。写真を選択したり、アップロードしたり。知らないとバグって、は？ってなる。
最後にReact NativeのUIについて述べる。UIはオープンソースのコンポーネントが色々あって便利だと思う。が、React Nativeのバージョンの違いとかで役に立たなかったりするやつがあるから注意。githubのReleasesのlatestが2年前とかのやつには手を出さないのが無難だ。あとは、cssのflexの有り難みがすごくわかる。キーワードはflexDirection, justifyContent, alignItemsだ。この３つがあれば画面が綺麗に整う。
所感の割りには色々書きすぎたと思うが以上がReact Nativeに関する正直な感想だ。
ウェブサイトのアニメーションについて
実は最近ウェブサイトをアップデートしてアニメーションを取り入れた。
https://cyber-muse.com
このウェブサイトのアニメーションは全てreact-springというモジュールを使用している。
https://www.react-spring.io/
このモジュールにスクロールの制御を加えると僕が作ったウェブサイトぐらいは作れるという感じで紹介しておこう。
終わりに
初めの文章に取り消しせんが付いている通りです。
ReactとReact Nativeについて述べただけになってしまいました。
ReactとReact Nativeを使えばこういうウェブサイトやアプリが作れる！！という参考になればいいと思います。
ウェブサイト： https://cyber-muse.com
Apple Store: https://apps.apple.com/app/id1511131064
Google Play: https://play.google.com/store/apps/details?id=com.front_music
Top comments (0)