#はじめに
大学の授業でちょっとかじったことがある程度で、ほぼプログラミング初心者だった自分が、
7月から勉強を始め、一ヶ月かけてようやくWebアプリ（と呼べるほどの代物じゃないですが）を作れたので、
何かの参考になればと思い、参考にしたサイトや情報をまとめてみました！
こうやって公開するのも恥ずかしいレベルの内容ですが、
私と同じ初心者の方の参考になれば嬉しいです！
#作成環境
・利用言語：HTML,CSS,Javascript
・PC：Mac
・エディター：Atom
・公開環境：Github
基本はローカルのMacでAtomを使いながらコードを書いて、適宜chromeで動作確認。
最後にGithubにアップロードするという流れで公開しました。
Githubを使うとインフラのことを何も考えずにサイトを公開できるのでお薦めです！
※手順は後述のProgateで勉強しました。
#作ったアプリ
「ぶたまるチョイス」
今日は「買い物」にしようか、それとも「勉強」しようか、
どっちにするか悩んで決められない・・・みたいな時に使えるアプリです。
やりたいことを２つ入力すると、ぶたまる君がどちらかランダムに選んでくれます。
■初期画面
■やりたいことを選んでボタンを押すと・・・
- - - - - - - - - - - - - -
こうやってみると凄く単純なサイトなのですが、
作り上げるのに丸一日（８時間）もかかってしまいました…
そのほとんどが、自分のイメージ通りにcssを書けないことが原因でした。
例えば、結果の表示画面と、ぶたのキャラクターを横並びに表示したかったのですが、
なかなか思い通りにならず、最終的にかなり荒業を使って形にしました。
上手な書き方は、きっと今後勉強していく中で身につくもんだと決め込んで、
とにかく完成させることに重きをおいて取り組みました。
サイトのURLとソースコードを下記に記載しておきます。
【URL】https://inamurayuta.github.io/instead_of_deciding/
【ソースコード】https://github.com/InamuraYuta/instead_of_deciding
#勉強に使ったサービス
上記アプリを作る前に、事前に下記のサービスを使って、
フロントエンド（HTML,CSS,Javascript）の知識を学習してから挑みました。
・Progate（およそ10時間）
・ドットインストールの講座を３つ（およそ10時間）
・teratail（困ったとき）
###■Progate
ブラウザだけで学べるプログラミング学習サイトです。
初めは無料の範囲でやっていたのですが、
とても使いやすく勉強になりそうだったので、課金に切り替えて勉強しました。
https://prog-8.com
※レッスンを受けるたびにレベルが上がっていくのが楽しい。
アプリを作るまでに受講したコースは下記です。
- - - - - - - - - - - - - -
【HTML&CSS】
・HTML＆CSS-学習コース初級編
・HTML＆CSS-学習コース中級編
・HTML＆CSS-学習コース上級編
〜ミニチュートリアル〜
・HTML&CSSの開発環境を用意しよう！
・検証ツール（デベロッパーモード）の使い方
・自分で作ったWebページをインターネット上に公開しよう！
【Javascript（ES6）】
・Javascript-学習コース1
・Javascript-学習コース2
・Javascript-学習コース3
・Javascript-学習コース4
【jQuery】
・jQuery-学習コース初級編
・jQuery-学習コース中級編
【その他】
・SQL-学習コース1
・SQL-学習コース2
・Command Line-学習コース 基礎編-
・Git-学習コース 基礎編-
- - - - - - - - - - - - - -
Progateは完全初心者でも学べるので、初めてやるには一番オススメだと思います。
ただ、当初は、これで勉強して、すぐにアプリ作成に取り掛かろうと思っていたのですが、
実際にやろうと思うと、まったく手が動かず…
そこで、もっと実践的な勉強も必要だと気づいて始めたのが次のサービスです。
###■ドットインストール
動画を見ながら学べる学習サイトで、
実際に作成する流れに沿ってアプリを作ることが出来るので、非常に分かりやすかったです。
※完成されたコードを真似るより、格段に理解しやすい気がします。
下記３つの講座を受け（全て無料！）、
講座の中で学んだコードは、いくつか今回のアプリにも転用しています。
https://dotinstall.com/
- - - - - - - - - - - - - -
■パスワードジェネレータ（HTML/CSS/Javascript）
https://dotinstall.com/lessons/pwd_generator_js_v3
【URL】
https://inamurayuta.github.io/password_generator/
- - - - - - - - - - - - - -
■おみくじ（HTML/CSS/Javascript）
https://dotinstall.com/lessons/omikuji_js_v3
【URL】
https://inamurayuta.github.io/Fortune/
- - - - - - - - - - - - - -
■割り勘電卓（HTML/CSS/Javascript）
https://dotinstall.com/lessons/go_dutch_js_v3
【URL】
https://inamurayuta.github.io/Dutch_treat_calculator/
- - - - - - - - - - - - - -
###■teratail
何回見直してもエラーの原因が分からない・・・みたいなときは、下記サイトで教えを請いました。
プログラミング版のyahoo知恵袋的なサイトです。
深夜2時に質問したのに即レスが来てビビリました。すごい！
https://teratail.com/
##最後に
本やサイトで勉強するのも大事ですが、
それ以上に、「なにか作ってみる」というのが大事かなと個人的には思いました。
実際に作らないと、なかなか身につかないし、楽しさも感じにくい気がします。
※私は本だとまったく読む気にならないので、webで学べるサービスだけで勉強しました。
あと、自分の考えた通りに動くアプリが出来ると、めっちゃ嬉しいので、
もしまだ、これからプログラミングを始めるという方がいたら、
ぜひこの感覚を味わって欲しいなぁと思います！
※ここに記載した内容の範囲であれば、
分かる範囲で質問にも答えられると思うので、何が不明点あればご連絡下さい！
【Twitter】 https://twitter.com/InamuraYuta