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

ブログ
当サイトの記事には、アフィリエイトリンクを含むものがあります。
アフィリエイトリンクは、ユーザー(あなた)がリンク経由で商品を購入すると、広告主などからサイトの運営者(わたし)に報酬が支払われる仕組みです。ユーザー側(あなた)に金銭的な利益や損失は発生しません。
リンク先の商品はわたしが実際に「良い」と思ったものであり、当サイトの記事の内容は広告主からの影響を受けていません。
何かご不明な点がございましたら、お手数をおかけしますがContactページよりお知らせください。

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

O-TO【音楽理論ウェブアプリ】
音楽理論の学習や、作曲・編曲を補助するツール(ウェブアプリ)を作りました。全てのツールは、自分自身が音楽を20年以上やってきた経験から「あったら便利」だと思うものです。

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

プログラミングの技術的に優れているかは分かりません。

ただ、機能的にはめちゃくちゃ便利だと思います。

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

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

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

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

このウェブアプリ「O-TO」自体は、半月くらいで作りました。

ただ、プログラミングをやりたいと思ってからここまで来るのには3年以上かかりました。

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

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

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

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

具体的な勉強内容

プロゲートをやった。

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

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

具体的には、「HTML & CSS」と「Python」と「Ruby」あたりを全部やってあとはつまみ食い。

レベルは大体200ちょいまでやりました。

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

YouTubeの動画を見た。

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

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

キノコード / プログラミング学習チャンネル
■どんなチャンネル?Python学習、プログラミングやIT用語の解説動画を配信しています。ITスキルアップやPython入門から実践まで幅広く学習できます!動画は、図解をたくさん引用し「わかりやすい説明」を目指しています。■なぜやるのか?「...
たにぐち まことのともすたチャンネル
学ぶ。をちゃんとをコーポレートテーマに、プログラミング・クリエイティブを学びたい人を応援しています。YouTube動画の他、Udemyでの動画教材販売、書籍等の執筆や販売を行っています。【お仕事のお問い合わせ】tomosta@funmake...
セイト先生のWeb・ITエンジニア転職ラボ
Web開発やエンジニアのキャリア開発事業を行っています。お仕事のご依頼がもしあれば、合同会社BugFixまでお問い合わせいただけると嬉しいです!

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

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

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

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

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

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

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

結局、何かを「難しい/分からない」と感じる原因の大半は「専門用語の意味を知らない」からです。

専門知識の解説文の理解には、専門用語の知識が不可欠です。

しかし、普段ネットメディアなどの流動食の如く噛み砕かれた文章を多く読んでいると「日本語なら予備知識が無くてもそれなりに読める」と勘違いしていました。

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

そこで、途中からは分からない専門用語を収集して、情報を整理する時間を意識して作りはじめました。

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

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

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

プログラミング学習を挫折させる要因だと思われるもの

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

数学の公式を覚えても、実際の問題を解かなければ身に付かないのと同じで、「抽象的な物事」を理解するには、「具体的なアウトプット行為」が有効だと思います。

たとえば、説明を聞くだけで「なるほど。分かったかも。」と思えるくらい簡単な内容でも、自分でコードを書いてみないと実際には身に付きにくいです。(少なくとも僕は)

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

最初は成果がしょぼく感じる

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

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

普段見ているものとあまりにかけ離れているので「え…?しょぼくね…?…ていうかコレに何の意味が?」と感じました。(大切な内容なんですけどね)

作りたいものを作るために、どうすれば良いかよく分からない。

これは正直、未だよく分からないときがあります。笑

とりあえず、ドットインストールのミニゲーム的なアプリケーションを作るレッスンをやるのがオススメです。

なぜなら、基礎的な技術を身に付けると「勉強した内容を応用したら、○○作れそうじゃね?」みたいに見通しが持てるようになる気がするからです。

僕の作った「読みやすさチェッカー」なんかは、まさにコレです。

読みやすさチェッカー【文章校正ウェブアプリ】
読みやすさチェッカーは、文章中の「読みにくそうな表現」にハイライトをつける文章校正ツールです。採点機能もあります。あなたの文章は何点!?

あとは、似たものを作っている人をQiitaGitHubで探して参考にするといいかもしれません。

技術の流行り廃りが激しい。

プログラミング周りの知識って、基礎的なコンピューターサイエンスの部分はともかく、とにかく流行り廃りが激しいです。

さらに

  • 本当の初心者が理解できる体系化された資料がほぼない or 見つけづらい。
  • 流行り廃りに付いていける人は、ド初心者向けに解説する文章をほぼ書かない。

みたいな傾向がある気がします。

学校の教科書」のありがたみが分かります。笑

チュートリアルや手本通りに実行しても上手くいかない。

「その通りにやっているのに動かない!!なぜ!!?」

バージョンの違いか、環境の違いか…

…でも、よく見ると手本通りにできていないケースもよくあります。笑

専門用語の壁がある

どんな分野の勉強でも「専門用語」の壁を越えるまでは結構キツイです。

これはもう「そういうものだ」と割り切るしかないです。

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

英語を読む必要がある

プログラミングをしていると

  • プログラムは英語で書く
  • エラーやコマンドは英語
  • 情報は英語の方が豊富

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

最近は、DeepL翻訳Google翻訳の精度が上がって昔よりはラクになりました。

…しかし、やっぱり日本語に比べて読むのに時間がかかるのはストレスです。

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

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

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

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

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

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

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

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

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

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

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

IDE(コードを書くツール)は、Visual Studio Codeを使いました。

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

見た目

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

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

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

…「Bootstrapに頼るより、ちゃんとCSSを書いた方が良い」とネット上で見ました。

一方で「BootstrapのグリッドシステムはCSSがちゃんと書けても便利」だともネット上で見ました。

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

計算や処理

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

最終的に全部で2500行を超えるスクリプトになってしまいました。

(もちろん、多分もっと簡潔に書ける部分もあると思います。)

音名の切り替え処理には剰余演算を使っています。

しかし、元々Pythonからプログラミングを勉強し始めたので、プログラミング言語ごとに剰余演算の計算結果が違うのを知らなくてしばらく悩みました。

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

公開方法

サイトの公開は、Firebaseのホスティング機能を利用しています。

ドメインは、このKHUFRUDAMO NOTESのオフィシャルサイトのサブドメインを割り当てました。

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

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

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

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

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

今後の課題など

  • O-TO」は、HTMLCSSJavaScriptなどフロントエンドの技術(?)だけで作ったので、バックエンド周りの技術はまだよく分かっていない。そこらへんを少しずつ勉強していきたい。
  • 達成感はあるけど、正直やっとスタートラインに立ったような気もする。
  • 次に何か作るときは、Next.jsなどウェブアプリケーションフレームワークを使ってみたい。
  • 気軽にプログラミングの話ができる友達が欲しい。
タイトルとURLをコピーしました