Zenn
🌊

【2日目】個人開発に必要な前提知識。

2023/11/04に公開
初心者
tech

https://zenn.dev/yama227/articles/1df8c84bd36685

プログラミングについて

まずは、プログラミングについてを学びます。ネットで検索しつつ、あらゆる情報をここにまとめていきます。

先輩に聞ける環境

プログラミングに関して、先輩に聞ける環境はたくさん用意されています。

  • teratail（テラテイル）
  • Qiita
  • Stack Overflow（スタック・オーバーフロー）

言語について

プログラミング言語はたくさんありますので、それぞれの特徴を理解していきます。

Python

Pythonで作られているサービスはたくさんあります。

  • YouTube
  • Evernote
  • Instagram
  • AI

Ruby

Rubyで作られているサービスもたくさんあります。

  • クックパッド
  • グノシー
  • 食べログ
  • GitHub（これ有名ですよね）
  • Airbnb（UIはこれを参考にしたい）

Java

Javaで作られているサービスは以下があります。

  • スマホアプリ
  • Twitter

JavaScript

JavaScriptを使えば、Webサービスに動きをつけることができます。

  • DUB-FIRE
  • ARCHIKON

C言語

C言語はブラウザやOSを開発するのに向いています。（いずれは検索エンジンを作りたい）

  • Google Chrome
  • Safari
  • MacOS
  • Linux

プログラミングに関する用語

ライブラリ

ログイン機能やメール送信機能をまとめてライブラリといい、既に先駆者が用意してくれていることが多い。

フレームワーク

投稿を保存→取得→表示させるなどの一連機能をフレームワークといい、ライブラリと比べて制約性が高い。

Webアプリについて

Webアプリのそもそもの仕組みはこんな感じです。

  • クライアントサイド：ユーザーがコンテンツを要求する先
  • サーバーサイド：要求されたコンテンツを格納している先

この2つの領域から構成されているのがWebアプリです。

Webアプリ開発の手順

  1. 企画作成
  2. スケッチ
  3. ワイヤーフレーム
  4. モックアップ
  5. リサーチ

企画作成

どういうWebアプリを開発したいのかをここで考えます。

スケッチ

ワイヤーフレームを作成すると同時にスケッチは完成するので、ここでガッチリ固めなくても大丈夫です。

ワイヤーフレーム

機能の骨組みであるワイヤーフレームを作成します。

どんなデザインになるのかを視覚的に把握します。

モックアップ

モックアップはワイヤーフレームに肉付けをしたもので、以下のようなツールが活用されます。

  • Adobe XD
  • POP
  • Prott
  • Flinto
  • Cacoo
  • Moqups
  • Pencil

リサーチ

最後に、モックアップを見て「この言語が必要になるな」「このスキルは必須だな」と判断します。判断を自分だけで行えない場合は、QAサイトなどを活用します。

個人開発ができるようになったら

個人開発ができるようになったら、まずはWebアプリをトレースすることから始めます。いきなりオリジナルアプリを開発するのは難しいので、すでにあるWebアプリをトレースする練習が必要です。

ローカル環境の構築へ

基礎知識はある程度理解ができたので、ローカル環境の構築へ移ります。（なんとなくしか理解できていないので、ここも頑張って学びます）

ローカル環境開発に必要な要素

  • PC
  • テキストエディタ
  • ブラウザ

PCとブラウザは理解していますが、テキストエディタが怪しいです。代表的なテキストエディタとしては「Visual Studio Code」があることは知ってますが、それ以上のことは理解できていません。

① 「Visual Studio Code」のインストール

兎にも角にも、「Visual Studio Code」がなければスタートしませんから「Visual Studio Code」をPCへインストールします。

https://code.visualstudio.com/

インストール後、日本語化は忘れずにやっておきます。

② ブラウザにページを表示させる

まずは、HTMLファイルを格納するためのディレクトリ（フォルダ）の作成が必要です。

  • HTML
  • CSS

それぞれ格納し、Chromeへ表示させることに成功しました。

学ぶ言語決め

「Visual Studio Code」をインストールでき、ブラウザへ反映させる方法も理解したので、次はいよいよどの言語を学ぶのかを決めていきます。

作りたいもの

基本的にれとるときゃりーさんが公開されていた年間1000万PV達成までに作ったWebサービスやアプリ36個を、すべて振り返るのような個人開発系プロダクトになります。

例）

https://twitter.com/retoruto_carry/status/942365038425157632

こういうサービスの開発になんの言語が使われているのかをザーッと統計とっていきましたところ、PHPがメインだということがわかりました。ただ、PHPを学ぶためにはHTMLやCSS、JavaScriptなど基本的な言語を学ぶ必要があるとのことで、根気強く学習を進めていきます。（もしくはRuby）

Discussion