N予備校プログラミングコースで学習して、小説投稿用のWebアプリを個人開発した

はじめまして。こんにちは。

N予備校Webプログラミングコースを利用して、プログラミングの学習を始め、小説投稿用のWebアプリをつくりました。

http://www.nestnovels.site

（入れ子構造の小説や分岐構造の小説を書くことができる、という、ちょっと変わった仕様の「小説投稿サイト」になっています）

以下に、振り返りを兼ねて、取り組んだ内容をまとめています。

N予備校Webプログラミングコースの利用を考えている方や、Webプログラミングの学習を始めて、Webアプリケーションをつくろうと考えている方に、参考になるところがあると思います。

また、Webアプリの個人開発に興味がある方にも、参考になるところがあるかもしれません。

自己紹介

私には、プログラミングの経験や、情報学部などでコンピュータについて学んだ経験はありません。（この記事で振り返る内容が、最初の学習内容ということになります）

（HTMLとCSSで簡単なホームページをつくったこと、プログラミング学習サービス「ドットインストール」の動画教材を利用して、かんたんなWeb掲示板をつくろうとしたことがあります。が、このときは頓挫してしまいました）

学習期間とWebアプリ開発の期間

2018年3月頃から同年8月ごろまでの6ヶ月間、N予備校プログラミングコースを利用しました。（その内、1ヶ月間は一行小説投稿用のWebアプリをつくっていました）

2019年4月に NEST NOVELS を公開したので、学習開始からWebアプリの公開まで、（かかりっきりで）1年ほどになりました。

身のまわりの環境

私の場合は、身近にプログラミングについて話ができる人がひとりいました。とても助かります。（いない場合でも、N予備校のフォーラムや質問系サービスを活用できると思います）

N予備校プログラミングコースを選んだ理由

• 自分のペースで、学習を進めることができる。（個人的に、最大の理由です。家から一歩も出ずに、誰にも会うことなく、プログラミングに取り組むことだって可能です。気が楽かもしれません）
• 料金が安い。（月額1000円です。現在までの合計支出は12000円です）
• 「Web系のプログラミング」というものの全体的なイメージを掴みやすそうだと感じた。（環境構築や周辺知識の教材に加えて、実際にWebアプリをつくるコースがあります）

学習内容

N予備校プログラミングコースの中で利用したコース

基本的に、N予備校のカリキュラムに沿って学習を進めました。

以下が、学習したコースです。

• プログラミング入門Webアプリ
• Scala基礎・応用
• 大規模実践Webアプリコース
• 大規模Webアプリ 並行処理プログラミング
• ニコニコ動画再現コース

他にも、スマホアプリコースや人工知能のコースなどがありますが進めていません。

プログラミングコース以外に利用した書籍

N予備校プログラミングコース以外に、以下の書籍を学習に利用しました。

• JavaScript
  • 初めてのJavaScript 第3版 EthanBrown 武舎広幸 武舎るみ オライリージャパン
• Node.js
  • サーバサイドJavaScript　Node.js入門/清水俊博 大津繁樹 小林秀和 佐々木庸平 篠崎祐輔 高木敦也 西山雄也 Jxck 角川アスキー総合研究所
• Java
  • Java 第2版 入門編 ゼロからはじめるプログラミング /三谷純 翔泳社
  • Java 第2版 実践編 アプリケーション作りの基本 /同上
• Scala
  • Scala研修テキスト - dwango on GitHub
  • Guide to ScalaーScalaプログラミング入門 /中村修太
• オブジェクト指向設計
  • オブジェクト指向でなぜつくるのか /平澤章 日経BP社 第2版
  • なぜ、あなたはJavaでオブジェクト指向開発ができないのか /小森裕介 技術評論社
• Docker
  • Docker実践活用ガイド/ 吉岡恒夫 paiza マイナビ出版
• その他
  • コーディングを支える技術
  • Webを支える技術 -HTTP、URI、HTML、そしてREST/ 山本陽平 技術評論社
  • リーダブルコード The Art Of Readable Code/ Dustin Boswell Trevor Foucher オライリージャパン
  • なっとく！アルゴリズム/ アディティア・Y・バーガバ 翔泳社

N予備校で学習した各コースについての雑感

プログラミング入門Webアプリ

環境構築や練習問題をしながら、最終的にWebアプリをつくってみる。というコースです。JavaScript や Node.js といったプログラミング言語を使用します。

振り返ってみると、この入門コースを終えてはじめて、Webプログラミングについて、わからないことが一気にでてきました。なにがわからないのかもわからなかったのですが、まあ、とりあえずは、Webアプリ（一行小説投稿用のサービス）を1ヶ月かけてつくりました。

このとき、はじめてWebアプリをつくったのですが、一応の形にしたことで、Webプログラミングというもののイメージがぐっとしやすくなりました。

最初は書籍中心で進めていたのですが、途中から、実際につくるようにしました。書籍を読むよりも実際につくってみたほうがイメージをつかみやすいです。（テニスのルールブックを熟読するより、テニスをしたほうがテニスができる、みたいな感じなのだと思います）

Scala基礎・Scala応用

Scala というプログラミング言語を学ぶコースです。 Scala は、「オブジェクト指向プログラミング」と「関数型プログラミング」と呼ばれる二つの側面をもっています。

Scala基礎コースは、すんなりと進めることができませんでした。静的型付け言語に戸惑ったからだと思います。(入門Webアプリコースで学ぶ JavaScript は 動的型付け言語に分類されます)

なので、まずは同じ静的型付け言語の Java に触れました。Javaの基本文法書や「なぜ、あなたはJavaでオブジェクト指向開発ができないのか」というオブジェクト指向設計の書籍を読んで、CUIのジャンケンや七並べ、オセロなどを（真似て）つくりました。その後、あらためてScala基礎を進めました。個人的には、静的型付け言語の文法や、オブジェクト指向開発のイメージを持つことで、Scala基礎コースが読めるようになりました。

Scala応用コースも、Scalaの関数型の側面をうまくイメージすることができず、Scalaの基礎文法を書籍で学習してから進めました。Scala の関数型の側面については、Scala の文法を学習してから進めてもイメージが固まらなかったので、個人的には、なにか別のアプローチ（関数型プログラミングについての入門書を読むなど）をとる必要を感じます。

ニコニコ動画再現コース

並列処理や大規模実践Webアプリコースを含めて、全講座の総復習といった感じのコースです。Scala や Node.js を使用します。

並列処理や大規模実践Webアプリコースについては、「とりあえず手もちの材料でWebアプリをつくろう」と考えていたので若干飛ばし気味です。

React という JavaScriptのフレームワーク（フレームワークとは雛形のことです。学校の時間割表の枠線部分みたいなものです。そういう雛形を使うことで、効率よくアプリケーションを制作することができます）を部分的に使っているのですが、React については React の公式チュートリアルなどをべつにやるのがよいのではないかと思います。（個人的に混乱したポイントでした。Webアプリケーションの開発において React の担っている役割やその理由、具体的な使い方のイメージができなかったからです）

以上が学習の振り返りになります。

つくったWebアプリ「NEST NOVELS」について

コースを終えたあと NEST NOVELS というWebアプリをつくりました。

http://www.nestnovels.site

小説投稿サイトです。入れ子構造や分岐構造の小説を書くことができる、という少し変わった仕様になっています。（ちょっと小説でも書いてみるか、とか、ちょっと変わった小説のアイデアを試してみよう、という方があれば投稿をお待ちしています）

また、NEST NOVELS にはジャンル分類がありません。

小説には SF や ミステリー、恋愛小説などのジャンル分類がありますが、そういったジャンル分類をあえて外したものが投稿される投稿サイトになったらいいな、という個人的なニーズです。

NEST NOVELS をつくるために使用した技術

以下が、NEST NOVELS をつくるために使用した技術です。

（基本的には、N予備校プログラミングコースの「ニコニコ動画再現コース」で学んだ構成を流用してつくっています）

本番環境(PaaS) ... Heroku
メールサーバ ... SendGrid
DB ... Heroku PostgreSQL, Heroku Redis(セッション管理)
開発用DB ... Docker PostgreSQL, Docker Redis
パッケージ管理 ... yarn
ORM ... Sequelize
Webフレームワーク ... Express
サーバーサイド言語 ... Node.js
CSSフレームワーク ... Material-UI
CSSプリプロセッサー ... Sass
モジュールハンドラ ... webpack

（入れ子構造を実現するために sequelize-hierarchy というパッケージを使用しました。このパッケージを使うことで、ネストしたデータに不向きな RDB でも、自分で再帰処理を書くことなく、階層化したデータを簡単に取得することができます。このパッケージのおかげで、非常に簡単に、入れ子構造を実現できました）

学習と開発の全体を振り返って

振り返ってみて、今回の学習で最も大きなターニングポイントは以下です。

・MacBookProを購入したこと（購入しただけで頭が良くなったんじゃないか。と錯覚してしまうくらい、とても優れた製品なのだと思います）
・Webアプリをつくったこと（つくったのは合計2つですが、手を動かしてWebアプリをつくることでイメージが固まりました）