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