Help us understand the problem. What is going on with this article?

未経験からプログラミング学習始めて4ヶ月間で学習してきたことを話します。実際の成果物も公開します。

More than 1 year has passed since last update.

プログラミング学習を始めて4ヶ月間の学習進捗について

プログラミング学習を開始してから4ヶ月間の学習進捗をまとめます。プログラミングスクールでHTMLの基礎から学び始めて4ヶ月がたち、環境構築してオリジナルアプリケーションをリリースできるまでに至った経験談です。

学習にあたって意識した点と、最終的に作成したアプリを提示していきます。

この4ヶ月間、毎月学習テーマを持ち、テーマに沿った目標を立て、目標達成基準を満たす成果物を毎月必ず作成するという勉強方針をとってきました。

プログラミング学習における勉強方針の一つ経験談として、

「このような進め方をしたら、こういったレベルのWebアプリケーションが開発できる」

という参考になれば幸いです。


※以下のリンクは、私が個人で書いているブログの内容になります。

sup? - プログラミング初心者の勉強ブログ

こちらに書いている内容含め、ブログの方では学習進捗をさらに細かく書いておりますので、よかったらご覧ください。


スタートから2ヶ月間の学習進捗について

スタートしてからの2ヶ月分は、

Qiita - 未経験からスクールで勉強して2ヶ月間でアプリリリースまで行けたので経験談を話します

以前にこちらに書いております。

どういう人間がどのように学習を進めていったか、具体的にスクールで学んだことや身につくスキル、学習成果を細かく載せております。

※本記事では概要のみ書いていきます。

1ヶ月目

最初の1ヶ月間はプログラミングスクールのカリキュラムに沿って、HTML/CSS、JavaScriptから学習していきました。私が通わせていただいているスクール「DIVE INTO CODE」は、最終的にRuby on Railsでオリジナルアプリを作成することが卒業条件です。ですので、RubyとRails学習ボリュームがカリキュラムの大半を占めており、スクールから与えられた課題をこなしていくことで、RailsでオリジナルWebアプリケーションを作成する方法が身につきます。

細かくは、上に貼ったリンクを見ていただきたいです。

僕の個人的な意見では、DICのカリキュラムはわかりやすく、全く素人の状態の人が学習しても理解しやすかったです。(他のスクールのものを見たわけではないので比較はできておりませんが、少なくとも基礎的なRails学習を進めていくにあたって、詰まる点もあまりなく、途中でわからなくなっても質問ができるので、サポートが厚いです。僕はオススメします。)

また、DICのテキストはパソコンやスマホでいつでもすぐ確認でき、

「こういうコーディングをすれば、正常に動く」

という、信頼のおけるコードの見本を、常に手元に持つことができる点も、自己学習を進めていくにあたって非常に助かっております。

2ヶ月目

開始から1ヶ月ほどでDICのカリキュラムを全て(卒業課題は最後に取っておいてます)終わらせ、一通りRailsの基礎を理解し、テキストを見ながらであればブログアプリをRailsで作成できるようになりました。

しかし、JavaScript(jQuery)のアウトプットがあまりできておらず、2ヶ月目は「JSでフロントを動かす」ことを意識した学習を行いました。

具体的には「JSでフロントが非同期処理で動く、モーダルを使った一問一答機能」です。運転免許の学科試験の問題を一問一答できるアプリです。

スクリーンショット 2018-11-25 21.08.27.png

運転免許問題集 - 学科試験の決定版!

実際に作成したものです。とにかくjQueryに奮闘しました。自分で一から作ったWebアプリとしては始めてのもので、当初の目標であったJSのアウトプットだけでなく、「Webアプリケーションの作り方」を経験できました。

ここで奮闘したあたりから、アプリに新しい機能を実装するための方法を自分でひたすら調べて、エラーが出たら原因を調べ、原因が分かったら解決方法を調べる、というしんどいループに対する耐性がつき始めた気がします。今では当たり前ですが、当初はこれが、本当に途方も無い作業に感じられてしょうがなかったです。

※2ヶ月目についても、詳細は最初に貼ったリンクに載せてます。


そこからさらに2ヶ月が経過

2ヶ月間の勉強の成果として、免許アプリを作成してから、気づいたらまたさらに2ヶ月経ってました。ここ2ヶ月間は、スクールの勉強からは離れて勉強していることがほとんどでした。Webアプリケーションを作成することについて、もう少し大きな枠組みで見たときに必要な知識を習得することに努めた2ヶ月間です。学習テーマは「Webデザイン」と「Railsアプリと外部サービスとの連携」、あとは「本番環境構築」です。

3ヶ月目

アプリを作っていくと、必ずそのアプリのデザインを考える必要があります。DICカリキュラム課題として作成した「インスタグラムクローン」や免許の問題集アプリを作成していく中で、どうしてもアプリの見た目が満足いかず、悶々とした気持ちを感じてました。

せっかく頑張って作ったアプリを、もっとカッコ良い見た目にしたいという気持ちと、そもそもCSSやJSが好きで、いろんなサイトの動きのあるかっこいいブラウザ表示への憧れの気持ちが相まって、約1ヶ月ほど「Webデザイン構成の基礎」と「CSS主体のフロントエンドコーディングのインプット・アウトプット」に費やしました。

既存サイトの模写学習

とにかく良いと思った、見本となるデザインのサイトについて、検証ツールでソースコードを確認し、模写していく作業を計10サイト実施しました。
スクリーンショット 2018-10-15 15.50.38.png

【HTML/CSS】実際のwebサイトから学ぶwebデザイン構造7つの共通点(模写学習 #4)

サイトの要素の配置・構成だけでなく、CSSとjQueryライブラリに触れ、CSSのテクニックを色々なサイトのものを参考にすることができました。「こういう配置の方法があるんだな」とか「アニメーションはこうやってつけるんだな」「このjQueryライブラリすげー」とか、いろんな発見があります。

CSSのアウトプットって、模写でもしない限りやるきっかけが無いと思います。経験豊富なWebデザイナーの方が実際に書いたコードを見て参考にするわけですから、書き方ひとつひとつが参考になります。デザイナーの意識の細かさをとても感じます。ちょっとやそっとで洗練されたカッコいいデザインを作れるようになるのは無理だなという感想です。

Webデザイン学習の成果物

そんなこんなでひたすら模写していき、最終的なアウトプットとして「オリジナルHP」を作成しました。

supunic.jpg

supunic.com (オリジナルHP)

Webデザインに1ヶ月間打ち込んだ成果物です。Railsと違って機能は何もなく、一枚のHTMLにCSSとJSを少し足して作成したものです。

自分的には結構カッコ良くできたのではないかなと思っておりますが、他のカッコいいサイトと比較すると、まだまだだなとなってしまいます。スマホ表示よりPC表示が気に入ってます。

模写以外にもデザイン本を何冊か読んだりしましたが、最終的に自分で何か作品を作ってみないとデザイン知識が頭の中でふわっとしたまま終わってしまうので、しっかり頭のどこかに着地させるためのアウトプット作業が大切だと考えます。

4ヶ月目

悶々としていた気持ちを解決すべく、約1ヶ月もの期間を使ってWebデザインをひたすらやり、少しは納得のいく構成が作れるようになり、気持ちが晴れるかなと思ったのですが、むしろデザインの奥深さに、自分にそれができるのかと、混沌を感じ始めるようになってしまいながら4ヶ月目に突入しました。

とりあえずフロントやりすぎたので、バックエンドに戻ります。

4ヶ月目の成果物

今回は先に成果物を載せます。4ヶ月目はWebデザインを少しかじった上で、今一度オリジナルアプリ開発に挑戦しました。作成したのは「朝の情報番組の占い結果をまとめてチェックできる」アプリです。

今回は「Railsアプリと外部サービスとの連携」と「本番環境構築」を学習テーマとしております。具体的にはAPIを活用し、AmazonやSNS等と連携させた機能を多く取り入れてます。また、本番環境構築の練習として、さくらVPSと契約し、空のサーバー内に一からRailsアプリをデプロイしました。

スクリーンショット 2018-11-25 20.58.32.jpg

Fortune Checker - 朝の情報番組の占い結果をまとめてチェック!
Twitter bot:@fortune_checker

このアプリは、スクレイピングで各番組の公式サイトから占い結果を取得し、データベースに保存しております。スクレイピング処理はActive Jobとcronを用いて、バックグラウンドで時間指定の自動化を行いました。また、Twitterとも連動させ、毎朝のスクレイピング処理の直後に結果一覧をツイートするbotを作成しております。

アプリの具体的な内容としては、取得した占いデータをもとに、

  • 星座別占い結果一覧
  • 番組別ランキング
  • 総合ランキング

をそれぞれチェックできるようになってます。

Railsアプリと外部サービスとの連携

今回APIを活用して、連携した外部サービスは

  • Twitter
  • Amazon
  • Slack

の3つです。

まず、Twitterはbotとして利用してます。メイン機能のひとつです。

スクリーンショット 2018-11-28 14.15.51.png

Twitterで大まかに各番組のランキングを確認でき、さらに詳細に知りたい人はサイトで見てください、という流れです。

Amazonは、正直あってもなくてもいいくらいしか連携してないのですが、

スクリーンショット 2018-11-16 15.55.03.png

このおとめ座の占い結果の「酸っぱい梅干し」の背景画像が、Amazon APIで引っ張ってきたものです。 当初表示される「ラッキーポイント」の商品を、Amazon 購入リンクとして連携させようと思っていたのですが、色々考えた上でやめました。せっかくAmazonのAPI実装したので、せめて画像だけでも残しときたいと思い、今の状況にしました。

仕組みとしては、占い結果のラッキーポイントやラッキーアイテム内容で、Amazonデータベースに検索をかけ、検索1位の商品のイメージ画像を表示されております。たまに変なの出てきて、なかなか面白いです。

基本的にラッキーポイントで検索かけて、該当0はありませんが、「モニュメントがある広場」が、めざまし占いのおひつじ座のラッキーポイントだった際に、検索結果が0でエラー出たので、対策しました。油断できないです。

最後にslackです。slackは、スクレイピング処理の実行確認の通知用に導入しました。

このアプリの肝は「スクレイピング」です。設定したスクレイピングでエラーが発生してしまった場合、何も表示できなくなってしまいます。

スクレイピングのコードは環境依存にどうしてもなってしまうので、予期せぬ取得先の公式HPのHTMLに変更があった場合、間違いなくエラーになります。

ですので、少なくとも「エラーの発生」がすぐわかるような整備を行う必要があり、そこでSlackを利用させていただきました。

スクレイピング処理のコーディングに、「成功時のメッセージ」と「エラー時のメッセージ」をそれぞれ設定し、

成功のときは、

スクリーンショット 2018-11-28 14.33.06.png

逆にスクレイピングに失敗したら、

スクリーンショット 2018-11-28 14.33.30.png

このようにそれぞれ自分のSlack宛にメッセージが届きます。

これで万が一エラーが出たときは、すぐにエラーを確認することができます。

本番環境設定

今まではデブロイを全てHerokuで行っていました。今回は本番環境設定の勉強をするために、「さくらVPS」と契約し、一から設定を行いその中に占いアプリをデプロイしました。

何もわかってなかったので、VPS契約しての環境構築は非常に勉強になりました。

OS入れてWebサーバー入れてapplicationサーバー入れてDBサーバー入れてRuby入れて・・・・・

色々なサーバー諸々を詰め込む他にも、通信の設定して、公開鍵設定して、ポート番号変更して、firewall設定して、SSL設定して・・・

「SSHとかFTPとかSFTPは全部HTTP的な感じなんだなー、プロトコルとはそういうことか。」くらいの感想が出るくらいの素人ですが、なんとか実装できました。

最終的に構築した環境は、

VPS:さくらVPS
OS:CentOS7
Webサーバー:Nginx
Applicationサーバー:Unicorn
データベース:PostgreSQL

です。ドメイン取得はお名前.com、DNSはCloudflareを使ってます。クラウドフレアはSSL証明書を自分で取らなくても簡易的なSSLを設定できて便利です。DNSとしても使いやすく、IPアドレスの切り替えや、HTTPSリダイレクトなども、コマンドを使わずブラウザ上で設定でき、なおかつ早いです。

簡易SSLなので、がっつり個人情報取り扱ってサービス展開していく場合は、ちゃんと証明書取らなけれなりませんが、今の僕の規模感のアプリだと丁度良いです。

その他のサーバーの使用感は正直まだよくわかってません。Nginxは速いとか聞きますが、実感として感じることはありません。データベースもDICで推奨されたPostgeSQL以外使ったことがないので、他のDBも試してみたいです。

大まかな流れや初期設定関係は、ドットインストールとネットの記事を参考に構築しましたが、サーバー設定はDICのテキストが非常に役に立ちました。やはり手元にDICのテキストがあると、効率よく学習できます。とにかく本番環境構築なんとかなってよかったです。

以上、僕の4ヶ月間のプログラミング学習の進捗はこんな感じです。


まとめ

最終的に開発したアプリの紹介になってしまいましたが、現状の僕のプログラミング学習進捗はこのような状況です。プログラミング学習は、わけわからないながらも、とにかく定義した目標を達成するために「手を動かす」ということが、今までの全ての学習に共通する基本スタイルだと改めて感じます。

Webデザインと比較すると、プログラミング学習は、パターンこそ何通りもあれど解答が明確に存在するので、その点は良いのですが、環境構築したときの「まだまだ勉強しなければならないことがヤバいくらいある」感はすごかったです。

とりあえず今後も、イメージしたものを実現できる技術を身につけることに専念します。
以上ありがとうございました。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away