[{"data":1,"prerenderedAt":1390},["ShallowReactive",2],{"tag-dev_exp-1":3},{"count":4,"content":5},2,[6,252],{"id":7,"title":8,"body":9,"category":236,"createdAt":238,"description":239,"extension":240,"index":241,"meta":242,"navigation":243,"path":244,"publish":243,"seo":245,"series":241,"seriesTitle":241,"stem":246,"tag":247,"thumbnail":250,"updatedAt":241,"__hash__":251},"articles\u002Farticles\u002F2024_09_12_engineer_needs_math.md","エンジニアという職業に就くために数学は必要なのか？",{"type":10,"value":11,"toc":212},"minimark",[12,16,19,22,25,30,33,37,40,43,46,50,53,56,60,63,66,69,72,75,80,83,86,90,93,96,100,103,106,109,112,115,118,121,124,127,130,133,136,139,142,153,156,162,165,168,171,174,177,180,183,187,190,193,196,199,202,205],[13,14,15],"p",{},"エンジニアにとって数学が必要かどうかという議論は昔からあります。私の考えでは、「数学はまったく不要」とは言い切れないものの、大学で専攻するほどの知識は必須ではないと思っています。高校数学の基礎を理解していれば、ほとんどのエンジニアリング業務には対応できるでしょう。",[13,17,18],{},"実際のところ、数学がどれほど必要かは、どの分野のエンジニアを目指すかによって大きく異なります。例えば、アルゴリズム開発やAIの分野では高度な数学が不可欠です。一方で、フロントエンド開発などでは、それほど多くの数学知識は要求されません。このように、分野ごとに求められるスキルが異なるため、それに応じた準備が必要です。",[13,20,21],{},"また、最近では「数学は絶対に必要だ」とか「全くいらない」といった極端な主張をするYouTuberやサイトが目立ちますが、これらは前提となる「どの分野のエンジニア」を対象にしているかが曖昧なことが多いです。ただ不安を煽っているだけなので、あまり気にしない方が良いでしょう。",[13,23,24],{},"この記事では、どの分野で数学が必要か、逆に必要でない場合には何が重要とされるのかについて詳しく説明していきます。これからエンジニアにジョブチェンジしたい、またはエンジニアとして就職を考えているけれど、数学に自信がないという方々に役立ててもらえれば幸いです。",[26,27,29],"h3",{"id":28},"必要な分野不要な分野","必要な分野、不要な分野",[13,31,32],{},"エンジニアリングの分野によって、数学が必要な度合いは大きく変わります。特に、アルゴリズム開発やAIの研究などの分野では、数学は避けて通れない要素です。逆に、フロントエンド開発やライブラリを用いた実装が中心の業務では、高度な数学の知識はほとんど必要ありません。以下でそれぞれの分野について、数学の重要性を説明していきます。",[26,34,36],{"id":35},"アルゴリズム開発やaiなど","アルゴリズム開発やAIなど",[13,38,39],{},"アルゴリズム開発やAI（人工知能）の分野では、大学レベルの数学知識が必要不可欠です。特に、統計学、線形代数、微積分、確率論などは、これらの分野において基礎となるスキルです。AIのモデルを作る際には、データの処理や学習アルゴリズムを理解するために、数学的な知識が重要になります。数学が好きで得意な人にとっては、エンジニアリングの中でもこの分野は非常にやりがいのある選択肢と言えます。",[26,41,42],{"id":42},"フロントエンドやライブラリを用いての実装中心",[13,44,45],{},"私が主に活動しているフロントエンドエンジニアリングの分野では、数学はそこまで重要ではありません。もちろん、組み合わせ論や論理的な思考は多少求められるものの、日常的な業務では、どちらかというとソフトウェア設計の考え方が重視されます。DB設計、クラス設計、UI設計など、ソフトウェア全体の構成をどうするかが重要なスキルです。",[26,47,49],{"id":48},"アニメーション3dゲーム開発","アニメーション、3D、ゲーム開発",[13,51,52],{},"アニメーションや3D、ゲーム開発の分野では、ベクトルや三角関数といった数学の知識が役立つことがあります。例えば、アニメーションを描画する際には、フレームレートの調整や、物体の移動をスムーズに見せるために三角関数を使うことがあります。私も以前、Web上で水玉が特定の方向にふわふわと移動するアニメーションを実装した際、ベクトルと三角関数の知識が役に立ちました。",[13,54,55],{},"ゲーム開発においては、アニメーションの他に物理演算や処理負荷の最適化など、さらに複雑な数学の概念が求められることがあります。ただし、ノベルゲームのように動きが少ないゲームの場合は、そこまで高度な数学の知識は不要です。",[57,58,59],"h2",{"id":59},"エンジニアの多くであろう実装中心あたりについて",[13,61,62],{},"エンジニアとしてのキャリアを歩む上で、多くの人が「実装中心」の分野に携わることになるでしょう。ここで言う「実装中心」とは、クライアントやプロダクトの要件に基づいてシステムやアプリケーションを構築する業務です。特にバックエンドやフロントエンド、またはその両方に携わるエンジニアが多く、この領域では数学的な知識よりも別のスキルセットが求められます。研究という要素が少なく、要件に従った実装やそのヒアリング、ライブラリやフレームワークを利用するための調査や構築を行うことが多いです。",[13,64,65],{},"といっても流石に数学が全く不要だったかというと設計や効率的なコードを記述するにあたり学んでおいてよかった数学の知識もあります。",[13,67,68],{},"具体的に必要なスキルセットや、知っておいてよかった数学の知識は以下の通りです。",[26,70,71],{"id":71},"実務上のスキルセット",[13,73,74],{},"エンジニアとしてサービスを開発する際に、実際に必要だと感じたスキルは数多くあります。これらのスキルは、数学が得意でなくても習得できるものであり、私自身も日々の業務を通じて身につけてきました。数学的な知識が役立つ場面もあるかもしれませんが、実務においては、それ以上に重要な要素があります。",[76,77,79],"h4",{"id":78},"db設計","DB設計",[13,81,82],{},"データベース設計は、エンジニアにとって基本的なスキルの一つです。データを効率的に取り扱い、冗長なデータをなくすために「正規化」の概念が必要になります。さらに、カラムの構成や役割を理解し、データベースから必要な情報を適切に取得するためのSQLコマンドも必須です。",[13,84,85],{},"リレーショナルデータベースの考え方を把握し、エンティティ関係図（ER図）を描けるようになると、データ同士の関係を視覚的に整理でき、設計作業がよりスムーズになります。最終的には、プロジェクトの要件に従い、データベースの構造をどう最適化するかが重要な課題となります。",[76,87,89],{"id":88},"クラス設計オブジェクト指向","クラス設計（オブジェクト指向）",[13,91,92],{},"保守しやすいアプリケーション開発を行う上で、オブジェクト指向の概念は欠かせません。特に大規模なシステムや長期運用するサービスでは、コードの再利用性や拡張性を意識した設計が求められます。オブジェクト指向は学習が難しいと感じることもありますが、概念を理解しておくと、後の業務での作業が格段に楽になります。",[13,94,95],{},"実践的に学ぶためには、実際に自分でオブジェクト指向を用いたプロダクトを作成してみるのが効果的です。理論を覚えるよりも、プロジェクトを通じて実践的なスキルを養うことで、オブジェクト指向の本質に触れることができます。",[76,97,99],{"id":98},"コミュニケーション力ヒアリング力","コミュニケーション力（ヒアリング力）",[13,101,102],{},"技術力以上に重要なのが、顧客やチームメンバーとのコミュニケーションです。特に、顧客が専門家でない場合、要望が非常に曖昧なことがあります。そのため、顧客の意図を汲み取り、具体的な要件として定義する能力が求められます。技術的な要件だけでなく、ビジネスのニーズを理解し、それをシステムに落とし込むことができるエンジニアは、プロジェクトを成功に導けるでしょう。",[13,104,105],{},"さらに、顧客が気づいていない問題やリスクを指摘し、改善点や便利な機能を提案できると、信頼関係が深まり、仕事の質も高まります。エンジニアにとって、ヒアリング力と提案力は非常に重要なスキルです。",[76,107,108],{"id":108},"ドキュメントの読解と理解力",[13,110,111],{},"開発現場では、ゼロからコードを書き始めることは少なく、ほとんどのケースでフレームワークやライブラリを活用します。そのため、これらのツールのドキュメントをしっかりと読解し、理解する能力が重要です。英語のドキュメントが多いため、英語を抵抗なく読むことが求められますが、翻訳ツールを使いながらでも問題ありません。",[13,113,114],{},"ドキュメントを適切に理解できるかどうかで、開発の効率は大きく変わります。必要な情報を素早く引き出し、それを実装に反映する能力が、スムーズなプロジェクト進行に直結します。",[76,116,117],{"id":117},"バグの調査や原因の探究",[13,119,120],{},"バグの解決は、開発業務において避けては通れない要素です。原因を素早く特定し、解決に導くスキルは、エンジニアにとって非常に重要です。特に、ライブラリやフレームワークを多用する現代の開発では、バグの原因が外部要因なのか、自分の実装ミスなのかを切り分ける力が必要です。",[13,122,123],{},"具体的には、ライブラリのリポジトリにあるIssueを参照したり、StackOverflowなどのコミュニティを活用しながら、同じ問題に遭遇した他のエンジニアの知見を活用することが求められます。問題の解決には、粘り強く調査し、正しい情報を集める力が欠かせません。",[26,125,126],{"id":126},"実装中心でもあった方がいい数学知識",[13,128,129],{},"実装中心の業務において、数学知識が必須というわけではありませんが、知っておくと役立つ場面もあります。ただし、これらの知識を専門家レベルで理解する必要はありません。「どんなものかを説明できるか」が重要です。実際の計算処理はコンピュータが行ってくれるため、エンジニアとしては理論や式を構築する場面が多くなります。",[13,131,132],{},"また、実装では処理の流れや効率を重視することが多く、数学的な論理やパターンの考え方が役に立つことがあります。特に論理系の知識は、条件分岐やアルゴリズムの構築において重要です。",[76,134,135],{"id":135},"集合と論理",[13,137,138],{},"集合や論理の知識は、条件分岐やデータの取り扱いに直結します。特に、条件式を効率的に記述する能力が求められます。知らないと、冗長な条件式を書いてしまうことがありますが、論理的な考え方を理解していれば、シンプルかつ効果的な条件分岐を作成できます。",[13,140,141],{},"例えば、以下のような冗長な条件式があります。",[143,144,149],"pre",{"className":145,"code":147,"language":148},[146],"language-text","if (x == 1 && (y == 2 || y == 3) && !(z == 0)) { ... }\n","text",[150,151,147],"code",{"__ignoreMap":152},"",[13,154,155],{},"これを論理的に整理すると、以下のように簡潔な式にできます。",[143,157,160],{"className":158,"code":159,"language":148},[146],"if (x == 1 && y > 1 && y \u003C 4 && z != 0) { ... }\n",[150,161,159],{"__ignoreMap":152},[13,163,164],{},"論理を整理することで、コードが読みやすくなり、バグの発生も減らすことができます。",[76,166,167],{"id":167},"組み合わせ",[13,169,170],{},"組み合わせの考え方は、要件の中で複数の要素が組み合わさる場面に役立ちます。例えば、ユーザーの入力によって異なる結果を表示するシステムでは、どのようなパターンがあり得るのかを予測し、それに対応した処理を実装することが必要です。特に、脆弱性を防ぐためにも、可能な限りパターンを見つけ出し、考慮に入れることが重要です。",[13,172,173],{},"具体的な数学的な組み合わせの計算を行うというよりも、要件に対してどんな組み合わせがあり得るかを考え、それをシステム設計に反映する能力が求められます。",[76,175,176],{"id":176},"統計学",[13,178,179],{},"統計学は、データを扱う際に特に役立ちます。ただし、データ解析に携わらないエンジニアであれば、それほど深い理解は不要です。しかし、統計的な概念を理解していると、正確なデータ分析や結果の解釈ができるため、役立つ場面が出てくることもあります。",[13,181,182],{},"例えば、A\u002FBテストなどのデータ分析を行う際には、統計の基本的な知識があった方が、より精度の高い判断ができます。",[76,184,186],{"id":185},"数列指数関数","数列、指数関数",[13,188,189],{},"数列や指数関数は、エンジニアリングの現場では、特に処理の効率やデータの増加に関わる場面で役立ちます。例えば、アルゴリズムの計算量を評価する際には、数列や指数関数の考え方が重要です。データが増加するにつれて処理時間やメモリ使用量がどのように変化するかを予測するためには、これらの概念が不可欠です。",[13,191,192],{},"また、物理シミュレーションやグラフィカルな処理においても、数列や指数関数を使って計算を行うことがあります。例えば、一定間隔で増減する値や、特定の割合で増加・減少するデータを処理する際には、数列や指数関数の知識が役立ちます。",[13,194,195],{},"さらに、リソース管理の観点からも、指数的に増加する処理負荷を見積もる際に使われます。大量のデータを処理するシステムにおいて、時間やリソースの効率的な利用を計画するために、指数関数の理解は重要です。",[57,197,198],{"id":198},"でも数学は学んでおいて損はないと思う",[13,200,201],{},"エンジニアリング業務において、数学が直接的に必要ない場合も多いですが、学んでおいて損はありません。特に、実装中心のエンジニアであれば、まずは使用するプログラミング言語の仕様や設計の知識を優先的に習得すべきです。しかし、アニメーション系の開発、ゲーム開発、そして研究職になるほど、数学の重要性が高まっていきます。",[13,203,204],{},"数学は抽象的な概念を扱うため、最初は理解しにくく、何に役立つのかがわからないことが多いです。だからこそ、まずは実際にコードを書きながら実践し、必要性を感じたタイミングで学んでいくのも一つの方法です。例えば、私自身もGIS（地理情報システム）を用いたアプリケーションを開発する際に、数学の知識があればさらに深く学べたと思ったことがあります。",[13,206,207,211],{},[208,209,210],"strong",{},"補足）GISとは？","\nGIS（Geographic Information System、地理情報システム）は、地理的なデータを収集・解析・可視化するためのシステムです。地図をベースにデータを管理・操作する技術で、都市計画、交通分析、環境モニタリングなど、さまざまな分野で利用されています。これらのアプリケーション開発においては、緯度や経度などの座標データを扱うため、三角関数やベクトルといった数学的な知識が役立ちます。",{"title":152,"searchDepth":213,"depth":213,"links":214},3,[215,216,217,218,219,235],{"id":28,"depth":213,"text":29},{"id":35,"depth":213,"text":36},{"id":42,"depth":213,"text":42},{"id":48,"depth":213,"text":49},{"id":59,"depth":4,"text":59,"children":220},[221,229],{"id":71,"depth":213,"text":71,"children":222},[223,225,226,227,228],{"id":78,"depth":224,"text":79},4,{"id":88,"depth":224,"text":89},{"id":98,"depth":224,"text":99},{"id":108,"depth":224,"text":108},{"id":117,"depth":224,"text":117},{"id":126,"depth":213,"text":126,"children":230},[231,232,233,234],{"id":135,"depth":224,"text":135},{"id":167,"depth":224,"text":167},{"id":176,"depth":224,"text":176},{"id":185,"depth":224,"text":186},{"id":198,"depth":4,"text":198},[237],"myopinion","2024-09-12","よく言われるエンジニア数学必要論について","md",null,{},true,"\u002Farticles\u002F2024_09_12_engineer_needs_math",{"title":8,"description":239},"articles\u002F2024_09_12_engineer_needs_math",[248,249],"dev_exp","carrier","2024_09_12_engineer_needs_math\u002Fthumbnail.webp","D_weARn9rztnF82t4tSpUG5nn-OAzcNSgt0p8tjz33E",{"id":253,"title":254,"body":255,"category":1379,"createdAt":1381,"description":1382,"extension":240,"index":241,"meta":1383,"navigation":243,"path":1384,"publish":243,"seo":1385,"series":241,"seriesTitle":241,"stem":1386,"tag":1387,"thumbnail":1388,"updatedAt":241,"__hash__":1389},"articles\u002Farticles\u002Fprivate-develop-released.md","リリースまで進み続けるんだ！これはお前が始めた個人開発だろ？",{"type":10,"value":256,"toc":1338},[257,268,282,288,291,294,297,300,303,322,325,336,339,342,346,349,357,360,363,380,383,386,389,392,406,414,417,420,431,434,437,454,457,460,463,466,469,555,559,565,570,573,576,579,590,593,602,613,616,620,623,626,629,633,636,639,642,656,659,662,665,679,682,696,699,713,716,719,722,725,748,755,778,781,784],[13,258,259,260,267],{},"この記事は",[261,262,266],"a",{"href":263,"rel":264},"https:\u002F\u002Fqiita.com\u002Fadvent-calendar\u002F2022\u002Findividual-developers",[265],"nofollow","Qiita 個人開発 Advent Calendar 2022の12\u002F11の記事","になります。",[13,269,270,271,276,277],{},"こんにちはjunです。2022年の11月に",[261,272,275],{"href":273,"rel":274},"https:\u002F\u002Froute-share.net",[265],"RouteShare","というユーザー投稿型webサービスをリリースしました。地図に情報を入力し、ワードプレスの様に記事を作成し、いろんな道や場所の魅力を投稿できます。ユーザーが自由に地図に情報を入力して地図を見ながら記事を読めること、地図（地理情報）を中心としたコンテンツです。ツーリスト、サイクリスト、ライダーなど、いろんな場所に旅行したり地理情報をまとめる人向けになっています。ぜひご興味ありましたらご利用ください。メールアドレスかGoogleアカウントで登録が可能です。",[261,278,281],{"href":279,"rel":280},"https:\u002F\u002Froute-share.net\u002Fabout",[265],"RouteShareについてより知りたい方はこちら",[283,284],"image-render",{":src":285,":width":286,":center":287,":current":287},"'large_logo.png'","'300px'","true",[13,289,290],{},"さて、宣伝はここまでにしておきます。このサービスは企画、設計、デザイン、実装、デプロイ、支払い全てに至って自分で行った、個人開発プロダクトです。途中、友人にコンセプトや使い心地のレビューはもらいましたが基本的には一人で開発しました。開発開始から９ヶ月で作り上げたサービスで、これからは運営や改善を繋げながら収益化を目指そうと思っています。",[13,292,293],{},"今回の記事ではリリースに至るまでの、企画、設計、デザイン、実装、デプロイ、支払いなど実務的な内容を書こうと思います。結構長くなると思いますが、個人開発をしてみたい人の参考になればと思います。適宜、好きなセクションに飛ばしてみてみてください。",[57,295,296],{"id":296},"ここでいいう個人開発とサービス種別について",[13,298,299],{},"人によっては「個人開発」の意味合いやどこまでやるかという感覚が異なると思いますので、あらかじめここで解説する「個人開発」というものを定義しておきます。",[13,301,302],{},"ここでいう個人開発は",[304,305,306,310,313,316,319],"ul",{},[307,308,309],"li",{},"公開され、第三者が利用することができる。",[307,311,312],{},"誰かの役に立つ、得になるもの。",[307,314,315],{},"最終的に事業として収益化を目指すもの。",[307,317,318],{},"一人または少人数で法人格がない人がつくるもの、開発に関して給与が発生しない。",[307,320,321],{},"会社に勤務していたり、学生だったり何かしらの別の所属を持っている中、個人的に開発するもの",[13,323,324],{},"としておきます。そのため",[304,326,327,330,333],{},[307,328,329],{},"収益化を目的としない、趣味的・実験的な内容",[307,331,332],{},"オープンソース開発、活動",[307,334,335],{},"法人格を持って運営する。大人数で金の力でなんとかする",[13,337,338],{},"といったことではないとしておきます。まあ「法人格を持って運営する」あたりは「事業として収益化を目指すもの」とぶつかったりするので、あくまで「こんぐらいのレベル感なんだなー」と思ってください。",[13,340,341],{},"また、作成するサービス種別はwebサービスとしておきます。ただしある程度のセクションはネイティブ開発など他種別の個人開発にも応用できると思います。",[57,343,345],{"id":344},"作成した個人開発の開発技術的概要","作成した個人開発の開発・技術的概要",[26,347,348],{"id":348},"開発概要",[304,350,351,354],{},[307,352,353],{},"作成期間:9ヶ月",[307,355,356],{},"実作成人月:3人月ぐらい？",[13,358,359],{},"2022年の2月から同年11月にリリースしました。退勤後や土日を使用して作成したので、期間は9ヶ月かかりました。アプリケーションの構成自体はそれほど複雑でないので、実際は3人月ぐらいでできそうな規模です。",[13,361,362],{},"内訳としては",[304,364,365,368,371,374,377],{},[307,366,367],{},"2~3月: 設計と企画、技術検証",[307,369,370],{},"3~4.5月: ボイラーテンプレート的な開発",[307,372,373],{},"4.5~8月: 基幹機能開発",[307,375,376],{},"9~10月: レスポンシブや細かい機能、調整",[307,378,379],{},"11月: 最終確認、デプロイ作業",[13,381,382],{},"という感じです。構想自体は結構前から練っていたのでそれほど時間はとりませんでした。",[26,384,385],{"id":385},"技術概要",[13,387,388],{},"公開サービスなのでセキュリティ上可能限りで紹介します。",[76,390,391],{"id":391},"フロントエンド",[304,393,394,397,400,403],{},[307,395,396],{},"Nuxt.js（SSR）",[307,398,399],{},"Google Map API",[307,401,402],{},"Editor.js",[307,404,405],{},"Bootstrap-vue",[13,407,408,409,413],{},"フロントエンドは得意なNuxt.jsを使用して構築しました。基本的なUIはNuxt.jsにて記述し、Google Map を用いた地図操作・レンダリングは別途、JSでクラスを作成しNuxtと連携しました。また、記事の作成の際には",[261,410,402],{"href":411,"rel":412},"https:\u002F\u002Feditorjs.io\u002F",[265],"というブロックベースのエディタを採用しました。",[13,415,416],{},"デザインは正直得意ではないので、デザインの４原則とブランドカラーを決めてBootstrapをカスタマイズして実装しました。またモーダルなどUIを作るのが面倒だったという理由もあります。",[76,418,419],{"id":419},"バックエンド",[304,421,422,425,428],{},[307,423,424],{},"Laravel（フレームワーク）",[307,426,427],{},"mysql（DB）",[307,429,430],{},"apache（Webサーバ）",[13,432,433],{},"バックエンドは得意なLaravelを使用しました。",[76,435,436],{"id":436},"その他",[304,438,439,442,445,448,451],{},[307,440,441],{},"Git",[307,443,444],{},"Google App engine (フロントエンドサーバ)",[307,446,447],{},"Google Domains",[307,449,450],{},"Github actions",[307,452,453],{},"Docker （仮想化）",[13,455,456],{},"フロントではNode.jsを動かせるGoogle App engineを使用しています。理由は後述します。",[13,458,459],{},"以降のセッションでは開発に関する細かい内容を解説していきます。",[57,461,462],{"id":462},"詳細なリリースまでの流れ",[26,464,465],{"id":465},"とりあえずこの記事で伝えたいこと",[13,467,468],{},"結構長くなるので、重要なことを箇条書きしました。それぞれアンカーを張っていますので気になるとこを見てみてください。",[304,470,471,477,483,489,495,501,507,513,519,525,531,537,543,549],{},[307,472,473],{},[261,474,476],{"href":475},"#%E3%81%BE%E3%81%9A%E3%81%AF%E8%87%AA%E5%88%86%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A8%E3%81%84%E3%81%84%E3%81%AA%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8%E3%82%92%E5%A4%A7%E5%88%87%E3%81%AB","まずは自分があるといいなと思ったことを大切に",[307,478,479],{},[261,480,482],{"href":481},"#%E4%BC%81%E7%94%BB%E6%99%82%E3%81%AF%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E3%82%B5%E3%83%A0%E3%83%A9%E3%82%A4%E3%82%92%E8%AA%AD%E3%82%82%E3%81%86","企画時はアジャイルサムライを読もう",[307,484,485],{},[261,486,488],{"href":487},"#%E7%AB%B6%E5%90%88%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E9%9C%80%E8%A6%81%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B","競合を調べて需要を調べる",[307,490,491],{},[261,492,494],{"href":493},"#%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E5%85%B7%E7%8F%BE%E5%8C%96%E3%81%99%E3%82%8B","しっかり具現化する",[307,496,497],{},[261,498,500],{"href":499},"#%E3%82%84%E3%82%89%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%82%92%E6%B1%BA%E3%82%81%E3%82%8B%E3%81%AE%E3%81%AF%E9%87%8D%E8%A6%81","やらないことを決めるのは重要",[307,502,503],{},[261,504,506],{"href":505},"#%E5%8F%8E%E7%9B%8A%E5%8C%96%E3%81%AF%E8%A6%96%E9%87%8E%E3%81%AB%E5%85%A5%E3%82%8D%E3%81%86","収益化は視野に入ろう",[307,508,509],{},[261,510,512],{"href":511},"#%E6%94%AF%E5%87%BA%E3%81%AF%E3%81%A8%E3%81%AB%E3%81%8B%E3%81%8F%E3%82%B1%E3%83%81%E3%82%8C","支出はとにかくケチれ",[307,514,515],{},[261,516,518],{"href":517},"#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AF%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AB%E8%80%83%E3%81%88%E3%82%8B","デザインはシンプルに考える",[307,520,521],{},[261,522,524],{"href":523},"#%E6%8A%80%E8%A1%93%E3%81%AF%E8%87%AA%E5%88%86%E3%81%8C%E5%BE%97%E6%84%8F%E3%81%AA%E3%82%82%E3%81%AE%E3%82%92","技術は自分が得意なものを",[307,526,527],{},[261,528,530],{"href":529},"#%E5%AE%8C%E7%92%A7%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%95%E3%81%AA%E3%81%84","完璧を目指さない",[307,532,533],{},[261,534,536],{"href":535},"#%E3%83%86%E3%82%B9%E3%83%88%E3%80%81Git%E3%81%AF%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB","テスト、Gitはできるように",[307,538,539],{},[261,540,542],{"href":541},"#%E7%9B%AE%E6%A8%99%E6%97%A5%E3%82%92%E6%B1%BA%E3%82%81%E3%82%8B","目標日を決める",[307,544,545],{},[261,546,548],{"href":547},"#%E7%B6%99%E7%B6%9A%E7%9A%84%E3%81%AA%E9%81%8B%E5%96%B6%E3%81%A8%E9%96%8B%E7%99%BA%E3%82%92%E3%82%81%E3%81%96%E3%81%99","継続的な運営と開発をめざす",[307,550,551],{},[261,552,554],{"href":553},"#%E5%A4%96%E9%83%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E5%88%A9%E7%94%A8%E6%99%82%E3%81%AF%E8%A6%8F%E7%B4%84%E3%82%92%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E8%AA%AD%E3%82%80","外部サービス利用時は規約をしっかり読む",[26,556,558],{"id":557},"企画構想","企画、構想",[13,560,561,564],{},[562,563,558],"em",{},"では、プロジェクトの基礎となる部分です。頭の中にある曖昧なアイデアや目的を言語化し、はっきりさせることで実際に作りたいサービスがわかってきます。設計を行うことでアイデアを実現させる、ソフトウェア構成を考えようやく開発に至ります。",[13,566,567],{},[568,569],"span",{"id":476},[76,571,572],{"id":572},"開発に至る経緯",[283,574],{":src":575,":width":286,":center":287,":current":287},"'process.svg'",[13,577,578],{},"RouteShareを作成する経緯としては私がサイクリストで、色んなとこにツーリングを行く経験が元になっています。その際、ルートを作るときにGoogle My Mapを使用していました。どんなルートにしようかを考えるとき他人のブログやストリートビューを見たりしていました。しかし、",[304,580,581,584,587],{},[307,582,583],{},"もっと総合的にまとめられているサイトがないこと",[307,585,586],{},"住所名や写真だと「実際にそこはどのへんなの？」と地図を見ながら情報を掲載したい",[307,588,589],{},"地図の埋め込みや表示を行っているサイトがない",[13,591,592],{},"とルートの共有できるサービスってあんまないのでは？と思う様になりました。",[13,594,595,596,601],{},"またツーリング友達が",[261,597,600],{"href":598,"rel":599},"https:\u002F\u002Fwww.itmedia.co.jp\u002Fnews\u002Farticles\u002F1907\u002F03\u002Fnews096.html",[265],"ルートラボ","というサービスがなくなり、ルートの共有に困っているということも聞きました。",[304,603,604,607,610],{},[307,605,606],{},"ユーザーが手軽に地図に情報を掲載できる",[307,608,609],{},"地図や文章を共有できる",[307,611,612],{},"公開されて無料でできるサービス",[13,614,615],{},"というサービスが無いかを考えました。ともあれ最初の構想においてはまず自分の体験や、必要だなと思うこと、あるといいなと思うサービスを思うかべたり、既存アプリの欠点を探すといいです。",[13,617,618],{},[568,619],{"id":482},[76,621,622],{"id":622},"企画の時に役に立つアジャイルサムライ",[13,624,625],{},"ちょっと脱線しますが、企画の段階には「アジャイルサムライ」という名著が役に立ちます。チームでのアジャイル開発に関する内容がメインですが、プロジェクトの立案や管理に関する具体的な方法に関してのTipsが多いです。チームだけでなく個人開発でも十分利用できることが書いてあります。ぼっち開発なので第４章の「全体像を捉える」以降が特に役に立ちます。以降の内容でもアジャイルサムライで出てくる内容がちょくちょく出てきます。",[13,627,628],{},"個人開発を行うときはアジャイルサムライを購入してみたり、他にも企画やプロジェクト管理に関する著書を買ってみてもいいでしょう。",[13,630,631],{},[568,632],{"id":488},[76,634,635],{"id":635},"競合調査",[283,637],{":src":638,":width":286,":center":287,":current":287},"'search.svg'",[13,640,641],{},"競合調査をする理由は、",[304,643,644,647,650,653],{},[307,645,646],{},"機能がダダ被りであった場合、例えリリースしても「ユーザーがこのアプリを使うメリット」が見つからない状態となるのを防ぐ。",[307,648,649],{},"自分が知らない機能を探し出す。",[307,651,652],{},"なぜ収益化できているのか、人気なのかの理由を知る。",[307,654,655],{},"差別化できることを探す。",[13,657,658],{},"単純なコピーアプリでなく「ユーザーがこのアプリを使うメリット」を出せる様にします。上記で「案外無いんじゃないのかな？」と書きましたが、案外あったりします笑。車輪の再発明にならない様にまず落ち着いて、ググってみます。",[13,660,661],{},"RouteShareの場合、まずGoogle Map、Strava、Ride with GPSを調査しました。いくつかのアプリは有料機能の無料期間があったので、サブスク購入して調査しました。また、自分が知らないアプリがあるかもしれないため、「ルート　共有　アプリ」とか「ツーリング　おすすめ　アプリ」と素人気分になって調べたり、友人に聞き取りをおこないました。",[13,663,664],{},"競合調査の結果、一部のアプリには",[304,666,667,670,673,676],{},[307,668,669],{},"地図に情報入力ができる",[307,671,672],{},"記事を作成できる",[307,674,675],{},"ナビゲーション機能がある",[307,677,678],{},"自動トラッキング記録機能がある",[13,680,681],{},"といった考えていた機能とかぶるとこ、思いつかなかった機能がありました。各種サービスごとに",[304,683,684,687,690,693],{},[307,685,686],{},"特徴的な機能",[307,688,689],{},"ターゲット",[307,691,692],{},"何ができて、どんなユーザーのニーズを満たすか",[307,694,695],{},"何が足りないか",[13,697,698],{},"をリストアップしていきます。「何が足りないか」は「開発に至る経緯」で思った欲しい機能で比較すると良いです。そうすると",[304,700,701,704,707,710],{},[307,702,703],{},"Google Map は地図入力のUIと情報量は群を抜いているが、StravaやRide with GPSのような他のユーザーと情報を共有しにくい。コミュニティー機能がない。",[307,705,706],{},"Stravaはアスリート向けで、どちらかというとトレーニング記録サービスという感じ。有料機能でルート作成機能はあるが、一つのラインしか描画できない。",[307,708,709],{},"Ride with GPSは作りたい内容と似ていて、地図機能や記事作成機能がそれなりにある。しかしサイクリスト向けであり、一つのラインしか描画できない（無料の場合）。記事のUIが微妙。",[307,711,712],{},"YAMAPは登山者向け。トラッキング記録機能やオフライン地図保存がある。情報の共有機能もあるがリッチな入力は難しい。",[13,714,715],{},"などアプリごとの欠点・あった方がいいなと思うとこもありました。既存のサービスを調査したら次は、開発するプロジェクトをはっきりさせていきます。",[76,717,718],{"id":718},"エレベータピッチ",[283,720],{":src":721,":width":286,":center":287,":current":287},"'undraw_presentation_re_sxof.svg'",[13,723,724],{},"競合調査を行い意外と被っていたり、何を作ればいいかなどアイデアが曖昧な状態であることが多いです。アジャイルサムライである「全体像を捉える」を行います。特にエレベーターピッチと呼ばれる",[304,726,727,730,733,736,739,742,745],{},[307,728,729],{},"「潜在的なニーズを満たしたり、抱えている課題を解決したり」したい",[307,731,732],{},"「対象顧客」向けの",[307,734,735],{},"「プロダクト名」というプロダクトは",[307,737,738],{},"「プロダクトのカテゴリー」である。",[307,740,741],{},"これは「重要な利点、対価に見合う説得力のある理由」ができ、",[307,743,744],{},"「代替手段の最右翼」とは違って、",[307,746,747],{},"「差別化の決定的な特徴」が備わっている。",[13,749,750,751,754],{},"以上のテンプレートを使って個人開発で",[208,752,753],{},"作るプロダクトが具体的になんであり、誰のものなのかということ","をはっきりさせます。RouteShareでは以下の様になりました。",[304,756,757,760,763,766,769,772,775],{},[307,758,759],{},"「自身の旅程や訪れた道、場所の感想・写真を共有」したい",[307,761,762],{},"「旅行者、ドライバー、ライダー、サイクリスト、街歩き」向けの",[307,764,765],{},"「Route Share」というプロダクトは",[307,767,768],{},"「地図と記事を用いる地図型SNSサービス」である。",[307,770,771],{},"これは「旅程や地理情報の共有し、地域や場所、道の魅力を発信する」ことができ",[307,773,774],{},"「StravaとGoogle Map」とは違って",[307,776,777],{},"「地図上の描画とレポート機能による共有とコミュニティ機能」が備わっている",[13,779,780],{},"となりました。自分がサイクリストだったこともあり、ターゲットを限定的にしていましたが「旅行者、ドライバー、ライダー、サイクリスト、街歩き」など「ツーリスト」全体にターゲットを広げました。",[13,782,783],{},"他に自分がなぜ旅行が好きなのかを深掘りして、「地域や場所、道の魅力を発信する」という「個人の記録」にとどまらない使い方ができるサービスを作りたいという方向性が定まりました。",[785,786,787,790,793,796,799,810,813,819,827,832,837,842,862,867,872,877,882,885,888,892,896,899,902,906,909,912,915,918,930,933,936,939,942,944,947,950,954,957,960,963,966,969,972,975,978,1004,1007,1010,1013,1016,1019,1022,1025,1028,1031,1034,1037,1040,1043,1046,1049,1052,1055,1058,1062,1065,1068,1072,1075,1078,1081,1095,1098,1100,1103,1105,1108,1122,1125,1128,1131,1145,1148,1150,1159,1162,1165,1168,1172,1175,1178,1181,1184,1187,1190,1194,1197,1200,1203,1206,1209,1212,1215,1218,1222,1225,1228,1236,1239,1242,1245,1249,1252,1255,1262,1265,1276,1279,1283,1286,1289,1292,1295,1298,1302,1305,1308,1319,1322,1325,1328,1335],"sapn",{"id":494},[76,788,789],{"id":789},"パッケージリスト",[13,791,792],{},"大まかなプロダクトの方向性が定まり、次はパッケージリストというものを作ります。これは本の表紙の様なもので、１枚の紙にプロダクトのイメージ図、特徴機能、キャッチコピーを掲載します。ただこの中では特徴機能が重要な気がします。",[13,794,795],{},"この「特徴機能」は最初にいくつか候補を挙げておきます。それらの候補から最終的に３つに絞ってパッケージに載せます。しかしここで重要なのは「このプロダクトで何ができるのか」をはっきりさせることです。",[13,797,798],{},"この際、アジャイルサムライでは「フィーチャーでなく効能をつたえる」ことを重視しています。フィーチャーとは一言ですむ特徴や機能名のことです。RouteShareの場合、地図機能、記事機能、SNSサービスといった用語が当てはまります。しかしこれらの「特徴」や「機能名」を言ったとこでユーザーからしてみれば、「で、それらは一体何がいいの？」となっていまいます。これらの「特徴」や「機能名」でユーザーの",[304,800,801,804,807],{},[307,802,803],{},"どんなニーズを満たすのか",[307,805,806],{},"どんな役に立つことやメリットがあるのか",[307,808,809],{},"何ができるようになるのか",[13,811,812],{},"を具体的に言える様にしましょう。アジャイルサムライでは上記３つのことを「効能」と言っています。RouteShareでは以下の様になりました。",[814,815,816],"blockquote",{},[13,817,818],{},"地図にルートの描画、スポットの設置ができる。",[304,820,821,824],{},[307,822,823],{},"わかりやすいルートを作ることができる。どこの情報かわかりやすい。",[307,825,826],{},"地図でどこに何があるかを直ぐに把握できる。",[814,828,829],{},[13,830,831],{},"地図のルートスポットから記事にリンクをはれる。",[304,833,834],{},[307,835,836],{},"地図と記事の関連性がわかりやすいので、楽に内容を共有できる。",[814,838,839],{},[13,840,841],{},"地図＋記事の投稿を作成できる。",[304,843,844,847,850,853,856,859],{},[307,845,846],{},"自分が行った旅先の情報を他人に共有できる。",[307,848,849],{},"プランナーとして利用でき、仲間とルートや旅程を共有しやすい。",[307,851,852],{},"道路情報や気をつけることなど、実際に行かないとわからない様な詳細な情報を共有でき、取得できる。",[307,854,855],{},"自分たちの町などのおすすめの回り方を発信できる。",[307,857,858],{},"写真も投稿できるのでダイアリーとして、旅の思い出を残すことができる。",[307,860,861],{},"直感的に場所を把握することができる。",[814,863,864],{},[13,865,866],{},"設定したパスやスポットからどこに行ったかのデータを取得される",[304,868,869],{},[307,870,871],{},"検索で場所、ルートから投稿を検索できる様になる。自分がいきたいと思っている、知りたいと思っている場所の情報を地図から探すことができる。",[814,873,874],{},[13,875,876],{},"投稿にタグを貼ることができる。",[304,878,879],{},[307,880,881],{},"都道府県、地名、やりたいことから目的のルートを探ることができる。",[13,883,884],{},"まずは「〜ができる」「〜する」という特徴を書いたら、「それによってユーザーにとってどう役に立つのか」を箇条書きで書きます。",[13,886,887],{},"パッケージは作っても作らなくてもいいですが、作った方がやる気は上がる気がします笑。",[13,889,890],{},[568,891],{"id":500},[76,893,895],{"id":894},"やることやらないこと","やること、やらないこと",[13,897,898],{},"方向性が決まり、実装したい機能が定まってきたら選定を行いましょう。RouteShareも開発していくとわかってきた技術的難点やコストの問題で端折った機能がたくさんあります。個人開発ではスコープ管理が自由な分、「こーした方がユーザーにとっていいのでは..」と考えることが多くなります。やること、やらないことを決めないと実装したい機能が後からどんどん湧いて、リリースが先延ばしになってしまい、最終的に途中で頓挫することが多いです。",[13,900,901],{},"正直言うとそのサービスが需要があるか、ニーズにマッチしているかは市場に出して使ってみてもらわないと効果測定ができません。後々の設計や技術選定、開発を行いながら「やらないこと（あとでやる）」と「やること」を選定していくといいです。経験的に「やらないこと」に振れないかと第一に考えるとスコープが無限増殖しません。",[13,903,904],{},[568,905],{"id":506},[76,907,908],{"id":908},"収益化構想",[283,910],{":src":911,":width":286,":center":287,":current":287},"'undraw_investing_re_bov7.svg'",[13,913,914],{},"このサービスでは収益化を考えています。私自身は無料のサービスには限界があり、最終的には何らかの形で有料化・収益化することでより良いサービスになると考えています。使用ユーザーが増えることはその分、サーバスペックも要求されるようになりますし、当初のニーズに対する答え合わせもできるようになってきます。より安定的に、素早くビジネスとサービス品質を加速させるためにはマネタイズは重要になります。",[13,916,917],{},"RouteShareも一大プラットフォームになるべく、収益化の構想は考えています。ただし、正直言うとここは自分でも曖昧で「取らぬ狸の皮算用」をしているのでは？と感じているとこがあります。RouteShareでは以下の方法での収益化パターンを考えています。",[919,920,921,924,927],"ol",{},[307,922,923],{},"広告添付",[307,925,926],{},"有料機能、サブスク化",[307,928,929],{},"法人掲載枠を設ける",[931,932,923],"h5",{"id":923},[13,934,935],{},"Google Adsenseなどのサービスを利用して広告を添付します。シンプルで導入はしやすいです。しかし広告添付は収益化のためには非常に多くのユーザーが必要であり、また不安定です。",[931,937,926],{"id":938},"有料機能サブスク化",[13,940,941],{},"一部機能に制限をつけ利用したい場合は有料会員としてサブスクを求める方法です。使用しているユーザーや料金、収益状況が把握しやすく収益が安定しやすいです。しかし有料で買いたいほどのニーズの解決や無料枠との差別化が必要であり、収益は単価を多く取るか少なくするかによって必要なユーザー数に依存するようになります。",[931,943,929],{"id":929},[13,945,946],{},"私は最終的にはこの方法での収益化を目指しています。法人と契約して優先的に掲載できる枠を設けたり、法人のみが使用できる機能を提供、企画を立案してプロモーションを行うことです。サービスにそれなりにユーザーがいて、法人に対してそれなりの利益を提供するまでサービスの成熟と営業が必要なりますが、toCな収益形態よりも安定的で発展性のある収益化形態です。",[13,948,949],{},"収益化方法は色々とありますが、少なくともどのように収益を確保するかの構想は初期の設計段階でも考えておくといいです。",[13,951,952],{},[568,953],{"id":512},[76,955,956],{"id":956},"支出はシビアに感覚で判断しない",[13,958,959],{},"いきなり企画の段階でいうのも何ですが、個人の広報力やブランドがない状態でデプロイしても正直ユーザーは来てくれません。個人開発のツイートがバズってたくさん！というのは偶に見ますが非常に稀です。",[13,961,962],{},"正直大方のサービスは運営していき、少しずつユーザーを増やしていきます。サービスがいつバズって収益化まで繋がるかは「サービスがどれほどの期間運営しているか」に依存します。下手すると年単位になることもあります。",[13,964,965],{},"その時、支出の存在はリリース後の悩みの種になりますのでサーバ代は必ず計算して、いかにケチれるようにすることが重要です。",[13,967,968],{},"私の場合Laravelを使用するAPIサーバのためにVPSを新規に借りようとしましたが、計算しても月2000円は追加の出になるため、実は別のブログで運用しているレンタルサーバに導入しています笑",[13,970,971],{},"フロントに関してはGoogle App Engineを使用して必要な時に稼働するようにしました。とにかく支出はケチれるようにして、かかる費用は毎月監視するようにしましょう。",[76,973,974],{"id":974},"リスク",[13,976,977],{},"ここまではどんな機能を実装しようか、サービスがどうなるのかワクワクしながら進めたと思います。しかし機能を実装するで上にどんなリスクが生じるのかを考えましょう。実際に企画初期段階では以下のように考えていました。",[304,979,980,983,986,989,992,995,998,1001],{},[307,981,982],{},"ユーザーが本当に何を望んでいるかわからない",[307,984,985],{},"Stravaなどの強い競合からどうユーザーを引き込むか",[307,987,988],{},"最初の広報とユーザーに広めるか",[307,990,991],{},"ルートパスからの検索の実装方法",[307,993,994],{},"検索コスト",[307,996,997],{},"リッチテキストの実装",[307,999,1000],{},"Google API のリクエストコスト",[307,1002,1003],{},"本当に開発しきれるか",[13,1005,1006],{},"この時さまざまなリスクが思い浮かびますが、そのリスクが「自分が制御できるか」で対応すべきかを決めましょう。例えば「このサービスは受けるだろうか」「ユーザーのニーズをあてているか」は正直考えるだけ無駄なリスクです。なぜなら「その答えはユーザーのみが知っていて、そもそも市場に出さないとわからない」からです。もちろん競合調査などをして可能な限りリスクを下げることが必要ですが、自分がどれほどそのリスクに対して対策を取れるか、制御できるかを念頭にしておくことが大切です。",[13,1008,1009],{},"リスクをよく考えることで早い段階で課題を明らかにでき、プロジェクトが進んでから爆弾が爆発するのを防ぐことができます。あと気持ちがすっきりします笑",[76,1011,1012],{"id":1012},"プロジェクトの管理",[13,1014,1015],{},"プロジェクトの管理はGoogle ドキュメントとスプレッドシートで行いました。企画書などはドキュメントにまとめ、スコープ、実装機能表などをスプレッドシートで管理しました。",[13,1017,1018],{},"個人開発であればJiraやBacklogよりもスプレッドシートぐらいで十分です。チームでも2,3人ぐらいまでなら大丈夫そうです。これらの記録は後で見返したりする時に便利ですし、課題管理はプロジェクトがどれほど進んでいるかの指標になるので作成しておくといいです。",[13,1020,1021],{},"また設計に関しては基本的にスプレッドシート、図などはDiagrams.netを使用しました。",[26,1023,1024],{"id":1024},"設計",[283,1026],{":src":1027,":width":286,":center":287,":current":287},"'undraw_dev_productivity_re_fylf.svg'",[13,1029,1030],{},"企画・構想が決まったら設計を行います。ここからようやくエンジニアっぽいことをやっていきます。",[76,1032,1033],{"id":1033},"サイトマップと画面イメージを作成する",[13,1035,1036],{},"機能については企画の段階でまとめました。サービスではユーザーが画面上のUIを通じてデータの更新・閲覧を行います。すなわち「どんな画面が表示され、そこで何ができて、どう遷移するのか」を把握します。",[13,1038,1039],{},"いきなり画面図を書くのは大変なので最初はサイトマップというものを作成して「どんなページ（画面）」があれば良いのか？を決定します。webサービスの場合はURLのパスも決めてしましましょう。",[283,1041],{":src":1042,":center":287,":current":287},"'sitemap.png'",[13,1044,1045],{},"サイトマップは名称、パス、タイトル、用途を記述し、認証や特定のミドルウェア的な制御を行う場合は追加で記入しておきます。",[13,1047,1048],{},"サイトマップを作成したらワイヤーフレームを作成します。ワイヤーフレームはページにどんなパーツを表示させ、どんな要素（データなど）を表示するのかを整理することができます。フロント部分で表示する要素を整理することで、実際にどんなテーブル構成にすればいいかを知ることができるようになります。",[76,1050,1051],{"id":1051},"ワークフロー図を作る",[13,1053,1054],{},"次はワークフロー図を作成します。ここでいうワークフロー図はプログラム的な処理のフローです。例えばGoogle連携についてのフローは以下のような画像で表現しました。",[283,1056],{":src":1057,":center":287,":current":287},"'wf.png'",[76,1059,1061],{"id":1060},"er図を作る","ER図を作る",[13,1063,1064],{},"ER図にてテーブル設計を行います。フロント・バック内でのフローや要素を整理するとER図はすんなりとできることが多いです。",[283,1066],{":src":1067,":center":287,":current":287},"'er.png'",[13,1069,1070],{},[568,1071],{"id":518},[76,1073,1074],{"id":1074},"デザインを作る",[13,1076,1077],{},"エンジニアで一番大変なのはこのデザインの部分です。ワイヤーフレームをもとにして実際のデザインを作成します。私はAdobe XDを使用して画面ごとのデザイン、UI、パーツを作成しました。ここはFigmaでもXDでも大丈夫ですが、コンポーネントやレイヤー分けできるツールを使用した方がいいです。",[13,1079,1080],{},"デザインセンスがないと感じる場合",[304,1082,1083,1086,1089,1092],{},[307,1084,1085],{},"他のサイトを参考にする",[307,1087,1088],{},"デザインの4原則を守る",[307,1090,1091],{},"ブランドカラーを決める",[307,1093,1094],{},"CSSフレームワークを使用する",[13,1096,1097],{},"以上４点を意識します。",[931,1099,1085],{"id":1085},[13,1101,1102],{},"RouteShareはTwitter、Qiita、Stravaを参考にしてそれらを混ぜ込んだ形にしました。よく見ると似ている箇所があります。もちろん完全にパクるのは良くないですが、デザイン・UIの参考として作成した方が、少なくともダサいデザインにはならないと思います。",[931,1104,1088],{"id":1088},[13,1106,1107],{},"これを守るだけでなんかいい感じになります。デザインの4原則とは",[919,1109,1110,1113,1116,1119],{},[307,1111,1112],{},"近接",[307,1114,1115],{},"整列",[307,1117,1118],{},"強弱",[307,1120,1121],{},"反復",[13,1123,1124],{},"の4点です。",[283,1126],{":src":1127,":center":287,":current":287},"'list.png'",[13,1129,1130],{},"例えば上記は登録された投稿一覧ですが、",[304,1132,1133,1136,1139,1142],{},[307,1134,1135],{},"タイトルと投稿場所、サマリーとユーザー情報はある程度マージンをとる。",[307,1137,1138],{},"それぞれの要素のパディングを同じにして開始位置を揃える。",[307,1140,1141],{},"背景色を利用して強弱、領域の区別をできるようにする",[307,1143,1144],{},"下のボタンなど似ている要素は似たレイアウトと感じで表示する",[13,1146,1147],{},"この4点を意識していくと結構いい感じになります。",[931,1149,1091],{"id":1091},[13,1151,1152,1153,1158],{},"ブランドを決めます。RouteShareは道路の新型青看板の青色をもとにしています。その色を起点にして",[261,1154,1157],{"href":1155,"rel":1156},"https:\u002F\u002Fwww.colorhexa.com\u002F",[265],"ColorHexa","などで輝度方向のパターンの色を使用するといいです。基本的にはブランドカラーはこのようにし決定して、色々とカラフルにしない方がいいです。しかしUIではキャンセル、確認といった箇所では赤・緑・黄色などを使用してしても問題ありません。",[283,1160],{":src":1161,":center":287,":current":287},"'bar.png'",[931,1163,1094],{"id":1164},"cssフレームワークを使用する",[13,1166,1167],{},"デザインとCSS・UI系の工数を省きたい場合はCSSフレームワークを使用した方がいいです。RouteShareはBootstrap-vueを使用しています。フレームワークは好きなものを使用して大丈夫ですが、上記のブランドカラーなどを適用したりプロパティーを変更できるフレームワークを使用した方がいいです。",[13,1169,1170],{},[568,1171],{"id":524},[76,1173,1174],{"id":1174},"技術選定",[13,1176,1177],{},"設計やデザインを作成して技術選定を行います。リリースを重視し、個人開発であればあなたの得意なスタックで大丈夫です。正直いうと、ユーザーにとってみればバックエンドに何を使っていようが、動いていればまずいいのです。あとはあなたの開発効率の問題になります。個人開発ではモチベーションや初版リリースまで辿り着けるかが第一の関門となっています。",[13,1179,1180],{},"そのため技術的な勉強という要素を入れてしまうと、途中で挫折しかねません。もちろん選定したスタックによってはコストがかかってしまうものもあります。しかしその中でもコストと開発難易度がちょうど良くなるスタックを選択した方がいいです。",[13,1182,1183],{},"一番最初のことろはサーバーレス環境で全部おさめてやりたいとも思いましたが、デプロイの設定やFireBaseなどは初めてだったこともありやめました。LaravelとフロントエンドはVue.jsという構成も考えましたが、フロントの構築は１つのフレームワークで行った方が自分的にはかなり楽だったので、LaravelをバックにフロントはNuxt.jsという構成を取りました。",[13,1185,1186],{},"APIサーバとフロントサーバを用意する必要がありましたが、Google App engineの無料枠を利用できる様にしたり、APIサーバーも構成を工夫することで費用を抑えることができました。",[13,1188,1189],{},"１番の悩みの種はGoogle Map APIの課金ですが解決方法は見つけ、まずはリリースを優先するために地図表示はGoogle Mapにまずは任せることにしました。",[13,1191,1192],{},[568,1193],{"id":554},[76,1195,1196],{"id":1196},"外部サービスの利用時は規約をしっかり理解する",[13,1198,1199],{},"もし外部サービスのAPIなどを使用する時は規約を読んでおきましょう。公開して、収益を求めるサービスなので規約違反はNGです。",[13,1201,1202],{},"RouteShareの場合はGoogle Map APIで規約違反をしてしまう機能を開発しそうになった時がありました。RouteShareは地図にセットしたラインやスポットを計算して、周辺地図の画像をサムネイルとして設定できる機能があります。↓",[283,1204],{":src":1205,":width":286,":center":287,":current":287},"'sample_card.png'",[13,1207,1208],{},"このとき当初はGoogle Map static image apiを使用しており、バックエンドで画像のURLにリクエストしてレスポンスの画像をこちらのサーバに置いておくという方法をとっていました。しかしこの方法は規約違反であり、必ずブラウザからstatic image apiのURLを記載することとの規約がありました。",[13,1210,1211],{},"現在は地図サービスのAPIを別途契約して、タイル画像を取得して生成するようにしました。知らぬ間に規約違反することもあるので、規約は難しいですが一読しておくことをお勧めします。",[26,1213,1214],{"id":1214},"開発",[13,1216,1217],{},"設計、技術選定、デザインがある程度完成したら早速開発を始めましょう。正直のこの開発時期が一番、挫折しやすいと思います。ここでは開発時に大切なことを書いておく程度にします。",[13,1219,1220],{},[568,1221],{"id":530},[76,1223,1224],{"id":1224},"とにかく作り上げること",[13,1226,1227],{},"個人開発の完成は自身のモチベに依存するため",[304,1229,1230,1233],{},[307,1231,1232],{},"Better than Nothing",[307,1234,1235],{},"Done is better than perfect",[13,1237,1238],{},"の気持ちを常に持っていた方がいいです。開発をしている際に一部の設計を見直したり、機能を追加・変更することがあると思いますがスケジュールとスコープがオーバーしないようにしましょう。",[13,1240,1241],{},"私も開発をしている時に「こうした方がいいのでは？」「もっと最適な方法があるのでは？」と思って思うように開発が進まないことがありました。",[13,1243,1244],{},"もちろん期限内に最善を尽くすの良いですが、完璧を求めようとするとズルズルと起源と対応すべきコストが増大します。途中で色々面倒になったり、仕事が忙しくなり放置..ということになります。今の自分が持っている技術スタックの最善を尽くして開発を進めてください。",[13,1246,1247],{},[568,1248],{"id":536},[76,1250,1251],{"id":1251},"保守性とテスト性は重要",[13,1253,1254],{},"作り上げることは重要ですが、品質を犠牲にするわけではありません。リリースはゴールではなく、マイルストーンであり経過点です。むしろサービスはリリースしてから始まりますので、リリース後の保守や改善のことも考えなければなりません。",[13,1256,1257,1258,1261],{},"その際に",[562,1259,1260],{},"作り上げることを言い訳に","自分ですらコードの内容を把握できないものや、保守性の低いものはリリース後のモチベを下げる要員になります。",[13,1263,1264],{},"継続的な開発のために",[304,1266,1267,1270,1273],{},[307,1268,1269],{},"保守性を高める記述を心がける",[307,1271,1272],{},"可能な限りテストコードを書いて、改善コードをデプロイしやすくする",[307,1274,1275],{},"バージョン管理は必ず導入する",[13,1277,1278],{},"以上のことはやっておいて損はありません。",[13,1280,1281],{},[568,1282],{"id":542},[76,1284,1285],{"id":1285},"毎日コツコツやること",[13,1287,1288],{},"あとはもう時間をかけるのみです。個人開発は睡眠時間を削ったり土日を使うことで捻出しました。仕事が終わったら直ぐに個人開発の環境を立ち上げておきます。",[13,1290,1291],{},"まとまった休みにやるよりも、毎日ちょっとずつの方が結果的にリリース達成の確率は上がります。",[13,1293,1294],{},"ここはもう、何とか時間を作ってください。心の中に「リリースまで進み続けるんだ！これはお前が始めた個人開発だろ？」と問いかけるようにしてください。",[13,1296,1297],{},"そしてリリース日やマイルストーンなど明確な目標期限を定めてください。個人開発は管理が自由な分、開発時間などを伸ばしがちです。期限を定めることでダラダラと続けることを防げますし、スコープが増大することも防げます。",[13,1299,1300],{},[568,1301],{"id":548},[26,1303,1304],{"id":1304},"リリース構成",[13,1306,1307],{},"開発進み完成してきたらリリースの準備を行います。リリース方法は使用している開発構成によってまちまちですが、基本的にはgitを用いてリリースを管理できるようにしたほうがいです。可能な限り、手動での反映を少なくできるようにした方がいいです。",[13,1309,1310,1311,1314,1315,1318],{},"RouteShareではgithub上で",[150,1312,1313],{},"release",",",[150,1316,1317],{},"test","といったブランチを作成して、本番環境もそれらのブランチからプルするようにしています。フロントエンドはGoogle App engineを使用しており、ビルドからサーバへのデプロイはgithub actionsで自動的に行えるようにしています。",[13,1320,1321],{},"ドメインの設定やSSLなどやることが多いですが、この辺はリリース時に1回で済むので頑張って調べてください。（私もそのうち書きます..）",[13,1323,1324],{},"今後の機能リリースではできる限り本番へのデプロイが楽になるような構成を最初に心掛けた方がいいです。",[57,1326,1327],{"id":1327},"個人開発のススメ",[13,1329,1330,1331,1334],{},"色々端折ってしまった所がありますが、内容は以上となります。本記事では開発したRouteShareの詳細はお伝えしませんでしたが、また違う記事で機能について開発面で細かく解説した記事でも書こうと思います。ぜひ旅行好きな方は",[261,1332,275],{"href":273,"rel":1333},[265],"を使ってみてください！",[13,1336,1337],{},"デプロイから1ヶ月たち、まだユーザー数やトラフィックも少ないですが今後は運用に注力したり、リリースまでに間に合わなかった機能を実装しようと思います。エンジニアであればこのように製品を自ら開発してビジネスを始めることができます。ディベロッパー的な視点や技術だけでなく、経営や運営、企画の力も付きます。総合的な力をつけたいエンジニアはサービスの大小あれど、色々な人に使ってもらえるアプリケーションを開発してみるといいと思います！",{"title":152,"searchDepth":213,"depth":213,"links":1339},[1340,1341,1349,1378],{"id":296,"depth":4,"text":296},{"id":344,"depth":4,"text":345,"children":1342},[1343,1344],{"id":348,"depth":213,"text":348},{"id":385,"depth":213,"text":385,"children":1345},[1346,1347,1348],{"id":391,"depth":224,"text":391},{"id":419,"depth":224,"text":419},{"id":436,"depth":224,"text":436},{"id":462,"depth":4,"text":462,"children":1350},[1351,1352,1364,1372,1377],{"id":465,"depth":213,"text":465},{"id":557,"depth":213,"text":558,"children":1353},[1354,1355,1356,1357,1358,1359,1360,1361,1362,1363],{"id":572,"depth":224,"text":572},{"id":622,"depth":224,"text":622},{"id":635,"depth":224,"text":635},{"id":718,"depth":224,"text":718},{"id":789,"depth":224,"text":789},{"id":894,"depth":224,"text":895},{"id":908,"depth":224,"text":908},{"id":956,"depth":224,"text":956},{"id":974,"depth":224,"text":974},{"id":1012,"depth":224,"text":1012},{"id":1024,"depth":213,"text":1024,"children":1365},[1366,1367,1368,1369,1370,1371],{"id":1033,"depth":224,"text":1033},{"id":1051,"depth":224,"text":1051},{"id":1060,"depth":224,"text":1061},{"id":1074,"depth":224,"text":1074},{"id":1174,"depth":224,"text":1174},{"id":1196,"depth":224,"text":1196},{"id":1214,"depth":213,"text":1214,"children":1373},[1374,1375,1376],{"id":1224,"depth":224,"text":1224},{"id":1251,"depth":224,"text":1251},{"id":1285,"depth":224,"text":1285},{"id":1304,"depth":213,"text":1304},{"id":1327,"depth":4,"text":1327},[1380],"learning","2022-12-11","ユーザー投稿型webサービスの個人開発をリリースするまでの道のり",{},"\u002Farticles\u002Fprivate-develop-released",{"title":254,"description":1382},"articles\u002Fprivate-develop-released",[248],"private-develop-released\u002Fthumbnail.jpeg","nztFX4zrPEZhku2rJ4fzSsXPLzjLH78Rqjadot2TAvk",1780987150331]