Web系SEが3ヶ月かけてクロスプラットフォーム開発でアプリをリリースした体験談
はじめまして、タカヒロスサキと申します。
先日、個人開発で「お酒とおつまみの販売情報検索 & 飲み合わせ自慢プラットフォーム」なるツールをリリースしました。
今回は、初の個人開発経験となったこのイエベロウの開発開始からリリースに至るまでの経験を、個人開発をやってみたいと考えている皆様に向けて共有することで、何か参考になる情報を得ていただければと考えております。
想定している対象読者
● 個人で何かWebサービスを開発してみたいと思っている方
● 日常生活の中で個人開発するとどんな感じなのか気になっている方
自己紹介
改めまして、タカヒロスサキと申します。
Web系のシステムエンジニアを8年ほど勤めております。
これまでは主にRuby・PHPを利用したWEBアプリを社内向けに開発・運用するお仕事に携わってきました。
現在は新規事業として、
「誰でも自分のことを好きになる」ための「習慣化サポート」サービスのシステム及びプロダクトそのものの開発に関わっています。↓
開発のきっかけ
主に2つの出来事が個人開発をするきっかけとなりました。
【リモートで可処分時間が増えた事】
【コロナの影響で、それまで行っていた副業の開発案件がストップした】
本業とは別に副業として別の開発案件も受け持っていて、大体平日に1.5~2時間・休日に2~3時間の週合計10時間を開発に充てていました。
その開発案件が4月からストップする事になったのを受け、せっかくプライベートの時間に開発する習慣が身についていたことだし、何か作るか！ってことで、開発するに至りました。
副業に充てていた時間がそのまま個人開発に充てられるようになった、という感じですね。
開発の目的
そして、どうせ開発するならばという事で、以下のように目的を立ててみました。
● Web開発中心のスキルセットでReact Nativeによるクロスプラットフォームの開発手法を学ぶ学習コストはいかほどなものか？を検証する
● 本業で得た継続のためのテクニックをいくつか実践する
● 自分の開発物ポートフォリオとして紹介できるような作品・・・というかサービスの開発
● アイデアを形にする練習として
クロスプラットフォームとは・・・
詳しく解説いただいている記事がWebの随所にあるため、こちらではざっくりとした紹介で済ませますが、一つのコードベースでiOS・Android・Web等の複数のプラットフォーム上で実行できるアプリケーションを開発するための枠組み、ないしは言語の事を言います。
プラットフォームごとに動作が異なる処理がどうしてもどこかで出てしまうので１００％共通のコードで全プラットフォームで動作するモノを作ることは難しいですが、ほとんど同じコードで複数プラットフォーム対応ができるため、プラットフォームごとに別々の言語で開発していた従来の開発方法(iOSならSwift、AndroidならJava、みたいに)と比べて開発コストの低減が期待できる、といった具合です。
但し、このクロスプラットフォーム言語は万能ではなく、ゲーム等複雑な動作をさせたいようなモノを作る時にはクロスプラットフォームで対応しきれない物も出てくるので、それぞれのプラットフォームに特化した言語で開発する選択を取らざるを得ない時もあると思います。
個人的には、Webでも作れそうな見た目のものをアプリで作りたかったらクロスプラットフォームも検討に入れる、という感じで使うかなぁというところです。
React Nativeについて
これについても他所で説明しているところが多いので詳しくは省きますが、JavascriptのReactフレームワークをiOS・Android上でも動作するようによしなにやってくれているフレームワーク、という認識です。つまりJavascriptでアプリが作れるんです。便利・・・
というところで、僕は元々サーバーサイドとWebのフロントエンドを専門にシステム開発をしてきたので、JSのノウハウが活かせそうだと。
さらに、ここにクロスプラットフォーム開発のスキルを取り入れることで、一気に自分がリーチできるプラットフォームの範囲が広がり、市場価値が上がるのではないかと考えたのが、React Nativeを採用したきっかけです。
やりきる為に心がけたこと
さてそんなわけで開発を進めていくわけですが、
いかんせん自分は飽きっぽくて集中力が持ちづらい性分なので、リリースへ持っていくまでにモチベーションが続くかが心配でした。
そこでモチベーション低下による開発ストップをなんとしてでも避けるべく、以下のような心がけを持つことにしました。
【本当にダルくなったら思い切って好きなことして休む】
心の中で開発やるべきだ、開発やらなきゃ・・・という具合に強迫観念に苛まれている間は確実にアタマの体力が削られます。※ 僕のイメージですが
そうやって消耗していくといつしか勝手に燃え尽きてしまい、仕事も何もしたくなくなる瞬間が来るので非常にもったいない事になります。
なので消耗するぐらいなら一度気分をリセットする感覚で、好きな事して好きな酒飲んで休もう、という事にしています。
1日でも休んでしまったらその間に他のライバルに差を付けられてしまうので、可能な限り動き続けるべき、という考え方もあるにはあるのですが、個人的にはあまりその考え方が好きではありません。
僕はこういった個人開発を始めとしたエンジニアリングの活動は、抽象的にはなにかの課題解決をすることと同じと考えていて、（ちょっと大げさですが）誰かがより豊かな暮らしをする事ができるようにするためのお手伝いだと考えています。
ですので、この活動そのものは誰かを蹴落としたり誰かから弾かれたりするようなシロモノではないんです。本来は。ゆっくりやったらいいんです。
開発してるものが誰かと被ってるようであれば、なんかよしなに別の解決方法にピボットすればいいんです。自分のペースで。
【時間を決めて取り組む】
習慣化をする上でリズムを作ることはとても重要と考えてます。この時間にはコレをやっていないと気持ち悪く感じてしまう、ぐらいまでに体に染み付くぐらいまで行けばベストです。その段階にまで持っていくには、何としてでも開発に取り組む時間を確保することに専念しましょう。
自分の場合は、「毎日21時~23時の間は必ず開発に充てる」という風に決めて、そこから逆算して仕事を切り上げたり家事を行ったりしていました。
【進捗が悪かろうが気にしない】
いざ開発に着手、となった時、「すっかり問題にハマって調査しかできんかった・・・」「良い設計が思いつかん・・・」みたいに、進捗が芳しくなくて不安になる時、あると思います。
でも、大丈夫です。
一つでも新しいノウハウを取り入れた時、一つでもコードを書いた時、一つでも設計を進めた時、1歩でも進めた時、その時って間違いなく昨日よりも夢に近づいているはずなんです。
他に好きなことできる誘惑を振り払ってその一歩を進めることができた自分を労うべきなんです。
ランニングで言えば、ジャージに着替えただけでもエライんですよ。もう。
・・・という感じで、進められただけエライって考えてました。
実際締め切りとか無いので、こんなゆったりとした進め方でできるのも個人開発のいい所だと思います。
【モチベが下がってきたらマイクロステップを心がける】
飽きたり詰まったりして作業に取り掛かるのがだるくなってきたら、「とりあえず可能な限り小さなことから手を付ける」ようにすると、次の行動のきっかけを作りやすくなっておすすめです。
例えば、「APIとの通信処理だけ作る」「アイコンを表示するコードだけ書く」「使えそうなモジュールを調査する」とか。(細分化が苦手なのでこのタスクが果たして可能な限り小さなものなのかは論点があると思います)
ランニングで例えるなら、「靴を履く」「運動着に着替える」とかですかね。
【30点ぐらいの出来でリリースする事にする】
はじめから完璧なものを作ろうとすれば途方も無い準備が必要になります。
そもそも一人の視点からベストなソリューションを捻り出すのはよっぽどの天才でない限りは不可能だと思います。
自分の頭で考えて考えてひねり出したアイデアというのは往々にしてバイアスがかかっている場合が殆どだと思います。自分がベストだと思ってても、実際にユーザーが価値を見出す箇所は全く別だった・・・なんて事はよくあります。
自分のバイアスにいち早く気づくためにも、さっさとリリースする事をオススメします。
他所でもよく言われていることだと思うのですが、まずはとにかくどんなにダメ（さすがにクラッシュは避けたいけど）でもいいので世の中に出して、そこから反応を伺いつつ機能を改善していくのがコスパが良いと思います。
こういった理由で、自分の場合は企画やUIUXの改善は2の次にしてとりあえずリリースを最優先事項にすることにしていました。
いいものを作ろうと必死に思考を凝らした結果、燃え尽きてリリースせずに終わる、という事は非常に勿体ないので、何としてでも避けたいところです。
【外発的な動機をもたないようにする】
具体的には、「お金を稼ぐ為」とか「人からいいねされたりちやほやされる為」みたいな感じで、行動の要因を外部に依存してしまうと、その行動のエネルギーが外部依存なわけなのでいずれ枯渇してしまうと思うのです。
ついでにお小遣い稼ぎ、みたいな副産物としての外発的動機ならば問題ないのですが、メインに据える目的としては自分の心の内から湧く興味・関心に伴った動機で動くことが良いと考えています。
僕の場合だと、開発のきっかけでご紹介した内容に例が載っています。
【なるべくラクできるようにする】
ありがたい事に、昨今のシステム開発界隈においては開発を楽に進めるためのあらゆるツールが様々な開発者によって公開されています。
中には無料で使えるものもあるので、これを使わない手はありません。
少しでも自分の手を動かす手間を省くことができれば、それだけ本質的な課題解決に充てられる時間が増えることになります。有効に活用しましょう。
React Nativeではexpoというサービスがあり、これを利用することで開発・ビルド・デプロイがコマンド数回でとても手軽にできるようになります(一部のネイティブ系の機能がexpo上だと動かない事もあるらしいです)。
イエベロウではコレを使って開発をしておりました。
React Nativeを利用してみた感想
少し技術寄りな話になります。
React Nativeを初めて触ってみたのでその感想をここにざっくり書きます。
（技術的な詳しい話を書きたくなったら別途書きます）
【Javascriptのノウハウがほぼそのまま生きる】
JSの文法・テクニック・及び一部のライブラリ(moment.jsやaxios等の汎用的なやつ)といった資産がそのまま流用できるのは、Web系出身の身としても非常にありがたい点でした。
このおかげでフロントエンドの開発をするための学習コストが少なく済んだ気がします。具体的には、他のエンジニアさんが公開してくれているチュートリアルを２つ３つやったぐらいで大体の勘所を掴むことができたっていう感じです。
【意外なところでパッケージが充実していなかったりする】
具体的にはプルダウンメニューを実装したかったんですが、今公開されているプルダウンメニュー系のライブラリは種類が少なく、自分でスタイルを変更できる箇所が少ないもの、機能がかなり制限されてるもの、の2択しかありませんでした。
自分で作りゃいいって話なんですが、結局既存のライブラリを利用してゴリゴリにスタイルを調整する形で落ち着きました。
こういった感じで、自分が叶えたい希によっては痒いところに手が届かなくなることがあるので、そんな時に自前で実装できるか、できなければ別の手段で叶えるか、を考えるのがポイントだと思います。
【Webまで一度にサポートさせようとすると辛い】
expoにはReact Native for Webの機能が搭載されていて、コレを使ってWeb版のソースコードをビルドすることができます。
が、まだまだ実験的な機能なのでモジュールのサポートはまちまちで、例えばModalがWeb版だとうまく表示できない、といった事が起こります。
なので、プラットフォームごとに使用するモジュールを分ける処理がほぼ必然的に出てきます。モジュールが違うということは与えるパラメータが変わってくるので、この差分をうまく吸収したコンポーネントを作るなりして、メンテナンスしやすくする工夫をしなければならないと感じました。
【Githubのissueやstackoverflowを読んでいることが結構多い】
ニッチな事をしようとしない限りは、React Nativeに関連した記事をググってもわりと検索結果に引っかかるので、情報がなくて途方に暮れるということは少なかったです。ゼロではなかったですが。
一方で出てくる情報はほとんど英語で、issueやstackoverflowのスレッドが引っかかる事が結構多いです。
なのでそこの情報を頼りに、あとは自分でコード調整するしかないっていう感じです・・・
個人開発アプリをリリースした感想
そんなこんなでリリースできたのですが、リリースを通して得られた経験としてはおおよそこんな感じでした。
【周囲の反応が思った以上に良かった】
実際に自分のTwitterやslackの自分用timesチャンネルに流して自慢しちゃったのですが、知り合いがダウンロードしたよと声をかけてくれたり、slackの方ではいつも以上にリアクションを頂くことができて満足しています。
自分としてはこんな簡単な方法で作ってしまっていいのか・・・？みたいに思ってましたが、0からアプリを作るという事に対してすごいと思ってくれる人は結構いるようで、個人的には誇りに思えるようになりました。
【思いの外アプリ作りは難しいことではない】
自分の場合はこれまでのキャリアで培った知識があったというのもあると思いますが・・・
サーバー側では外部APIからデータを取得し、それをよしなに整形してクライアントに返す、みたいな事しかしておらず、クライアント側ではAPIから取ったデータをよしなに見せていることしかほぼやってないので、特段複雑なことはやっていない筈なんです。
が、こうして形としてみてみると思ったよりもアプリとして様になっている（ような気がする）ので、単純なモノの組み合わせでも意外とどうにかなるものなのだなと実感いたしました。
こうした方がよかったと思ったこと
ついでに思いついた反省点を2つほど載せておきます。
【サーバーレスアーキテクチャにした方がよかった】
AWSのEC2を借りる形でサーバーを利用しているのですが、その環境構築がまあ面倒で・・・
さらに、この自前で立てたサーバーを仕事とプライベートの合間に負荷対策やらセキュリティ対応やらのメンテナンス対応をするとなると少々厄介・・・できなくはないんですが。
この管理コストを省いてやりたい事に集中、課題解決に集中するという意味で、コードのサーバーレス化をして管理コストを減らせばよかったなぁとちょっと後悔してます。
【実ははじめにデザインを固めておいたほうがスムーズだった説】
これは僕がUIデザインめっちゃ苦手なのもあると思うのですが、どうも自分一人で考えながら適当に組んだレイアウトが気持ち悪くて・・・
これを改善しようと何度かリデザインを試みたのですが、尽くダメだったので、仕方なく知り合いのデザイナーさんに少し協力していただきました。
(個人的な開発に巻き込んで申し訳なかったので、後でお菓子をプレゼントしています)
この手直ししてもらったデザインが個人的には結構気に入っていて、このUIで早く動かせるようになりたい！という思いから一気に開発へのモチベーションがあがり、コードを書ききることができました。
なのでもしかしたら、僕みたいにUIデザインに造形がまったく無い人であれば、一番はじめにしっかり画面設計をしておいたほうがトータルで早く終わるかもしれません。
オマケ: 採用した技術
こういう作ってみた系の記事って何かと○○を使って開発しました！みたいな話を載せている傾向があるので、一応自分の方でも載せておきます。
アプリ側はReact Nativeを採用したとお伝えしましたが、サーバーサイドはRubyのHanamiというフレームワークを利用しました。
こちらはお仕事の方でも採用しているフレームワークで、DDDの思想に基づいて設計されており、クラス・モジュールを役割ごとに分割して管理する時にスムーズに分けつつシステムの設計ができるので、個人的には気に入っております。
さいごに
・・・という事で、凡人がどんな事を考えながらアプリを作ってリリースしたかについての体験談を書いてみました。
色々書きましたが、要は自分を動かすにはどうすればよいか、を考えて、その試行錯誤を日々していくことが個人開発の勘所ではないかと思っています。
完璧なものを作りたくなってしまうのであれば、他者との比較をやめて30点でもいいからリリースすればOKというルールを作る。
作りたいものが思い浮かばなければ、とりあえず日々アンテナを張ってアイデアが浮かび次第どこかにメモして貯めて、自分が興味持てそうなイシューを見つけたらそれを掘り下げてみる。
・・・みたいに。
あと、ここではReact Native推しな感じで書いていますが、別に他の言語でもいいと思います。最近はFlutterが流行りなのかな？
ともかく自分が興味を持った好きな言語で開発すればいいと思います。そうすれば日々の開発も楽しめると思うので。
ただ個人的にはReact NativeはWebにも流用できるので是非おすすめしたい所です・・・
そしてもしも個人開発をやりきりたい！って思い立った方がいれば、ぜひ弊サービスを活用してみてください。日々のモチベーション維持のお手伝いをさせていただきます。(もちろん個人開発以外の事でもOKですｗ)
技術的なトピックは、また後日書きます。思い出せれば。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？