こんにちは！クフルダモノーツのYoshito Kimura(k1mu)です！
先日、音楽理論の学習や楽曲制作の補助を目的としたウェブアプリ「O-TO」を公開しました。
20年以上音楽をやってきた中で「こんなのあったら良いな」と思う機能を盛り込みました。
今回は、この「O-TO」をプログラミングを独学して作るまでの軌跡をまとめてみました。
※記事の中で触れている技術的な内容は僕の主観によるものです。
必ずしも正しくない場合があります。
片手間の独学で3年以上かかった
このウェブアプリ「O-TO」自体は、半月くらいで作りました。
ただ、プログラミングをやりたいと思ってから独学で3年以上かかりました。
プログラミングをはじめたきっかけは、「プログラミングをやっている人の言動を全く理解できないのが嫌だったから」です。笑
…当時は「日本語なのに、ここまで理解できないものがあるのか」と思うほど理解できなかったんですよ。笑
あとは、「プログラミングできたら便利そう」みたいな気持ちもありました。
もちろん、片手間＋独学なので、集中して誰かに教わっていたらもっと上達が早かったかもしれません。
具体的な勉強内容
①プロゲートをやった。
プログラミング学習サービス「Progate」をやりました。
最初の取っ掛かりとして、とても良いサービスだと思います。
具体的には、「HTML & CSS」と「Python」と「Ruby」あたりを全部やってあとはつまみ食い。
大体レベルは200ちょいになるまでやりました。
ただ、これだけでは「プログラミングできる」とはあんまり思えませんでした。
②YouTubeの動画を見た。
色々なプログラミング関係の動画を見ました。
勉強し始めた頃に比べて、最近は分かりやすい解説動画をアップしてくれている人が多くなってきた印象があります。
参考になったオススメのチャンネルをいくつか紹介します。
※追記
最近見た中で一番分かりやすかったのはプログラミングチュートリアルさん。↓
「このチャンネルが勉強し始めたときにあればもっとラクに勉強できた...」と思えるほど分かりやすいです。
③分からなければ、分かるまでひたすらググった。
分からないことを根気よく調べ続ける執念が大切だと思いました。
ただ、今でもよく心は折れそうにはなります。笑
④自分用の専門用語集を作った。
勉強し始めてしばらくは、そもそも自分が「何が分からないか」が分かりませんでした。
今思い返すと、プログラミングに限らず専門分野の勉強あるあるかもしれません。笑
この問題の打開策は、「プログラミング関係の文章は日本語で書かれていても、専門用語の知識が無いと解読不能の暗号だと考えろ」だと思います。
結局、何かを難しい/分からないと感じる原因の多くは専門用語の意味を知らないからだと思います。
専門知識の解説文の理解には、専門用語の知識が不可欠です。
この当たり前の事実を、教科書やネットメディアなどの流動食の如く噛み砕かれた文章をたくさん読んでいるうちに忘れて「日本語で書かれた文章なら予備知識が無くてもそれなりに読める」と勘違いしていた気がします。
むしろ、日本語だから「表面上は読めそうに感じる罠」に嵌ったのかもしれません。
そこで、途中からは分からない専門用語をひたすら収集して、１つずつ理解して、情報を整理する時間を意識して作るようにしました。
⑤簡単なものを作って、応用してみた。
とりあえず簡単なものを作ってみると、「ここがもっとこうなれば良いのに…」みたいに感じる部分が出てきます。
そんな部分を深堀りしていく過程が上達に繋がった…気がします。
プログラミングの勉強中で感じた5つの壁
①物事を抽象的に扱う分野なので理解しにくい。
プログラミングは物事を抽象的に扱う分野なので、パッと見て理解できない場合が多いです。(少なくとも僕は)
これに対しては、「具体的なアウトプット行為」が有効だと思います。
数学の公式を覚えても、実際の問題を解かなければ身に付かないのと同じです。
とにかく、めちゃくちゃ簡単なコードでも、自分で動かしてみると定着具合が全然違う気がします。
②最初は勉強して得られる結果がしょぼく感じる。
普段使っているアプリやサービスは、超絶強いプログラマーが集団で作っているものです。
それに対して、プログラミングを勉強して最初にするのは、画面(コンソール)に
Hello World
や
1＋2の計算結果
を表示させる行為。
最初は、あまりの落差に「え…？しょぼくね…？…ていうかコレに何の意味が？」と感じました。
もちろん、今振り返ると必要な勉強だったとは思いますけど。
③専門用語の壁がある。
上の方でも書いた、自分用の専門用語集の内容に繋がるものです。
プログラミングに限らず、どんな分野の勉強でも「専門用語」の壁を越えるまでは結構キツイ気がします。
僕もまだちゃんと乗り越えられていない気がします。笑
④英語を使う必要がある。
専門用語だけではなく
- プログラムは英語で書く
- エラーやコマンドは英語で表示される
- プログラミングに関する情報は英語の方が豊富
等の理由から、英語を使う必要があります。
最近はDeepL翻訳や、Google翻訳の精度が上がって昔よりはラクになったとはいえ…やっぱり日本語に比べて読むのに時間がかかるのはストレスです。
ただ、プログラミング界隈(?)からは
「会話じゃないし、翻訳もあるから英語に泣き言を言うのは甘え。」
「そもそも、英語くらい使えて当然。」
みたいな雰囲気は感じます。(´;ω;｀)
⑤何を勉強すれば良いのかよく分からない。
これは正直、今でもまだよく分かりません。
というのも、基礎的なコンピューターサイエンスの部分はともかく、プログラミング界隈の技術の流行り廃りは激しく、数年で「界隈で推されている技術」が入れ替わる場合も珍しくないみたいだからです。
たとえば、jQueryなんかは僕が勉強を始めてすぐの頃は「やっといた方が良い」みたいな空気だった気がします。しかし、最近は「やらなくていい。むしろやるな」的な空気です。
したがって、常に新しい技術の情報を収集・挑戦する姿勢の必要性を感じます。
また、流行り廃りが激しいが故に
- 本当の初心者が一から学べる体系化された資料がほぼない or 見つけづらい。
- 流行り廃りに付いていける人は、全く分からない人向けに丁寧に解説する文章をほぼ書かない。
みたいな傾向がある気がします。
…「教科書」のありがたみが分かります。笑
今なら最初はこうやって勉強する
とりあえず、YouTubeで「Python 初心者」と検索して出てきた動画の内容を真似をしながらPythonを動かしてみます。
対話型開発環境のGoogle Colaboratoryは、ブラウザ上で動かせるので、色々なソフトなどをインストールしなくてもGoogleアカウントがあれば今すぐ使えます。
個人的には、キノコードさんの動画は、分かりやすいと思います。
それから、プロゲートなどを使ってHTMLとCSSの基本的な仕組みを理解します。
また、SQLや、Linuxの知識は色々な分野で使うらしく、勉強しといた方が良いとよく聞きます。
「O-TO」の制作に使った技術
IDE（コードを書くツール）は、Visual Studio Codeを使いました。
見た目
基本的にHTMLに直書きしています。
ただ、各ページで共通する内容（タイトルやヘッダーなど）は、直書きすると変更が大変なので、Vue（JavaScriptフレームワーク）でコンポーネントを作って読み込む形にしています。
見た目の調整やレスポンシブ対応は、大半をBootstrap（CSSフレームワーク）で行っています。
…「Bootstrapに頼るより、ちゃんとCSSを書いた方が良い」とネット上で見ました。
一方で「Bootstrapのグリッドシステムは、CSSがちゃんと書けても便利」だともネット上で見ました。
今回はBootstrapに頼りました。笑
※追記
結局、後からCSSで書き直した部分も多くあります。笑
計算や処理
音名を切り替えたり計算したりする処理の部分は、全てJavaScriptで書いています。
最終的に全部で2500行を越えるスクリプトになってしまいました。
(もちろん、多分もっと簡潔に書ける部分もあると思います。)
音名の切り替え処理には剰余演算を使っているのですが、元々Pythonからプログラミングを勉強し始めて、プログラミング言語ごとに剰余演算の計算結果が違うのを知らなくてしばらく悩みました。
思いっきりWikipediaに書いてあるのには後で気付きました。笑）
公開方法
サイトの公開は、Firebaseのホスティング機能を利用しています。
ドメインは、KHUFRUDAMO NOTESのオフィシャルサイトのサブドメインを割り当てました。
URLの正規化（URLの後ろに付く「html」を表示させないとかの処理）について調べると、.htaccessファイルを作る方法がヒットしました。
ただ、さらに調べると「.htaccessファイルを作る方法は良い方法ではない」みたいな記事もヒットしました。
最終的には、Firebaseのドキュメントを読むと、Firebaseは「firebase.json」ファイルを書き換えてURLの正規化を行うっぽいので、そうしました。