プログラミング歴10ヶ月だけど Vue.js で Chrome 拡張機能を作ってみた

9 min to read

どうも、こうすけ(@kosuke_upd)です。

今回は、プログラミングを始めて約10ヶ月の僕が、Vue.js と Firebase で Chrome 拡張機能を作った話をします。

僕は2018年6月ごろから本格的にプログラミングを始め、11月からは SES のエンジニアとなり、あっという間の10ヶ月を過ごしてきました。

そんな僕が、これまでどんな道のりでプログラミングを学習してきて、どんなことを経験し、今後どんなことをしていこうと考えているのかということをお話していきます。

普段は How to 系の記事ばかり書いている僕ですが、一応ブロガーでもあるのでこういったゆるい記事も書いていきます。

今回作ったツールの紹介

まずは、今回僕が作ったツールを簡単に紹介します。こちらです。フロントエンドは Vue.js、バックエンドは Firebase を使用しました。

コピリンのインストールページを開く

このツールは、頻繁に使う URL をツールに登録しておくことで、わずか4アクションで探し求めている URL をクリップボードにコピーしたり、リンク先のページを開いたりできる Chrome 拡張機能です。

しかも、ある程度 PC 操作に慣れている人向け作成しており、ほとんどの操作をショートカットキーでサクサクと行うことができます。

もともと僕はブログや WEB サイトを5年以上前から運営してきたので、自分のサイトの記事 URL だったり、アフィリエイトリンクだったりを毎日のように引っ張り出して記事内で使っていました。

ただ、その作業を毎日していると結構面倒に感じ、こんなツールあったらいいのになと思っていたので今回形にしてみました。この記事を書いている今も、コピリンを使って URL を呼び出して記事内に貼り付けてと、この便利さを実感しています。

需要はどれくらいあるか知らないけど、自分がほしいからという理由で作ってみました。コピリンの詳細や使い方はこちらの記事に書いたので、もしよかったらぜひ読んでみてください。

URL 管理ツール「コピリン」が便利!使いこなし方を解説

ツール作成前の僕は JavaScript なんてできなかった

今ではある程度 JavaScript を使いこなせている僕ですが、実はツールを作り始めたときは JavaScript なんてほとんどできませんでした。

HTML と CSS は得意でしたが、JavaScript は文法がなんとなく分かる程度で、全然使いこなせていなかったのが正直なところです。jQuery ならまだググりながら基本的なことができたという感じですが、それでも今思えば初歩中の初歩だったなと感じています。

エンジニアになろうと決め、しばらく学習していると、この頃の僕のような状況になる人は少なくないと思います。

ちなみにこれは5ヶ月前の話です。

当時はまだ独学でしかプログラミングを学習したことがなく、「このままだとやばい!成長スピードが遅すぎる!」と感じていました。内心強がっていましたけどね。笑

そんなわけで、「実際に稼働しているプロジェクトで開発に携わったほうが良い」「チーム開発を経験したほうが良い」という思いで、SES のエンジニアになりました。

開発現場での圧倒的な成長

独学でのプログラミング経験を経て、無事にエンジニアとなった僕ですが、最初のプロジェクトは Google が開発している JavaScript フレームワーク「Angular」を使用した開発プロジェクトでした。

JavaScript がほとんどわからなかったので、当然最初はかなり苦戦しました。そもそも console.log() でデバッグを行うということすら知らなかったので、最初はどこが悪いのかすらわからずじまい。

しかし、やはり強制的にやらないといけない環境に身をおくことで、ぐんぐん成長していくことができました。

ちなみに、この頃から個人的に Vue.js を触り始めていきました。巷で人気のある Vue.js を学習していこうと決めましたが、ただ学習するだけじゃ面白くないから、一つのツールを作りながら Vue.js を身につけていこうと。

そのツールが、先程紹介した「コピリン」です。

また、プロジェクトで Angular を使っているので、同じ JavaScript フレームワークである Vue.js を使っていくことで、両方を相乗効果的に身につけられるんじゃないかという思いもありました。

実際それは当たり、どちらも面白いように身に付きましたし、気づいたら周りに教えられる立場にもなっていました。(入った当時は周りも同じくらいのレベルの人たちばかりだったというからというのもあります。)

独学の頃から一皮むけたなと感じた非常に濃い時期でした。

ピュアな JavaScript が面白いようにわかる!

そんなわけで、プロジェクトで Angular を身につけ、個人的に Vue.js を身につけていった僕ですが、2019年2月に改めてピュアな JavaScript を身に付けようと思いました。

というのも、当時の僕はフレームワークばかり使っており、ピュアな JavaScript に対するスキルはそれほど成長していないと感じていたからです。プロジェクトで Angular を使っていても、ツール制作で Vue.js を使っていても、ピュアな JavaScript に関する理解がなさすぎるせいで詰まってしまうことが多々あったのです。

一例を挙げると、「addEventListener ってよく出てくるけど何?」というレベルです。笑えますね。

というわけで JavaScript の基礎を短期集中的に詰め込みました。

実際はじめてみると、おもしろいように理解していけました。独学で JavaScript を学習していた頃は、それをいつどのように活用するのかがわからなかったのですが、Vue.js と Angular の経験を経たおかげで、サクサク理解していくことができたのです。

この時期にピュアな JavaScript の基礎を身につけたおかげで、Vue.js や Angular への理解がまた一段と深まりました。

今後はディープラーニングの学習をしていこうと思う!

そんな僕は、先日ようやく「コピリン」を完成させ、Chrome ウェブストアに公開しました。改善点は多々あるものの、ひとまず公開することを優先しました。

今ではまた別の現場で働いており、前回とは違ってレベルが高い人たちの中で日々もまれています。しかし!!僕は「なんとか追いつこう」「自分の強みを生かしていこう」と奮闘していきます。

一つのツールを世に公開したことで一つ良い区切りとなったので、今後は Vue.js のスキルをより高めていき、極めていき、同時にディープラーニングも身につけていこうと決めました。

ディープラーニングのほうでは、プログラミングスキルはもちろん、数学、機械学習の知識などとやることはたくさんあり、時間もかかりそうですが、その分やりがいもあるでしょうし、楽しそうですし、挑戦したいという気持ちが強いです。

今後は、Vue.js と ディープラーニングの2本立てでやっていき、当ブログでもそれらをメインに発信していくので、これからもぜひよろしくお願いします!

最後になりますが、最近また Twitter を再開しました。もしよかったらぜひ Twitter 上で気軽に絡んでください。

Twitter (@kosuke_upd)

\ 記事が良かったらシェア! /

むらかこうすけ

むらかこうすけ

フリーのソフトウェアエンジニア.

Web アプリ, スマホアプリの開発が得意で, 今はゲームに関するプロダクトを仲間とともに開発しています.

ゲーム, 旅行がめちゃくちゃ好きです.

当ブログは Gatsby を用いて構築した完全自作ブログです.

UPDATE