先日、音楽理論の学習や楽曲制作の補助を目的としたウェブアプリ「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 初心者」と検索して出てきた動画の内容を真似をしながら
Google Colaboratory上でPythonを動かしてみます。
対話型開発環境のGoogle Colaboratoryはブラウザ上で動かせるので、色々なソフトなどをインストールしなくてもGoogleアカウントがあれば今すぐ使えます。
個人的には、キノコードさんのPython超入門コースは分かりやすいと思います。
それから、プロゲートなどを使ってHTMLとCSSの基本的な仕組みを理解します。
また、SQL、Linuxは色々な分野で使うらしく、勉強しといた方が良いとよく聞きます。
「O-TO」の制作に使った技術
コードを書くのには、Visual Studio Codeを使いました。
「Shift + Alt + F」でコードのインデントなどを良い感じに補正してくれるショートカットを最近知りました。便利です。
見た目
基本的にHTMLに直書きしています。
ただ、各ページで共通する内容(タイトルやヘッダーなど)は、直書きすると変更が大変なので、Vue(JavaScriptフレームワーク)でコンポーネントを作って読み込む形にしています。
見た目の調整やレスポンシブ対応は、大半をBootstrap(CSSフレームワーク)で行っています。
…「Bootstrapに頼るより、ちゃんとCSSを書いた方が良い」とネット上で見ました。
一方で「BootstrapのグリッドシステムはCSSがちゃんと書けても便利」だともネット上で見ました。
今回はBootstrapに頼りました。笑
計算や処理
音名を切り替えたり計算したりする処理の部分は、全てJavaScriptで書いています。
最終的に全部で2500行を超えるスクリプトになってしまいました。
(もちろん、多分もっと簡潔に書ける部分もあると思います。)
コードはGitHubにあります。↓
音名の切り替え処理には剰余演算を使っているのですが、元々Pythonからプログラミングを勉強し始めたので、プログラミング言語ごとに剰余演算の計算結果が違うのを知らなくてしばらく悩みました。
(思いっきりWikipediaに書いてあるのには後で気づいた)
公開方法
サイトの公開は、Firebaseのホスティング機能を利用しています。
ドメインは、このKHUFRUDAMO NOTESのオフィシャルサイトのサブドメインを割り当てました。
URLの正規化(URLの後ろに付く「html」を表示させないとかの処理)について調べると、「.htaccess」ファイルを作る方法がヒットしました。
ただ、さらに調べると「.htaccess」ファイルを作る方法は良い方法ではないみたいな記事もヒットしました。
最終的には、Firebaseのドキュメントを読むとFirebaseは「firebase.json」ファイルを書き換えてURLの正規化を行うっぽいので、そうしました。
今後の課題など
・「O-TO」は、HTMLとCSSとJavaScriptなどフロントエンドの技術だけで出来たので、サーバーサイド周りはまだよく分かっていない。そこらへんを少しずつ勉強していきたい。
・達成感はあるけど、正直やっとスタートラインに立ったような気もする。
・次に何か作るときは、Nuxt.jsなどウェブアプリケーションフレームワークを使ってみたい。
・気軽にプログラミングの話ができる友達が欲しい。
