プログラミング何も分からない初心者が、独学でウェブアプリを作るまでの軌跡 まとめ




こんにちは！[クフルダモノーツ](https://khufrudamonotes.com/biography)の[Yoshito Kimura(k1mu)](https://yoshito.khufrudamonotes.com/)です！



先日、音楽理論の学習や楽曲制作の補助を目的としたウェブアプリ「**[O-TO](https://o-to.khufrudamonotes.com/)**」を公開しました。

https://o-to.khufrudamonotes.com/

20年以上音楽をやってきた中で「**こんなのあったら良いな**」と思う機能を盛り込みました。

今回は、この「**[O-TO](https://o-to.khufrudamonotes.com/)**」をプログラミングを独学して作るまでの軌跡をまとめてみました。

---

<span class="fz-12px">※記事の中で触れている技術的な内容は僕の主観によるものです</span><span class="fz-12px">。
</span><span class="fz-12px">必ずしも正しくない場合があります。</span>


# 片手間の独学で3年以上かかった



このウェブアプリ「**[O-TO](https://o-to.khufrudamonotes.com/)**」自体は、**半月くらい**で作りました。

ただ、プログラミングをやりたいと思ってから独学で**3年以上**かかりました。

プログラミングをはじめたきっかけは、「**プログラミングをやっている人の言動を全く理解できないのが嫌だったから**」です。笑

https://twitter.com/k1mu0419/status/980812692456812544?s=20

…当時は「**日本語なのに、ここまで理解できないものがあるのか**」と思うほど理解できなかったんですよ。笑

あとは、「**プログラミングできたら便利そう**」みたいな気持ちもありました。

もちろん、**片手間＋独学**なので、集中して誰かに教わっていたらもっと上達が早かったかもしれません。



# 具体的な勉強内容


## ①プロゲートをやった。

https://prog-8.com/

プログラミング学習サービス「**Progate**」をやりました。
最初の取っ掛かりとして、とても良いサービスだと思います。

具体的には、「**HTML &amp; CSS**」と「**Python**」と「**Ruby**」あたりを全部やってあとはつまみ食い。
大体レベルは**200ちょい**になるまでやりました。


ただ、これだけでは「プログラミングできる」とはあんまり思えませんでした。


## ②YouTubeの動画を見た。


色々なプログラミング関係の動画を見ました。

勉強し始めた頃に比べて、最近は分かりやすい解説動画をアップしてくれている人が多くなってきた印象があります。

参考になったオススメのチャンネルをいくつか紹介します。

https://www.youtube.com/channel/UCGlgXjYVoHLD86TQQ799WIw

https://www.youtube.com/channel/UCphTq6mefx_15CjD35qgXgA

https://www.youtube.com/channel/UC8IWoNfegB72Q2nT9GJy2zQ

※追記
最近見た中で一番分かりやすかったのはプログラミングチュートリアルさん。↓
「このチャンネルが勉強し始めたときにあればもっとラクに勉強できた...」と思えるほど分かりやすいです。

https://www.youtube.com/channel/UCNTxclE0N4qsUuirssL_D8w

## ③分からなければ、分かるまでひたすらググった。

分からないことを**根気よく調べ続ける執念**が大切だと思いました。

ただ、今でもよく心は折れそうにはなります。笑


## ④自分用の専門用語集を作った。

勉強し始めてしばらくは、そもそも**自分が「何が分からないか」が分かりませんでした。**

今思い返すと、プログラミングに限らず専門分野の勉強あるあるかもしれません。笑


この問題の打開策は、「**プログラミング関係の文章は日本語で書かれていても、専門用語の知識が無いと解読不能の暗号だと考えろ**」だと思います。


結局、何かを**難しい/分からない**と感じる原因の多くは**専門用語の意味を知らない**からだと思います。
**専門知識の解説文**の理解には、**専門用語の知識**が不可欠です。

この当たり前の事実を、教科書やネットメディアなどの**流動食の如く噛み砕かれた文章**をたくさん読んでいるうちに忘れて「**日本語で書かれた文章なら予備知識が無くてもそれなりに読める**」と勘違いしていた気がします。

むしろ、日本語だから「**表面上は読めそうに感じる罠**」に嵌ったのかもしれません。


そこで、途中からは**分からない専門用語**をひたすら収集して、１つずつ理解して、**情報を整理する時間**を意識して作るようにしました。

https://khufrudamonotes.com/python-noteboook

## ⑤簡単なものを作って、応用してみた。

とりあえず簡単なものを作ってみると、「**ここがもっとこうなれば良いのに…**」みたいに感じる部分が出てきます。

そんな部分を深堀りしていく過程が上達に繋がった…気がします。

https://khufrudamonotes.com/programming-study-record-2


# プログラミングの勉強中で感じた5つの壁


## ①物事を抽象的に扱う分野なので理解しにくい。


プログラミングは物事を抽象的に扱う分野なので、パッと見て理解できない場合が多いです。(少なくとも僕は)

これに対しては、「**具体的なアウトプット行為**」が有効だと思います。


数学の公式を覚えても、実際の問題を解かなければ身に付かないのと同じです。
とにかく、めちゃくちゃ簡単なコードでも、**自分で動かしてみる**と定着具合が全然違う気がします。


## ②最初は勉強して得られる結果がしょぼく感じる。</h3>


普段使っているアプリやサービスは、超絶強いプログラマーが集団で作っているものです。

それに対して、プログラミングを勉強して最初にするのは、画面(コンソール)に

>Hello World

や

>1＋2の計算結果

を表示させる行為。


最初は、あまりの落差に「**え…？しょぼくね…？…ていうかコレに何の意味が？**」と感じました。

もちろん、今振り返ると必要な勉強だったとは思いますけど。


## ③専門用語の壁がある。



上の方でも書いた、**自分用の専門用語集**の内容に繋がるものです。

プログラミングに限らず、どんな分野の勉強でも「**専門用語**」の壁を越えるまでは結構キツイ気がします。

https://qiita.com/t_nakayama0714/items/478a8ed3a9ae143ad854



僕もまだちゃんと乗り越えられていない気がします。笑


## ④英語を使う必要がある。

専門用語だけではなく

- プログラムは英語で書く
- エラーやコマンドは英語で表示される
- プログラミングに関する情報は英語の方が豊富

等の理由から、英語を使う必要があります。

最近は[DeepL翻訳](https://www.deepl.com/translator)や、[Google翻訳](https://translate.google.co.jp/?hl=ja)の精度が上がって昔よりはラクになったとはいえ…やっぱり日本語に比べて読むのに時間がかかるのはストレスです。

ただ、プログラミング界隈(?)からは

「**会話じゃないし、翻訳もあるから英語に泣き言を言うのは甘え。**」
「**そもそも、英語くらい使えて当然。**」

みたいな雰囲気は感じます。(´;ω;｀)

https://qiita.com/Ted-HM/items/7dde25dcffae4cdc7923


## ⑤何を勉強すれば良いのかよく分からない。

これは正直、今でもまだよく分かりません。

というのも、基礎的なコンピューターサイエンスの部分はともかく、プログラミング界隈の**技術の流行り廃り**は激しく、**数年で「界隈で推されている技術」が入れ替わる場合も珍しくない**みたいだからです。

たとえば、**jQuery**なんかは僕が勉強を始めてすぐの頃は「やっといた方が良い」みたいな空気だった気がします。しかし、最近は「やらなくていい。むしろやるな」的な空気です。

したがって、常に**新しい技術の情報を収集・挑戦する姿勢**の必要性を感じます。


また、流行り廃りが激しいが故に

- 本当の初心者が一から学べる体系化された資料がほぼない or 見つけづらい。
- 流行り廃りに付いていける人は、全く分からない人向けに丁寧に解説する文章をほぼ書かない。

みたいな傾向がある気がします。
…「**教科書**」のありがたみが分かります。笑


# 今なら最初はこうやって勉強する


とりあえず、**YouTube**で「**Python 初心者**」と検索して出てきた動画の内容を真似をしながら[Python](https://colab.research.google.com/notebooks/welcome.ipynb?hl=ja)を動かしてみます。



対話型開発環境の[Google Colaboratory](https://colab.research.google.com/notebooks/welcome.ipynb?hl=ja)は、ブラウザ上で動かせるので、色々なソフトなどをインストールしなくてもGoogleアカウントがあれば今すぐ使えます。


個人的には、[キノコードさん](https://www.youtube.com/channel/UCGlgXjYVoHLD86TQQ799WIw)の動画は、分かりやすいと思います。

https://youtu.be/HyU3XL2F9GE


それから、[プロゲート](https://prog-8.com/)などを使って**HTML**と**CSS**の基本的な仕組みを理解します。


また、**SQL**や、**Linux**の知識は色々な分野で使うらしく、勉強しといた方が良いとよく聞きます。



# 「**[O-TO](https://o-to.khufrudamonotes.com/)**」の制作に使った技術


**IDE**（コードを書くツール）は、[**Visual Studio Code**](https://azure.microsoft.com/ja-jp/products/visual-studio-code)を使いました。

## 見た目



基本的に**HTML**に直書きしています。


ただ、各ページで共通する内容（タイトルやヘッダーなど）は、直書きすると変更が大変なので、[**Vue**（JavaScriptフレームワーク）](https://jp.vuejs.org/index.html)で<strong>コンポーネント</strong>を作って読み込む形にしています。


見た目の調整やレスポンシブ対応は、大半を[**Bootstrap**（CSSフレームワーク）](https://getbootstrap.jp/)で行っています。

…「**[Bootstrap](https://getbootstrap.jp/)**に頼るより、ちゃんと**CSS**を書いた方が良い」とネット上で見ました。
一方で「[**Bootstrap**](https://getbootstrap.jp/)のグリッドシステムは、**CSS**がちゃんと書けても便利」だともネット上で見ました。


今回は[**Bootstrap**](https://getbootstrap.jp/)に頼りました。笑


※追記
結局、後からCSSで書き直した部分も多くあります。笑


## 計算や処理

音名を切り替えたり計算したりする処理の部分は、全て**JavaScript**で書いています。

最終的に全部で<strong>2500行</strong>を越えるスクリプトになってしまいました。
(もちろん、多分もっと簡潔に書ける部分もあると思います。)


音名の切り替え処理には<strong>剰余演算</strong>を使っているのですが、元々**Python**からプログラミングを勉強し始めて、[プログラミング言語ごとに剰余演算の計算結果が違う](https://ja.wikipedia.org/wiki/%E5%89%B0%E4%BD%99%E6%BC%94%E7%AE%97#:~:text=%E5%89%B0%E4%BD%99%E6%BC%94%E7%AE%97%EF%BC%88%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%AD%E3%81%A8%E3%82%82%E5%91%BC%E3%81%B6,%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%BC%94%E7%AE%97%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82)のを知らなくてしばらく悩みました。


思いっきり[Wikipedia](https://ja.wikipedia.org/wiki/%E5%89%B0%E4%BD%99%E6%BC%94%E7%AE%97#:~:text=%E5%89%B0%E4%BD%99%E6%BC%94%E7%AE%97%EF%BC%88%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%AD%E3%81%A8%E3%82%82%E5%91%BC%E3%81%B6,%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%BC%94%E7%AE%97%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82)に書いてあるのには後で気付きました。笑）

## 公開方法



サイトの公開は、[Firebase](https://firebase.google.com/?hl=ja)のホスティング機能を利用しています。
ドメインは、[KHUFRUDAMO NOTESのオフィシャルサイト](https://khufrudamonotes.com/)のサブドメインを割り当てました。

**URLの正規化**（URLの後ろに付く「html」を表示させないとかの処理）について調べると、**.htaccess**ファイルを作る方法がヒットしました。

ただ、さらに調べると「**.htaccess**ファイルを作る方法は良い方法ではない」みたいな記事もヒットしました。


https://qiita.com/sunnyG/items/7e5bd6e8dc9b04c9978e


最終的には、[Firebaseのドキュメント](https://firebase.google.com/docs/hosting/full-config?hl=ja)を読むと、[Firebase](https://firebase.google.com/?hl=ja)は「**firebase.json**」ファイルを書き換えてURLの正規化を行うっぽいので、そうしました。


https://firebase.google.com/docs/hosting/full-config?hl=ja




# 今後の課題など

- 「**[O-TO](https://o-to.khufrudamonotes.com/)**」は、**HTML**と**CSS**と**JavaScript**などフロントエンドの技術(?)だけで作ったので、バックエンド周りの技術はまだよく分かっていない。そこらへんを少しずつ勉強していきたい。

- 達成感はあるけど、正直やっとスタートラインに立ったような気もする。

- 次に何か作るときは、[Next.js](https://nextjs.org/)などウェブアプリケーションフレームワークを使ってみたい。

- 気軽にプログラミングの話ができる友達が欲しい。