個人開発を始めるために必要なもの
初めて個人開発をするとき、最初に高性能なパソコンや有料サービスをそろえる必要はありません。小さなWebサイトやアプリであれば、普段使っているパソコンとインターネット接続から始められます。
必要なのは、画面を見る道具、ファイルを置く場所、作業内容を記録する場所です。この記事では、それぞれが何のために必要なのかを順番に説明します。
最初に用意するもの
最初の個人開発では、次の五つを用意します。
パソコン
Webブラウザ
コードを書く場所、またはAI開発ツール
作品専用のフォルダ
作業メモ
スマートフォンだけで作れるサービスもありますが、複数のファイルを確認したり、エラーを読んだりする作業にはパソコンのほうが向いています。Windows、macOS、Linuxのどれでも構いません。
1. パソコン
最初は、現在使っているパソコンで十分です。特別な部品や大きな画面が必要になるのは、動画編集、3D制作、大規模なAI処理など、負荷の高い作業をする場合です。
まず、次の操作ができることを確認します。
インターネットへ接続できる
アプリケーションをインストールできる
ファイルとフォルダを作成できる
コピー、貼り付け、名前の変更ができる
これらの操作に慣れていない場合は、個人開発を始める前に何度か練習します。コードを書くことより、作成したファイルがどこにあるか分かることのほうが、最初は重要です。
2. Webブラウザ
Webブラウザとは、Webサイトを見るためのアプリケーションです。普段インターネットを見るときに使っているChrome、Edge、Firefox、Safariなどが該当します。
個人開発では、ブラウザを完成した画面を見るためにも使います。作ったページを開き、文字が読めるか、ボタンを押せるか、入力した内容が表示されるかを確認します。
ブラウザは古いままにせず、更新してから使います。最初は普段使っているものが一つあれば作業を始められます。
3. コードを書く場所、またはAI開発ツール
Webサイトやアプリは、コンピューターへの指示を書いたファイルからできています。その指示がコードです。
自分でコードを書く場合は、コードエディターという専用のアプリケーションを使います。コードエディターには、文字を色分けしたり、書き間違いの場所を示したりする機能があります。
AIを使って作る場合は、文章で依頼できるAI開発ツールを使います。ブラウザ上で使うものと、パソコンへインストールするものがあります。どちらを選んでも、最初に確認する点は同じです。
自分のパソコンで利用できるか
無料で試せる範囲と、有料になる条件が分かるか
作成したファイルを自分で確認できるか
分からない操作を一段階ずつ質問できるか
最初から複数のツールを契約する必要はありません。一つを選び、画面を一つ作るところまで使ってから、足りないものがあるか判断します。
4. 作品専用のフォルダ
フォルダは、作品に使うファイルをまとめて置く箱のようなものです。デスクトップや書類フォルダなど、自分で見つけやすい場所に作ります。
フォルダ名は、半角英数字とハイフンで付けると、多くの開発ツールで扱いやすくなります。読書記録アプリであれば、次のような名前にできます。
reading-log
フォルダの中には、その作品に関係するファイルだけを置きます。画像、メモ、AIが作成したコードを別々の場所へ保存すると、どれが新しいファイルか分からなくなります。
フォルダを作ったら、実際に開き、場所を確認します。画面上部などに表示されるフォルダの場所を、作業メモへ控えておくと安心です。
5. 作業メモ
作業メモには、今日行ったことと、次に行うことを書きます。専門的な管理ツールは必要ありません。紙のノートや、普段使っているメモアプリで十分です。
最初は、次の三項目だけを残します。
今日できたこと：題名を入力する画面を開けた
現在困っていること：追加ボタンを押しても一覧に表示されない
次に行うこと：表示されない原因をAIへ質問する
作業を中断しても、メモを見れば続きから始められます。エラーが出た場合は、表示された文章を省略せず記録します。
最初は用意しなくてよいもの
個人開発の記事を読むと、さまざまなサービスや専門用語が出てきます。しかし、最初の画面を作る前にすべて準備する必要はありません。
次のものは、作品が動いてから考えられます。
独自ドメインは専用のWebアドレス、サーバーは作ったものをインターネット上に置く場所です。どちらも、他の人へ公開するときに必要になる場合があります。自分のパソコンで動作を確かめる段階では、まだ契約しなくても構いません。
作る方法を一つ選ぶ
準備ができたら、どの方法で作るかを一つ選びます。
AIへ文章で依頼して作る
作りたい画面と操作を文章で伝え、AIにファイルを作成してもらう方法です。コードを知らなくても始めやすい一方で、作られたものが正しく動くかは自分で確認する必要があります。
コードエディターで学びながら作る
HTML、CSS、JavaScriptなどを少しずつ書く方法です。HTMLは画面の内容、CSSは見た目、JavaScriptはボタンなどの動きを担当します。最初は時間がかかりますが、どのファイルが何をしているか理解しやすくなります。
ブラウザ上の制作サービスを使う
部品を選んだり、短いコードを書いたりして、ブラウザ内で作品を作る方法です。インストール作業を減らせますが、使える機能やファイルの取り出し方はサービスごとに異なります。
どの方法を選んでも、個人開発としての価値は変わりません。最初の目的は、難しい方法を選ぶことではなく、小さな作品を一つ完成させることです。
準備ができたか確認する
作り始める前に、次の項目を確認します。
パソコンをインターネットへ接続できる
Webブラウザを開ける
コードエディターまたはAI開発ツールを使える
作品専用のフォルダを作った
フォルダをもう一度見つけて開ける
作業メモを書く場所を決めた
最初に作る機能を一つ決めた
すべて確認できたら、準備は完了です。次に行う作業は、アカウントを増やすことや機材を購入することではありません。作りたい画面を一つ決め、実際に表示することです。
MDNの初心者向け学習資料でも、最初の環境準備として、基本的なパソコン操作、ブラウザ、コードエディター、ファイルの扱いから説明しています。また、最初のWebサイトを作る教材では、初めから大きなサイトを目指さず、小さく始めることが勧められています。
準備段階で分からない言葉があっても、すべて暗記する必要はありません。必要になった言葉を一つずつ調べながら進めます。