未経験からの勉強の流れ＜HTMLから自作アプリ開発まで/その後＞

未経験者がHTMLの勉強からはじめて自作アプリの開発を行うまで/行ってからの勉強の記録です。
「就職しました」という記事ではありません。スクールなどには通わず仕事をしながら独学で勉強を進めています。自分の備忘録として、また、これから学ぶ方、現在学んでいる方の参考に少しでもなるところがあればと思い記録を公開します。（この本の方がおすすめ、などツッコミがありましたらお気軽にコメントいただけるとありがたいです。）

はじめに、自己紹介と制作物のリスト

自己紹介

25歳。働きながら勉強をしています。現職は業務量の調整がある程度きくので、集中的に勉強したいときは本業を若干減らして取り組んでいました。プログラミングをしっかり学んだ経験はありませんが、激安の3Dプリンターを買っておもちゃをつくったり、Pythonによるスクレイピングで業務に使えるデザイン資料を集めたり、趣味の範囲で触ることはありました。

制作物のリスト

現在稼働しているサービスは主に5つあります。今見ると大変拙いものばかりですが、いずれもソースは公開しています。

勉強開始から2週目に制作

◆書籍の素材集を検索できるサイト(React)
MCBOOKS Searcher(現在休止中)/github
⇒機能は予め手作業で登録したデータをタグで検索するだけです。

4〜5週目に制作

◆レファレンス協同データベースの記事をランダムに表示するWEBサービス(Vue.js)
reftika/github/Qiita記事
⇒axiosでAPIを叩いてデータを取得、表示します。corsへの対応としてherokuにAPIを中継するpythonサーバーを立てています。

7週目に制作

◆青空文庫専用の書評サイト(Ruby on Rails)
sora(現在休止中)/github
⇒ユーザー登録機能。ユーザーごとの本棚。書籍へのコメント機能。書籍は読了時間で検索可能などの機能があります。

◆スマホ向け、セリフ付き猫画像を瞬時に生成できるジョークサイト(Ruby on Rails)/スマホ用
nekomoji/github
⇒DBなし。入力されたテキストをランダムな画像と合成して返します。

1ヶ月ほど開発ストップ

書籍を中心に勉強

ブランク明けに制作

◆書籍情報をscrapboxに送るpwa(スマホ用)、他
toscrapb/github/Qiita記事

◆scrapboxの複数ページを検索できるpwa
Scrapboxまとめて検索/Qiita記事

現在のスキル

おおざっぱにまとめます。

• Rails
  • 典型的なCRUD
  • 多対多のアソシエーション
• JavaScript
  • webpack、Babel、eslintを利用したモダンな環境の構築
  • vue.jsによるSPAの構築
  • jQueryの基礎
  • 非同期処理など
• SQL
  • postgreSQLの基礎
• HTML/CSS
  • sass
• Python
  • jupyterlabでnumpyやmatplotlibなどを利用
  • BeautifulSoupやSeleniumを利用したスクレイピング
  • 競技プログラミングに利用

---

以降では、勉強開始からの時系列で制作物・勉強の歩みを紹介します。書籍は読みはじめた時期、リンクは出版社のサイトです。

---

1週目〜

progate(HTML/CSS、JavaScript、Ruby、SQL)

とにかくつまづくことがなく、多くのコンテンツはアプリでも進められる点がありがたいサービスでした。自信の無いコンテンツだけ2周3周しました。

HTMLの学習

• 『HTML5/CSS3モダンコーティング』
  flexボックスについては少し言及する程度。formやradioなどのタグを扱った例はありません。しかしその他の内容は解説が丁寧でわかりやすかったです。

JavaScriptの学習

※下記2冊は共にes6以前の内容。es6以前の内容も頭に入れておきたかったので、定評のあった本を購入しました。

• 『確かな力が身に着くJavaScript「超」入門』
  必要最小限の内容だと思います。jQueryについて最後の最後で少し触れる程度。あっさりと読み終わるので導入には良い本でした。

• 『オブジェクト指向JavaScript』
  読む必要あるかどうか迷いましたが、es5のある程度しっかりした本も読んでおきたかったので購入（古本が非常に安かったのもあります）。ざっくりとしたJavaScriptの考え方やクロージャ・スコープ・継承についてとてもわかりやすい本でした。

2週目～3週目＜ここからA,B,Cを同時進行＞

＜A＞作り起こし

デザインの勉強でよく行っていた勉強法です。実際のWEB上のサイトを見た目から作り起こします。
かっこいいサイトのデザインを考える必要がなく、わからない時にはソースを見れるのでイチからつくるよりは効率が良かったと思います。時間がなければ解読だけを行い、ソースを見てもアニメーションの実装などがわからない場合は大枠の見た目だけをマネしました。サンプルは昔からデザイン仕事の参考のためにお世話になっていた以下サイトなどから探しました。広告アワードのようなサイトを含め、Feedlyでざっと見るのは以前からの習慣でした。

• One Page Love
• 81-Web.com
• S5-Style
• 縦長のWebデザインギャラリー
• Pinterest

＜B＞progateのReactサンプルをベースにアプリをつくる。

githubを使いながらfirebaseでとりあえず動くwebサービスをつくりました。わざわざReactを使う必要もない機能ですが、基礎知識の定着に役立ちました。
⇒書籍の素材集を検索できるサイト。
MCBOOKS Searcher(現在休止中)/github

＜C＞web&本による学習

JavaScriptの学習

web

jsprimerでES6の勉強。
基礎の基礎からアプリ制作まで一通り学べる素晴らしいサイトです。

本

※下記2冊も共にes6以前の内容。特にJavaScript、jQueryはwebに情報が多いけれどあまりイケてないhowtoの記事もあるという話を聞いて、見分ける自信がなかったたため本ベースで学ぶようにしました。

• Web制作の現場で使うjQueryデザイン入門
  この本は基礎のみなのですぐに読み終わります。

• 現場のプロが教える WEBデザイン 新・スタンダードテクニック37
  サンプル集。サンプルの多くがjQueryを利用しています。

gitの学習

入門サイトを以前に読んで触った経験はありました。復習として初心者向けサイトを1つずつ読み通して、動かして学びました。gitに限りませんが、チーム開発や運用のベストプラクティスなど、まだまだ使いこなすレベルとは程遠いです。
サルでもわかるGit入門など

全般的な学習

広く浅く全体像を理解したかったのでこの頃読んだ本たち。

• Webを支える技術
• コーディングを支える技術
• キタミ式イラストIT塾 基本情報技術者

『Webを支える技術』は、Railsを勉強した後にもう一度読み直したらRESTへの理解が深まりました。2010年出版のやや古い本ですが、未だに人気が衰えないのは納得のわかりやすさです。
キタミ式は見開きの漫画が章ごとにあったり、二進数など中学数学の復習箇所も多かったりするのですが、ボリュームはそこそこあり、私の場合はシステム周りのマネジメントや後半の企業活動に関する章の知識が全くなかったため、読み通すまでには思ったより時間がかかりました。

4週目～5週目＜次も同時進行＞

＜A＞vue.jsの学習

公式のガイドを一通り読みました。cdnから触ってみた後、webpack、Babelを学びはじめました。また、海外含めweb上で紹介されているvue.jsのサンプルを読み、試してまわりました。

＜B＞webpackとBabelの学習

公式ドキュメントを見ながらサンプルを実行していきました。
vue.jsも丁寧ですが、特にwebpackの公式ドキュメントはかなり丁寧でわかりやすかったです。

＜C＞作りたいサービスを考えて作る。

vue.jsの解説サイトをめぐりながら、作りたいサービスを考えて作りはじめました。
lodashとかaxiosなどもこのあたりで学びました。

出来上がったのがこちら
⇒reftika/github
Qiitaに書いた記事
⇒<初心者>レファレンス協同データベースの記事をランダムに表示するWEBサービスをvue.jsで作りました。

＜D＞JavaScriptの復習

jsprimerを進めつつの復習です。Promiseやlodashなど使わないと私はドンドン忘れてしまうので。

ほか

どうしても行き詰ったり、気分を変えたいときは気軽に読める本(『退屈なことはPythonにやらせよう』)や、別途購入したSQL本（『SQLゼロからはじめるデータベース操作』）を読んで頭を切り替えていました。また、web上の素敵な記事のサンプルを試したり改変したりして遊んでいました。
例：Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説（ソース付き）

---

～ここまで約1ヶ月～

---

6週目＜次も同時進行＞

＜A＞作ったサービスのメンテナンス

一応作り上げたサービスですが、あぁしたい、こうしたいがたくさんでてきました。かなりの分量を書き直しすることになりましたが、そのおかげでずいぶん理解が深まったと思います。

直したらたまにアウトプットの記事を書いていました。初心者のアウトプットにツッコミをいただけることがあるのは本当にありがたいです。
⇒cssのアニメーションで検索ボックス上部にレコメンド事例紹介機能を搭載してみた。[2019/07/13追記※3回]など。

＜B＞Rubyの学習

Railsチュートリアルをはじめました。
選んだ理由は、テストも含めた開発の一連の流れを学ぶのにちょうどよいと聞いたことがきっかけです。国内外に先達が多いので、迷ってもつまづくことはないだろうという見込みもありました。休みを利用してかかりっきりで行い、4日ほどで終了しました。
チュートリアルで作成しいたのがこちら
マイクロブログ/github

＜C＞全般的な復習＋sass

jsprimerの復習。jQueryの例、vue.jsの公式やhowto、webpackなど。

7週目

Ubuntuを使い始める

ここまではWindowsで作業していました。しかしRailsチュートリアルを終えて環境構築に手間がかかることを実感。Ubuntuでの開発環境をつくりました。

Linuxはほぼ初めてだったためこれもイチから勉強。やや古いのですが、SoftwareDesignの総集編(2013〜2017)のLinux関連の号にざっと目を通したり、LPI-JAPANのLinux標準教科書をやることから勉強をスタートしました。また、対象はBSDであるものの「コードリーディングの仕方が学べる」という点で、とても評価が高い『デーモン君のソース探検』を読みはじめました。デーモン君は想像以上に優秀で、折を見て理解を進めていきたい本です。

Ruby on Railsでサイトをつくる

Railsチュートリアルで学んだことの復習として制作しました。チュートリアルではイチから実装した認証部分はdeviseを利用。
ひとりで作ってみると、「ページ構造」「ざっくりとした理解で使用することでむしろ手間がかかるBootstrap」「テストはこれで必要十分か否か」などチュートリアルでは誘導してくれていたポイントでかなり迷い、時間がかかりました。
特にテストとデータベースに関する勉強は今後別途に必要であることを感じました。

1つめ
青空文庫専用の書評サイト
⇒sora(現在休止中)/github
青空文庫書籍の読了時間別検索、アカウント作成、自分の書棚作成、書籍への書評投稿などができます。はじめからBootstrapを使わない想定でつくれば...とあとで後悔した思い出があります。

2つめ
スマホ向け、セリフ付き猫画像を瞬時に生成できるジョークサイト
⇒nekomoji/github

SQLの学習

データベースの知識の無さを感じて『SQLゼロからはじめるデータベース操作』の復習に時間をかけるとともに、同著者の『達人に学ぶSQL徹底指南書』も読みはじめました。1ステップ上の内容の本です。まだまだ理解の足りないところばかりですが、「RDB近現代史」という章からはじまる第2部はシンプルに読み物としても非常に面白い内容です。

全般的な学習

• 『リーダブルコード』を読み始める。

基本的にわかりやすい文章であるだけに、言っていることが「理解できたと思えること」と「それを実践できること」との隔たりを強く感じました。読んだ本の中でも、特に長い付き合いになりそうな本です。また、C++の知識が無いことや、想定ケースの背景を理解できない事例もありましたが、それもありがたいことのように感じました。

常々思うことなのですが、ネットは「知りたいことがある人」は一直線に「知りたいこと」へ辿りつける一方で、「キーワード」やそもそも「何がわからないか」がわからない初心者が利用する場合はコスパが悪いケースもあると思います。
そうした見方をした時に、jsprimerやudemy、progateのようにパッケージ化されているサイトがありがたいのと同様に、書籍は初学者に向いている勉強の選択肢なのだろうと思います。
素人感丸出しなのですが、この本に限らず、「何がわからないかわからない」という入門以前の状態から、「これもわからない」という入門者の状態へのステップアップのためにも本を役立てながら勉強していきたいです。

１ヶ月ほど開発ストップ

プライベートの都合と、基礎知識が足りないことを何度も感じていたことから、1ヶ月ほど書籍での勉強に注力しました。なかには読了できていない本や理解しきれていない本、以前から持っていた本もあります。評判と値段と好み¹で選びました。以下は主な読んだ・読みかけの本です。

全般・読み物

• 『プログラムはなぜ動くのか』

• 『コンピュータはなぜ動くのか』
  上記２冊は初歩的なところから解説してくれる本です。新しい技術に目から鱗のような話はもちろん一切ありませんが、ないからこそおろそかにはできない基礎部分だと思います。

• 『プログラマの数学』
  結城浩さんの本は外れがないと思っています。扱う数学も初歩の初歩ですが、わかりやすい説明の仕方、図解の入れ方など構成まで参考になる本ばかりです。

• 『機械学習入門』
  巷で話題の機械学習をふんわりと知りたくて読みました。数学の理解が浅くても読めることは技術本においてウリにはならないと思っているのですが、苦手な人でも楽しく読み通せることは間違いないと思います。私は参考文献まで手を伸ばしていませんが、文献紹介も丁寧に書かれていました。

• 『はじめて読む486』（読みかけ）
  プログラミングというよりはコンピュータを扱った書籍。非常に噛み砕いてくれている（と思われる）のですが、欠けている知識を学びつつなので理解するまでには大分時間がかかりそうです。

• 『暗号技術入門 秘密の国のアリス』
  同じく結城浩さんの本。SSHの仕組みなど、セキュリティの初歩の初歩が丁寧に解説されています。蔵書している図書館も多く、さくっと読めるので借りるのも良いかもしれません。

web

• 『マスタリングTCP/IP 入門編』 こちらも図書館に古い版がよくありますが購入しました。シリーズの他のものは目を通してもいませんが、次のステップの指針にしながら勉強していこうと思っています。

CSS

• 『CSS設計の教科書』
  フロントエンド界隈ではもしかしたら既にやや古い本なのかもしれません。「こうしなさい」だけではなく、著名な開発者が考えた設計に関する著者の考察などが丁寧に解説されている本でした。ついノウハウや見た目の派手なtipsばかりに気をとられてしまいますが、そこに至る背景や利用する際の設計をきちっと理解して考えられる方が面白いことが増えるとたびたび反省します。

  言語

• 『Javaによるデザインパターン入門』
  もっと新しいデザインパターンの書籍もあるのですが、定評があることと、結城浩さんの本であることから選びました。web上の解説も頼りにしながらまだまだ勉強中です。

• 『プログラミングコンテストチャレンジブック』（読みかけ）
  競技プログラミングに興味をもち、アルゴリズムやデータ構造を学ぶために読みはじめました。
  web上に参戦記などの形で多数あげられている解説ブログも参考にしつつ、動的計画法やワーシャル・フロイト法などの基礎から学んでいます。コンテストも、解説ブログによるアルゴリズムごとの出題まとめなども、これだけ問題が用意されている今の環境は非常にありがたいです。

テスト

• 『JSTQB』（読みかけ）
  技術的なテストのノウハウではなく、品質管理などの全体の設計に関する試験の対策本です。じっくり取り組んでいく予定。Foundation Levelのシラバスはこちら。大きな枠組みと同時に、現場で当然に必要なテストコードの勉強が足りていないこともなんとかしていきたいと模索中です。

  SQL

• 『SQL実践入門』（読みかけ）
  『達人に学ぶSQL徹底指南書』の次のステップ・参考書として購入しました。まだまだあまり読み進められてはいません。NoSQLにも興味はあるのですが、そちらはFirestoreのチュートリアル・紹介動画程度にとどめて現在はSQLからと考えています。

ブランク明け

気になっていたpwaを使ったサービスをつくる

isbnをもとに書籍情報をscrapboxへ送るpwa
⇒toscrapb/github

自分が欲しかった便利ツールをつくる

scrapboxの複数ページを検索できるpwa
⇒Scrapboxまとめて検索/Qiita

その他

競技プログラミングとアルゴリズムの勉強

競技プログラミングに興味を持ち、AtCorderのABCレベルの過去問にいくつかチャレンジした後、基礎勉強の必要性を感じてアルゴリズムやデータ構造の勉強をはじめました。上記の蟻本のほか、数学を学び直しています。使用言語はPythonです。

デザイン

業務でDTPやバナーデザインの経験はあったのですが、比較してwebデザインは非常に独特だと感じています。初めは特にフォントサイズの感覚が慣れず違和感との戦いでした。また、アプリを色々作っていると、実装部分に気を取られてデザインにまで注意を向ける余裕がなくなっていることが多いと感じました。UIの設計も今後学びたい分野の一つです。デザイン関連で考えたことも今後公開できたらいいなと思っています。

最後に

ふと以前制作したもののソースを見返すと、そのおそまつさに毎回がっかりして今度こそはと意気込む、しかし、またちょっと経つとそれを見返してがっかりしている。私の勉強は、こんな自分の未熟さとの付き合いです。これを成長している証として考えつつ、楽しんでいけたらと考えています。
実際、いずれの分野もまだまだ未熟なところばかりで、学びたいことばかり。本業との時間の兼ね合いを考えつつ、ひーひー言いながら勉強しています。
基礎を大事に地道に長く楽しんでいきます。

---

1. 『数学ガール』を読んだ中学時代以来、結城浩さんの本が好きです。 ↩