#76プログラミング学習を開始してから4ヶ月間の学習進捗をまとめます。プログラミングスクールでRailsの基礎をひとしきり終えた後の勉強方針や、開発したアプリの詳細について書いていきます。学習にあたって意識した点と、最終的に作成したアプリを提示していきます。まとめスタートから2ヶ月間の学習進捗についてここでは概要のみ書いていきます。#52プログラミング未経験から勉強し始めて3ヶ月目突入。CODEに通って学んだことの詳細と感想を書きます。習熟度や2ヶ月間の成果物、勉強...詳細は上のリンクに書いております。いう人間がどのように学習を進めていったか、具体的にスクールで学んだことや身につくスキル、学習成果を細かく載せております。最初の1ヶ月間はプログラミングスクールのカリキュラムに沿って、HTML/CSS、JavaScriptから学習していきました。Railsでオリジナルアプリを作成することが卒業条件です。RubyとRails学習ボリュームがカリキュラムの大半を占めており、スクールから与えられた課題をこなしていくことで、RailsでオリジナルWebアプリケーションを作成する方法が身につきます。細かくは、上に貼ったリンクを見ていただきたいです。僕の個人的な意見では、DICのカリキュラムはわかりやすく、全く素人の状態の人が学習しても理解しやすかったです。(他のスクールのものを見たわけではないので比較はできておりませんが、少なくとも基礎的なRails学習を進めていくにあたって、詰まる点もあまりなく、途中でわからなくなっても質問ができるので、サポートが厚いです。「こういうコーディングをすれば、正常に動く」という、信頼のおけるコードの見本を、常に手元に持つことができる点も、自己学習を進めていくにあたって非常に助かっております。開始から1ヶ月ほどでDICのカリキュラムを全て(卒業課題は最後に取っておいてます)終わらせ、一通りRailsの基礎を理解し、テキストを見ながらであればブログアプリをRailsで作成できるようになりました。JavaScript(jQuery)のアウトプットがあまりできておらず、2ヶ月目は「JSでフロントを動かす」ことを意識した学習を行いました。具体的には「JSでフロントが非同期処理で動く、モーダルを使った一問一答機能」です。jQueryに奮闘しました。自分で一から作ったWebアプリとしては始めてのもので、当初の目標であったJSのアウトプットだけでなく、「Webアプリケーションの作り方」を経験できました。ここで奮闘したあたりから、アプリに新しい機能を実装するための方法を自分でひたすら調べて、エラーが出たら原因を調べ、原因が分かったら解決方法を調べる、というしんどいループに対する耐性がつき始めた気がします。今では当たり前ですが、当初はこれが、本当に途方も無い作業に感じられてしょうがなかったです。※2ヶ月目についても、詳細は最初に貼ったリンクに載せてます。そこからさらに2ヶ月が経過2ヶ月間の勉強の成果として、免許アプリを作成してから、気づいたらまたさらに2ヶ月経ってました。ここ2ヶ月間は、スクールの勉強からは離れて勉強していることがほとんどでした。Webアプリケーションを作成することについて、もう少し大きな枠組みでみたときに必要な知識を習得することに努めた2ヶ月間です。学習テーマは「Webデザイン」と「Railsアプリと外部サービスとの連携」、あとは「本番環境構築」です。3ヶ月目アプリを作っていくと、必ずそのアプリのデザインを考える必要があります。DICカリキュラム課題として作成した「インスタグラムクローン」や免許の問題集アプリを作成していく中で、どうしてもアプリの見た目が満足いかず、悶々とした気持ちを抱いてました。頑張って作ったアプリを、もっとカッコ良い見た目にしたいという気持ちと、そもそもCSSやJSが好きで、いろんなサイトの動きのあるかっこいいブラウザ表示への憧れの気持ちが相まって、約1ヶ月ほど「Webデザイン構成の基礎」と「CSS主体のフロントエンドコーディングのインプット・アウトプット」に費やしました。既存サイトの模写学習とにかく良いと思った、見本となるデザインのサイトについて、検証ツールでソースコードを確認し、模写していく作業を計10サイト実施しました。サイトの要素の配置・構成だけでなく、CSSとjQueryライブラリに触れ、CSSのテクニックを色々なサイトのものを参考にすることができました。「こういう配置の方法があるんだな」とか「アニメーションはこうやってつけるんだな」「このjQueryライブラリすげー」とか、いろんな発見があります。CSSのアウトプットって、模写でもしない限りやるきっかけが無いと思います。経験豊富なWebデザイナーの方が実際に書いたコードを見て参考にするわけですから、書き方ひとつひとつが参考になります。デザイナーの意識の細かさをとても感じます。洗練されたカッコいいデザインを作れるようになるのは難しいです。Webデザイン学習の成果物そんなこんなでひたすら模写していき、最終的なアウトプットとして「オリジナルHP」を作成しました。オリジナルHPWebデザインに1ヶ月間打ち込んだ成果物です。Railsアプリではないので機能は何もなく、一枚のHTMLにCSSとJSを少し足して作成したものです。自分的には結構カッコ良くできたのではないかなと思っておりますが、他のカッコいいサイトと比較すると、まだまだだなとなってしまいます。スマホ表示よりPC表示が気に入ってます。模写以外にもデザイン本を何冊か読んだりしましたが、最終的に自分で何か作品を作ってみないとデザイン知識が頭の中でふわっとしたまま終わってしまうので、しっかり頭のどこかに着地させるためのアウトプット作業が大切だと考えます。悶々としていた気持ちを解決すべく、約1ヶ月もの期間を使ってWebデザインをひたすらやり、少しは納得のいく構成が作れるようになり、気持ちが晴れるかなと思ったのですが、むしろデザインの奥深さに、自分にそれができるのかと、混沌を感じ始めるようになってしまいながら4ヶ月目に突入しました。フロントやりすぎたので、バックエンドに戻ります。今回は先に成果物を載せます。4ヶ月目はWebデザインを少しかじった上で、今一度オリジナルアプリ開発に挑戦しました。作成したのは「朝の情報番組の占い結果をまとめてチェックできる」アプリです。今回は「Railsアプリと外部サービスとの連携」と「本番環境構築」を学習テーマとしております。具体的にはAPIを活用し、AmazonやSNS等と連携させた機能を多く取り入れてます。本番環境構築の練習として、さくらVPSと契約し、空のサーバー内に一からRailsアプリをデプロイしました。@fortune_checkerこのアプリは、スクレイピングで各番組の公式サイトから占い結果を取得し、データベースに保存しております。Jobとcronを用いて、バックグラウンドで時間指定の自動化を行いました。Twitterとも連動させ、毎朝のスクレイピング処理の直後に結果一覧をツイートするbotを作成しております。番組別ランキング総合ランキングをそれぞれチェックできるようになってます。今回APIを活用して、連携した外部サービスはTwitterAmazonSlackの3つです。Twitterはbotとして利用してます。メイン機能のひとつです。Twitterで大まかに各番組のランキングを確認でき、さらに詳細に知りたい人はサイトで見てください、という流れです。APIで引っ張ってきたものです。購入リンクとして連携させようと思っていたのですが、色々考えた上でやめました。AmazonのAPI実装したので、せめて画像だけでも残しときたいと思い、今の状況にしました。仕組みとしては、占い結果のラッキーポイントやラッキーアイテム内容で、Amazonデータベースに検索をかけ、検索1位の商品のイメージ画像を表示されております。変なの出てきて、なかなか面白いです。基本的にラッキーポイントで検索かけて、該当0はありませんが、「モニュメントがある広場」が、めざまし占いのおひつじ座のラッキーポイントだった際に、検索結果が0でエラー出たので、対策しました。最後にSlackです。Slackは、スクレイピング処理の実行確認の通知用に導入しました。このアプリの肝は「スクレイピング」です。設定したスクレイピングでエラーが発生してしまった場合、何も表示できなくなってしまいます。スクレイピングのコードは環境依存にどうしてもなってしまうので、予期せぬ取得先の公式HPのHTMLに変更があった場合、間違いなくエラーになります。少なくとも「エラーの発生」がすぐわかるような整備を行う必要があり、そこでSlackを利用させていただきました。逆にスクレイピングに失敗したら、このようにそれぞれ自分のSlack宛にメッセージが届きます。まではデブロイを全てHerokuで行っていました。今回は本番環境設定の勉強をするために、「さくらVPS」と契約し、一から設定を行いその中に占いアプリをデプロイしました。何もわかってなかったので、VPS契約しての環境構築は非常に勉強になりました。「SSHとかFTPとかSFTPは全部HTTP的な感じなんだなー、プロトコルとはそういうことか。」くらいの感想が出るくらいの素人ですが、なんとか実装できました。最終的に構築した環境は、VPS:さくらVPSOS:CentOS7Webサーバー:NginxApplicationサーバー:Unicornデータベース:PostgreSQLです。ドメイン取得はお名前.com、DNSはCloudflareを使ってます。クラウドフレアはSSL証明書を自分で取らなくても簡易的なSSLを設定できて便利です。DNSとしても使いやすく、IPアドレスの切り替えや、HTTPSリダイレクトなども、コマンドを使わずブラウザ上で設定でき、なおかつ早いです。簡易SSLなので、がっつり個人情報取り扱ってサービス展開していく場合は、ちゃんと証明書取らなけれなりませんが、今の僕の規模感のアプリだと丁度良いです。その他のサーバーの使用感は正直まだよくわかってません。Nginxは速いとか聞きますが、実感として感じることはありません。データベースもDICで推奨されたPostgreSQL以外使ったことがないので、他のDBも試してみたいです。大まかな流れや初期設定関係は、ドットインストールとネットの記事を参考に構築しましたが、サーバー設定はDICのテキストが非常に役に立ちました。手元にDICのテキストがあると、効率よく学習できます。本番環境構築なんとかなってよかったです。以上、僕の4ヶ月間のプログラミング学習の進捗はこんな感じです。まとめ最終的に開発したアプリの紹介になってしまいましたが、現状の僕のプログラミング学習進捗はこのような状況です。プログラミング学習は、わけわからないながらも、とにかく定義した目標を達成するために「手を動かす」ということが、今までの全ての学習に共通する基本スタイルだと改めて感じます。Webデザインと比較すると、プログラミング学習は解答が明確に存在するので、その点は良いのですが、環境構築したときの「まだまだ勉強しなければならないことがヤバいくらいある」感はすごかったです。「数年後には今の技術は使われてないかもしれない」とか脅された日にはかなり気持ちがしんどくなりますよね。言ってますが、何よりも一番の不安は「起業を目指せるほどのサービス」のアイデアを出せるかというところなんですけどね。考えてもしょうがないですけど。今後も、イメージしたものを実現できる技術を身につけることに専念します。以上ありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。ハンバーガーメニューを自作したい。