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

ブログ

みなさんこんにちは!クフルダモノーツYoshito Kimura(k1mu)です!

 

先日、音楽理論の学習や楽曲制作の補助を目的としたウェブアプリ「O-TO」を公開しました。

O-TO
O-TOは音楽理論の学習や楽曲制作の補助を目的としたサービスです。コードの構成音や、音符の長さなどの情報が分かりやすく理解できます。

 

20年以上音楽をやっている僕が「こんなのあったら良いな」と思う機能を盛り込んだウェブアプリです。

プログラミングの技術的に優れているかは分かりません。
ただ、機能的にはめちゃくちゃ便利だと思います。

今回は、プログラミングを独学してこの「O-TO」を作るまでの軌跡をまとめてみました。

では、いってみよう!(๑˃̵ᴗ˂̵)و

※記事の中で触れている技術的な内容は僕の主観によるものです必ずしも正しくない場合があります。

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

このウェブアプリ「O-TO」自体は、半月くらいで作りました。
ただ、プログラミングをやりたいと思ってからここまで来るのには3年以上かかりました。

 

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

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

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

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

具体的な勉強内容

プロゲートをやった。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

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

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

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

YouTubeの動画を見た。

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

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

キノコード / プログラミング学習チャンネル
👀どんなチャンネル? プログラミングやIT用語の動画を作っています。 動画は、「わかりやすい説明」だけじゃなく「美しく伝える」を目指して頑張っています。 💡なぜやるのか? 「より多くの人に、より質の高い学習の機会を」というコンセプトとでチャンネルを運営しています。 というのも、私自身、司法試験に失敗して27歳で初めて...
たにぐち まことのともすたチャンネル
学ぶ。をちゃんとをコーポレートテーマに、プログラミングを学びたい人を応援しています。YouTube動画の他、Udemyでの動画教材販売、書籍等の執筆や販売を行っています。
セイト先生のWeb・IT塾
🔽自己紹介 こんにちは! Web開発会社でVPoEやってます。日本とフィリピンを行き来してます。 プログラミング講座、Web/IT業界の話を発信しています。:) 🔽タグ #JavaScript #エンジニア採用 #オフショア開発 #IT業界 #Web業界 #自社開発 #受託開発 #プログラミング講座 #駆け出し...

最近は分かりやすい解説動画をアップしてくれている人が多くなってきた印象があります。

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

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

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

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

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

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

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

 

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

 

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

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

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

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

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

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

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

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

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

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

数学の公式を覚えても、実際の問題を解かなければ身に付かないのと同じです。

とにかくめちゃくちゃ簡単なコードでも、自分で動かしてみるとレベルアップできる気がします。

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

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

それに対して、プログラミングを勉強して最初にするのは、画面(コンソール)に「Hello World」や「1+2の計算結果」を表示させる行為。

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

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

③専門用語の壁がある。

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

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

不思議の国のSE用語 - Qiita
不思議の国 SEが住んでいるところ、そこは不思議な不思議なお国柄です。 新たな国民として移住してきた人、特産物のシステムを買いに来た人など色々な人がこの国には存在します。 しかしこの国で話される言葉は 独特 です。 ぱっと聞...

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

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

専門用語だけではなく

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

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

最近はDeepL翻訳Google翻訳の精度が上がって昔よりはラクになったとはいえ…やっぱり日本語に比べて読むのに時間がかかるのはストレスです。

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

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

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

プログラミングでよく使う英単語のまとめ【随時更新】 - Qiita
プログラミングでよく使う英単語のまとめ【随時更新】 随時追加、整理していきます。 名前をつけるときには、名詞、動詞の違い、複数形、過去形などに注意しましょう。 オブジェクト指向では、クラス名は名詞、メソッドは動詞とします。 ...

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

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

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

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

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

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

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

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

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

とりあえず、YouTubeで「Python 初心者」と検索して出てきた動画の内容を真似をしながら
Google Colaboratory上でPythonを動かしてみます。

対話型開発環境のGoogle Colaboratoryはブラウザ上で動かせるので、色々なソフトなどをインストールしなくてもGoogleアカウントがあれば今すぐ使えます。

個人的には、キノコードさんPython超入門コースは分かりやすいと思います。

Python超入門コース 合併版|Pythonの超基本的な部分をたった1時間で学べます【プログラミング初心者向け入門講座】

それから、プロゲートなどを使ってHTMLCSSの基本的な仕組みを理解します。

また、SQLLinuxは色々な分野で使うらしく、勉強しといた方が良いとよく聞きます。

「O-TO」の制作に使った技術

コードを書くのには、Visual Studio Codeを使いました。

Shift + Alt + F」でコードのインデントなどを良い感じに補正してくれるショートカットを最近知りました。便利です。

見た目

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

ただ、各ページで共通する内容(タイトルやヘッダーなど)は、直書きすると変更が大変なので、Vue(JavaScriptフレームワーク)でコンポーネントを作って読み込む形にしています。

見た目の調整やレスポンシブ対応は、大半をBootstrap(CSSフレームワーク)で行っています。

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

今回はBootstrapに頼りました。笑

計算や処理

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

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

コードはGitHubにあります。↓

Yoshito924/O-TO
「O-TO(Ongaku Tools)」は、音楽理論の学習や楽曲制作の補助を目的としたウェブサービスです。→ - Yoshito924/O-TO

音名の切り替え処理には剰余演算を使っているのですが、元々Pythonからプログラミングを勉強し始めたので、プログラミング言語ごとに剰余演算の計算結果が違うのを知らなくてしばらく悩みました。

(思いっきりWikipediaに書いてあるのには後で気づいた)

公開方法

サイトの公開は、Firebaseのホスティング機能を利用しています。
ドメインは、このKHUFRUDAMO NOTESのオフィシャルサイトのサブドメインを割り当てました。

 

URLの正規化(URLの後ろに付く「html」を表示させないとかの処理)について調べると、「.htaccess」ファイルを作る方法がヒットしました。
ただ、さらに調べると「.htaccess」ファイルを作る方法は良い方法ではないみたいな記事もヒットしました。

.htaccessとは? - Qiita
.htaccess と言う単語自体はちょくちょく聞いたりしてたんですが、 そもそも .htaccess 自体が何なのか、何を指しているのかよくわからなかったので、 それに関しての備忘録です。 .htaccess とは .htac...

最終的には、Firebaseのドキュメントを読むとFirebaseは「firebase.json」ファイルを書き換えてURLの正規化を行うっぽいので、そうしました。

ホスティング動作を構成する  |  Firebase

今後の課題など

・「O-TO」は、HTMLCSSJavaScriptなどフロントエンドの技術だけで出来たので、サーバーサイド周りはまだよく分かっていない。そこらへんを少しずつ勉強していきたい。

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

・次に何か作るときは、Nuxt.jsなどウェブアプリケーションフレームワークを使ってみたい。

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

タイトルとURLをコピーしました