Techtrain の mission をやる上でのアドバイス資料です。 このミッションは実際に使われるサービスを 作りきる ことで力を付けようというのが狙いです。 そこでサービス開発自体の難易度が下げれる便利なツールをまとめました。
個人開発であることを前提としており金銭的なリソースにも着目し、紹介するものは基本的に無料のものです。 無料ですが高機能なものが多く出ているので初めのとっかかりには十分だと思います。 このミッションのために自分でも簡単なサービスを作ってみました。 yatoeっていう、時給を要望する求人画像を作れ + シェアできるサービスなのですが、開発費用は無料で開発期間も 2 日程度です。 また自分は UI 以外はほとんど開発しておらず、認証や永続化周りは外部のツールを使っています。
個人開発は 技術的な挑戦がしやすくまた運用を見越した設計を要求されるため、開発力を伸ばす題材としては適しています。 ただ個人でやる以上は先輩や友人の力は借りることができず、行き詰まってしまうこともあるでしょう。 それを避けれるように、技術選定においては easy なものを選んだ方が良く、ここで紹介するツールも開発が easy になるものばかりです。 とはいえツールの使い方という点で詰まることはあるでしょうし、「このツールでこんなことできる？」といった疑問も出るでしょう。 その場合は私たちでバックアップするので面談を入れてください。
作るものはなんでもいいです。 作りきってユーザーの反応を見て改善していくというプロセスが経験できるならなんでもいいです。 大事なのは開発と改善です。 改善のための Tracking できる仕組みを考えて開発し、要望を難易度と効果を見比べながら改善していくと、自然と開発力が身についていくでしょう。 なにより改善することが開発を継続するためのモチベーションになります。
例えば静的な HTML1 枚でもいいです。 いま見ているこの資料も静的な HTML です。(JavaScript から生成しているので実装は HTML とは言えませんが) この資料にも Analytics 用の Tracker が埋め込まれていて、ちゃんとユーザーが読んでいるのかと言った分析が可能となっています。
このように 個人開発は開発リソースの制約を受けるのでクオリティに疑問を抱くかもしれません。 しかし実際には個人開発で生まれた面白いサービスもあるので紹介します。 こういったものも個人開発で生まれています。
他にも 個人開発 でググってみたらいろいろ出てきます。
基本的には Firebase を使えばいいと思います。 認証・データーベース・ホスティング・分析ダッシュボードがデフォルトで付いてきます。
このミッションのお手本プロジェクトとして作ったyatoe も Firebase 構成で作っています。（デプロイは一時的に他のサービスを使っていますが、Firebase でも可能です）
Firebase を使うと何ができるかわからないという場合はソースコードはお見せできるので、気になる方は面談の際にお渡しします。
Firebase Hosting はデベロッパー向けの、本番環境レベルのウェブ コンテンツ ホスティングです。1 つのコマンドですばやくウェブアプリをデプロイすることができ、静的コンテンツと動的コンテンツの両方をグローバル CDN（コンテンツ配信ネットワーク）に配信できます。
FYI: https://firebase.google.com/docs/hosting?hl=ja
Firebase Hosting の利点は 他の Firebase 資産との組み合わせが楽なところです。Analysis の埋め込みも一行足すだけです。 デメリットは 会員登録やツールのダウンロードが必要であることです。またデプロイは CD パイプラインを作らない限りは手作業です。
Amazon Simple Storage Service (Amazon S3) は、業界をリードするスケーラビリティ、データ可用性、セキュリティ、およびパフォーマンスを提供するオブジェクトストレージサービスです。つまり、あらゆる規模や業界のお客様が、ウェブサイト、モバイルアプリケーション、バックアップおよび復元、アーカイブ、エンタープライズアプリケーション、IoT デバイス、ビッグデータ分析など、広範にわたるユースケースのデータを容量に関係なく、保存して保護することができます。Amazon S3 では使いやすい管理機能を使用するため、データを整理して、細かく調整されたアクセス制御を設定することで、特定のビジネスや組織、コンプライアンスの要件を満たすことができます。
FYI: https://aws.amazon.com/jp/s3/
静的サイトのホスティングであればただのオブジェクトストレージでも可能です。 なので、AWS S3 でも代用できます。 バケットを作ってページをドラッグアンドドロップしたらそれでページが作れます。 デメリットは SPA のデプロイには向いていないことです。
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
FYI: https://help.github.com/ja/github/working-with-github-pages/about-github-pages
GitHub Pages の利点は GitHub の UI を操作するだけでページを公開できるところです。 デメリットは React のようにビルドしてから静的ページを生成する場合はデプロイのためのパイプラインを作る必要がある点です。
Netlify is an all-in-one platform for automating modern web projects. Replace your hosting infrastructure, continuous integration, and deployment pipeline with a single workflow. Integrate dynamic functionality like serverless functions, user authentication, and form handling as your projects grow.
FYI: https://docs.netlify.com/?_ga=2.81279191.1730394392.1587707749-118420540.1587707749
Netlify の利点は GitHub との連携と npm scripts を実行できることです。つまりビルドのパイプラインに介入することができます。 デメリットは CI/CD といったことに馴染みがないと始めるのが難しい点です。GitHub や npm の知識がないと使うことが難しいと思います。
Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.
now の利点は、サーバーサイドレンダリングができることです。そのため Next.js をそのまま動かすことができます。（作ってる会社も同じ） デメリットは環境変数の取り扱いが面倒だったり、GitHub 連携したときのビルドステップの制御が制限されていたり、SSR サーバーのログが見れないことです。
デメリットも多いのですが、完全に無料で SSR するなら今現在はこれしか選択肢がないと思います。
AWS Amplify は、セキュアでスケーラブルなモバイルアプリケーションとウェブアプリケーションを構築するための開発プラットフォームです。ユーザーの認証、データとユーザーのメタデータのセキュアな保存、データへの選択的なアクセスの許可、機械学習の統合、アプリケーションのメトリクスの分析、サーバー側コードの実行するといった作業を容易にします。Amplify は、バージョンコントロール、コードのテスト、実稼働環境へのデプロイといったモバイルアプリケーションの開発ワークフロー全体をカバーしています。
FYI: https://aws.amazon.com/jp/amplify/
Amplify の利点は GitHub 連携が可能で、CICD のパイプラインを自由に組むことができる点です。 デメリットは使いすぎるとちょっとだけ請求が来るかもしれない点です。また CICD に慣れるための学習コストもかかります。
データベースは完全に無料で使おうとするとほとんど選択肢はないのですが、一応あるにはあるので紹介します。
Cloud Firestore は、Firebase と Google Cloud Platform からのモバイル、ウェブ、サーバー開発に対応した、柔軟でスケーラブルなデータベースです。
FYI: https://firebase.google.com/docs/firestore?hl=ja
Firestore の利点は 無料の割に高機能なところです。 デメリットは階層型 DB なので慣れるための学習コストがかかる点です。つまり SQL が叩けません。
MongoDB Atlas is the global cloud database service for modern applications. Deploy fully managed MongoDB across AWS, Azure, or GCP.
FYI: https://www.mongodb.com/cloud/atlas
MongoDB Atlas の利点は 無料枠がありフルマネージドな点です。 デメリットは SQL が使えない点です。これも学習コストがかかります。また無料枠はかなり小さいです。
（使ったことがないので詳しくないです）
「無料で使える SQL 叩ける DB ないの」って思うかもしれませんが、Azure にはあるらしいです。
FYI: https://www.publickey1.jp/blog/20/azure_cosmos_dbfree_tier5gb.html
Firebase Authentication には、バックエンド サービス、使いやすい SDK、アプリでのユーザー認証に使用できる UI ライブラリが用意されています。Firebase Authentication では、パスワード、電話番号、一般的なフェデレーション ID プロバイダ（Google、Facebook、Twitter）などを使用した認証を行うことができます。Firebase Authentication は他の Firebase サービスと緊密に統合されており、OAuth 2.0 や OpenID Connect などの業界標準を使用しているため、カスタム バックエンドと簡単に統合できます。
完全なドロップイン認証ソリューションとして FirebaseUI を使用するか、Firebase Authentication SDK を使って 1 つまたは複数のログイン方法を手動でアプリに統合できるため実装コストは低いです。 ただし認証の実装を簡単にすると、データを Firebase に預けることが前提となります。（このデータはこのユーザーしか見れないといったルールを Firebase で管理するため） もちろん AWS とかに置いてるサーバーの認証に使うこともできますが、その場合は Firebase Admin といった別のライブラリが必要となり実装難易度は上がります。
Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications.
FYI: https://auth0.com/docs/getting-started/overview
Firebase と違って、Auth-0 はバックエンドで使うことがメインであり Firebase ほどの手軽さはありませんが、認証にまつわる便利な機能がたくさんあります。 Firebase にない機能も多いので、Firebase に頼れないなら開発が前提になるならこちらを選択してもいいでしょう。
デザインもある程度ツールで作れます。 ぼくはデザインが全くできないのでこういうツールに頼っています。 流行ったらデザインを 0 から考えたらいいと思っていてそれまではこういうツールに頼るといいでしょう。
Favicon とか Icon に使います。
色の組み合わせって難しいですよね。 自分もよく「なんかおかしいよな」と思うもなにがおかしいかわからなくてずっともやもやしています。 そういうときにこういった配色ツールを使っています。
画像やイラストがあるかないかでページの華やかさは全然違います。 自分で書いたり作るのは相当難易度高いのでフリー素材を使っています。 とはいえ「この画像どこかでみたぞ」とはなるので、ちょっぴりチープ感は出るかもしれません。 その場合は画像の上に HTML 要素を重ねたりして誤魔化したりすると良いでしょう。 また使い過ぎには注意しましょう。
この辺を読むといいみたいな話はよく聞きます
が、正直なところ俺もわからんというのが本音で、個人開発ではデザインを自分で作らず全部 CSS FW に任せています。
マテリアルデザイン（英語: Material Design）は、Google が提唱したデザインシステム（設計体系）の一種[1]、および、それを実現する開発技術や手法、デザイン、試みなどの総称である。
FYI: https://material.io/design
CSS, React, Vue 用のライブラリが配布されている
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
FYI: https://getbootstrap.com/
一番有名（良い意味・悪い意味）な CSSFW かと。ドキュメントが豊富。
Bulma is a free, open source CSS framework based on Flexbox and used by more than 200,000 developers.
FYI: https://bulma.io/
後発の CSSFW なので、完成度が高いです。
React 前提になりますが、コンポーネントライブラリになっているのもあり、これは本当に組み合わせるだけでそれっぽくなるので便利です。
Atlassian's official UI library, built according to the Atlassian Design Guidelines.
FYI: https://atlaskit.atlassian.com/
Confulence や JIRA を作ってる Atlassian のコンポーネントライブラリ。使うだけで JIRA っぽい UI になる。
Build accessible React apps & websites with speed
後発のコンポーネントライブラリで、拡張のしやすさなど完成度が高い
A design system for enterprise-level products. Create an efficient and enjoyable work experience.
FYI: https://ant.design/
プロダクトやサービスを作ることを前提に作られたコンポーネント集です。 様々なユースケースを想定して作られており、細かいパーツまで揃っているのでとりあえず悩んだときはこれを使っています。
いまはそもそもコード書かずにプロダクトを作ることもできます。 そういった開発手法は No Code とも言われています。 No Code で作られたサービスも存在しており、開発工数を下げる上ではとても良い選択肢になるでしょう。
FYI: https://codelearn.jp/articles/nocode-product
コードを書かずに、Web サイト制作を完結。これからはデザインの後のコーディング作業や、サーバーのセットアップは必要ありません。STUDIO でデザインした画面は、瞬時にコードに変換されそのまま公開が可能です
高機能なうえ日本語ドキュメントが豊富です。（というか日本のプロダクト）
テンプレートの完成度も高い。
Break the code barrier. Build better business websites, faster. Without coding.
FYI: https://webflow.com/
Studio と同じく、完成度高く静的ページや CMS を作れる。デプロイも不要。
一応無料プランがある。
Adalo is a platform that makes creating apps as easy as putting together a slide deck. What Wordpress, Wix, and Squarespace have done for websites, Adalo does for apps.
FYI: https://www.adalo.com/our-story
ドラッグアンドドロップでアプリが作れる。 無料版だと PWA 版しか作れないが課金すれば iOS/Android にも配信できる。
Create an app from a Google Sheet in five minutes, for free.
FYI: https://www.glideapps.com/
Google Spread Sheet を DB にして、GUI でアプリを作れる。 PWA でアプリとして配布できる。
Bubble’s drag-and-drop editor makes design and development easy so you can focus on building the best product.
FYI: https://bubble.is/
No Code のプラットフォームとして使える。プラグインが豊富で決済や他サービスの連携といったことができる。 ちょっと手の込んだことを No Code でやれる。
まあ楽しくやりましょう！