前回このTsuguBlogというWebサイトを作成した後、次はiosアプリに挑戦してみたいと思いました。日常的に触れているスマートフォンの中に自分のアイデアが入り、普段の生活を支えてくれるということに魅力を感じたのかもしれません。

iosアプリを作ろうと思ったもののどのようなアプリを作るかは全く決めていませんでした。自分が使いたくなるようなアプリでないとモチベーション維持が難しいです。なのでサブスクリプションの無料体験後も契約してしまい、料金が発生してしまった過去の経験から、サブスクリプションを管理するアプリを作成することにしました。

言語はTypeScriptを採用しました。 TypeScriptで開発をすることは初めてでした。最初はかなり使いづらかったです。propsに型をつけたり、この変数にこの型のデータは入れられません！といったエラーを受けてスムーズに開発できませんでした。めんどくさいからanyを型としてつけてしまったり... でも慣れると気持ちいいですね。自分で設定した型のデータ以外は受け入れ無い。それ以外入る恐れがあるとエラーで教えてくれる。そんなTypeScriptが好きになりました。 次回、開発するときも言語はTypeScriptで！ <a style="color:#2937ff" href="https://tsugu-blog.vercel.app/products/jamstack-blog" target="_blank" rel="noopener noreferrer">TsuguBlogを作成したときに書いた記事</a>で「次の開発からはTypescriptを使用しようと思います。」と未来の自分と約束しました。約束守れましたね。

iosアプリの開発で言語がTypeScript？？ はい、ReactNativeで開発しました。 ReactNativeの選定理由は以前から開発でReactを使用しており、学習コストが少なかったためです。 Reactを学習済みの人なら簡単にプログラミングすることができますよ。開発した感じ、大きな違いはありませんでした。

Expo はクロスプラットフォーム（iOS/Android/Web）で React Native アプリを開発するための便利機能を集めたプラットフォーム。 素のReactNativeで開発するよりも少し制限がかかりますが、その分めちゃくちゃ楽です。 僕は初め、Expoを使わずReactNativeで開発しようと思いました。しかし、初期設定で3日間費やして、挙句の果てにエラーを解決できず開発を始めることができませんでした。Expoを用いると、5分で開発を始めることができました。 個人的にバーコードを読み込むことで自分の携帯で開発中のアプリを試せるところが好みです。

初めてのiosアプリ開発ということもあり、とにかく時間がかかりました。 学習期間は1ヶ月程度なので学習期間を含めると約6ヶ月です。 途中で難しいエラーを解決できなかったり、自分の思い描く機能を実装することができなかったり。モチベーションが落ちてあまり開発スピードが落ちてしまうときもありました。しかし、「AppStoreに自分のアプリを並べたい」、「自分自身がこのアプリを使いたい」という気持ちでなんとか乗り越えることができました。 初めてのiosアプリ開発ながら、自信があるアプリなので是非インストールして、使用してみてください。 不具合、改善点などありましたら是非<a style="color:#2937ff" href="https://docs.google.com/forms/d/e/1FAIpQLScpz38vrQ4KgTqT_4oj69h1clGFJHwil1E8BqaRgGtpb-JUTw/viewform" target="_blank" rel="noopener noreferrer">manasubのお問合せフォーム</a>より教えてください。 今すぐ「manasub(マナサブ)」でサブスクリプションを管理してみませんか？

サブスクリプション、固定費を簡単に管理。
あなたは毎月どれくらいサブスクリプションにお金を使っていますか？
金額、支払日が一目瞭然！支払日三日前に通知で知らせてくれる機能も...

ReactNative(Expo)でiosアプリを作成

学習したことをアウトプットすることはエンジニアにとって大切ですよね。 フロントエンドに興味を持ち、React、Next.jsを勉強していた時から、アウトプットとして技術ブログを作成することを決めていました。 なぜ技術ブログをアウトプットに選んだのかって？ 僕のような開発の知識、経験がない方のお手伝いをこの技術ブログで出来たら良いなと思ったからですよ！！

言語はJavascriptを採用しています。 現在主流となっているTypescriptで書こうと思ったのですが、今回が初めてのプロダクト開発なので、使い慣れているJavascriptで開発しました。 次の開発からはTypescriptを使用しようと思います。

Next.jsは基本的に全てのページをPre-rendering(各ページに対してHTMLを予め作っておくこと)します。なのでパフォーマンスやSEOがより良い結果になります。 Pre-renderingには以下の二種類があります。 ・静的にサイトを作成するSSG ・リクエストのたびにHTMLが作成されるSSR SSGを使うことで表示速度を速くすることができ、SSRを使うことで動的コンテンツを扱えます。この点からNext.jsを採用しました。(あと今流行っているから...)

最近流行っているCSSフレームワークTailwindCSSを使用しました。 まずクラス名を決めなくていいので超楽です。 さらに、細かいレイアウトを簡単にできるという点もいいですね。 ただ、コードが長くなって可読性が低くなる点が...と思ったんですけど慣れたら案外大丈夫でした。

記事の内容、「ブログ」「プロダクト」の一覧画面の一部分はmicroCMSで作成しています。 さまざまなヘッドレスCMSがある中でなぜmicroCMS? ・国産なので日本語表記 ・<a style="color:#1d4ed8" href="https://blog.microcms.io/getting-started/" target="_blank" rel="noopener noreferrer">microcmsのブログ</a>にさまざまな情報が日本語で載っているので助かる(実際何度も助かりました) 色々な機能が追加され続けているので今後も期待ですね。

ホスティングサービスはVercelを使用しています。 Next.jsとVercelは同じ会社で作成されており、とても相性がいいです。無料でデプロイ、ドメインをカスタムすることができるという点がとても魅力的です。 Next.jsを使用する際のホスティングサービスはVercel一択です！！

初めてのプロダクト開発だったので結構時間はかかりました。 でも「このサイトが世界に配信され、誰かの助けになるのでは？？」と思いながら開発すると楽しかったです。 これからも「プロダクト」、「ブログ」を更新するので是非チェックしてみてください。

Next.js、TailwindCSS、microCMSでJAMstackブログを作成しました。