【Webサービス作成日記】独学での勉強・学習方法・ツール_03

Webサービス作成日記03_独学での学習方法とオススメのツール Web開発

前回投稿してから早3ヶ月弱。Webサービスを作成する上での最低限?の勉強を実施してみたので、独学で学ぶ上でのツール選定の参考になればと思い、その軌跡を記す。

今回のとりあえずのゴールとしては、「Webサービスをなんとなく作れるようになる」ということで勉強を始めたのだが、結果としては「Railsチュートリアルを完走して少しカスタマイズできるぐらいの知識とスキルを得る」ということであったのだなぁと感じている。なお、筆者あるふ の既存の知識等とRuby on Railsを選択した理由等については下記の記事にまとめている。

個人的なおすすめの勉強・学習方法・ツール

勉強方法やツールは、人それぞれ合う合わないがあるため、参考程度にしていただきたいが、個人的には下記のツールが良かった。

Progate + ドットインストール + Railsチュートリアル

全て基礎的な内容から実際に手を動かして学ぶ実践的な内容が網羅されているものである。IT・教育関連の業界にいて感じるのは、「実際やってみないと身に付かない」である。本を読んだり動画を見たりするだけでなく、得た知識を実践することが非常に大事である。そして一つのツール、教材だけでなく、複数のものを活用すると飽きずにより前向きに学習できる。

また、知識を得る際には、ただ読む・ただ観るだけでなく、どのような内容であったか記録すること(アウトプットすること)が大事である。ブログ、TwitterなどのSNSを活用するのも良いし、ノートにまとめるのも良いだろう。筆者あるふ はPC上の電子ノート(OneNote)とVSCode上のコメントに記録した。OneNoteでは、言語や単元毎にページを分けて記録してまとめた。基本的にはタッチペンで記入し、わからなくて追加でネット検索した場合、そのページのリンクを掲載した。ただし、これは自分が振り返ったときになんとなく思い出して、その情報源に辿り着ければ良いものと割り切って、アウトプットが目的になって時間をかけ過ぎないことが大事である(筆者あるふ がブログで定期的に記録しなかった理由はここにあります)。

一から学ぶならまずはこれ!Progate

Progate は、「スライド形式で学ぶ」→「ブラウザ上で用意されている開発環境で学んだ知識を実践」を繰り返す形式のものである。単元毎に、振り返り演習(道場)が用意されており、「スライド通りやればできる」だけで済まされないような工夫もある。基礎から学ぶ上では非常に優れたコンテンツであると感じている。無料のコースも一部あるが、有料登録して学習することをおすすめする(2022年1月現在 1,078円(税込)/月)。
(というか高校でのプログラミング学習に活用しちゃっても全然良いような…)

お膳立てされた環境での基礎的な学習となるので、Webサービスを作る上ではこれだけでは足りないと感じた。そのため、Progateで一つの言語を学んだら、下記のドットインストールで学ぶ流れが基本となった。

主な受講レッスン一覧
  • HTML & CSS 初級編・中級編・上級編・Flexbox編
  • SQL I・II・Ⅲ・Ⅳ
  • JavaScript I・II・Ⅲ・Ⅳ・Ⅴ・Ⅵ・Ⅶ
  • Ruby I・II・Ⅲ・Ⅳ・Ⅴ
  • Ruby on Rails 5 I・II・Ⅲ・Ⅳ・Ⅴ・Ⅵ・Ⅶ・Ⅷ・Ⅸ・Ⅹ・Ⅺ
  • jQuery 初級編・中級編・上級編

※ Ruby on Rails は、7が最新版となり、Railsチュートリアルは6の内容が最新となる(2022年1月現在)。

実践的な内容を学ぶならこれ!ドットインストール

ドットインストール は、1本3分以内の動画の内容に沿って実践していく形式のものである。開発環境は基本的にローカルPC(自分のPC)となるが、開発環境を整えるための動画も用意されている。一通り学び終えると、自分が書いたソースコードが蓄積されているので、Webサービスを開発する際に参考にしやすい。Progate同様、無料のコースも一部あるが、有料登録して学習することをおすすめする(2022年1月現在 1,080円(税込)/月)。

そしてこのドットインストールでの学習、正直めっちゃつらかった…。。。精神衛生上においては、自分にはあっていなかったと感じた。

3分以内にまとめられているので、一本の動画の内容がめちゃめちゃ濃かったりする。そして、3分以内なので、とてもテンポが良い。テンポが良過ぎて、動画を観ながら同時に実践していくことはかなり厳しい。動画であるため、一時停止しながら進めることを前提に作られているような気もする。

置いていかれる → 一時停止して巻き戻して見直す → もう一度一時停止して実践

これを3分以内の一本の動画で繰り返すことになった(筆者あるふ はノートやソースコードのコメントで内容をまとめていたので余計にこの作業が増えた)。

そして1本の動画毎に集中力が切れる。一本の動画が短いため、隙間時間でも学習できることを売りにしているドットインストールではあるが、良くも悪くも3分弱で一区切りついてしまうため、筆者あるふ 的には頻繁に授業終了のチャイムが鳴るような感覚であった。

ただし、一度動画を観ながら実践して、その後は振り返り動画としてしまえば、かなりの良コンテンツであるとは感じている。動画の良い部分も悪い部分も痛感した学習ツールであった。

また、レッスン内容がProgateよりも多岐に渡っている点も良い。

主な受講レッスン一覧
  • 詳解HTML 基礎文法編・フォーム部品編
  • 詳解CSS 基礎文法編・セレクター編・フレックスボックス編・アニメーション編・レスポンシブウェブデザイン編・グリッドレイアウト編
  • 実践!ポートフォリオサイトを作ろう・ECサイトをマークアップしよう・アプリ紹介ページを作ろう
  • GitHub Pagesでウェブサイトを公開しよう
  • はじめてのJavaScript
  • 詳解JavaScript 基礎文法編・オブジェクト編・DOM編・Intersection Observer API編
  • JavaScriptでモーダルウィンドウを作ろう・ハンバーガーメニューを作ろう・アコーディオンUIを作ろう・タブメニューを作ろう・カルーセルを作ろう
  • 実践!ポートフォリオサイトに動きをつけよう・ECサイトに動きをつけよう
  • MySQL入門 基礎編・応用編
  • UNIXコマンド入門
  • Ruby入門
  • Ruby on Rails 5 入門
  • Visual Studio Code入門・Emmet入門

※ Ruby on Rails は、7が最新版となり、Railsチュートリアルは6の内容が最新となる(2022年1月現在)。

Webサービス作成の本格的な学習!Railsチュートリアル

RailsでWebサービスを作ろうとする人の大半がやったことがあると筆者あるふ が勝手に認識しているRailsチュートリアル。Ruby以外の言語やRails以外のフレームワークでも活用できるようなスキルの習得を優先したWebサービス制作のプラクティスを意識した内容であると謳っている。

開発環境AWS Cloud9、バージョン管理GitHub、本番環境Herokuを用いた、Webサービス(SNS)制作の本格的な実践学習となる(テストも書くし、認証に関わるメール送信もやる)。

Ruby on Rails 6 に対応している第6版のWebテキストは税込1,078円、電子書籍が税込5,478円であり、Webテキストがお買い得である(電子書籍は全章検索ができたりとメリットもある)(2022年1月現在)。内容はA4サイズで800ページを超えるボリュームとなっている。さらには、より効率的に学ぶことができる動画を32,780円で視聴することができる(2022年1月現在)。この動画は、5日間のRails解説セミナーを撮影したもので、ハンズオンを受講しているような感覚で学習することができる。筆者あるふ は、最初から800ページを超える内容を読み込むのは効率的ではないと考え、こちらの動画視聴に登録した(全部見終わるのに2週間はかかった)(サンプル動画もある)。

本格的な実践であることはもちろんのこと、お作法や慣習まで学ぶことができるRailsチュートリアルは、Webサービスを制作する上で学ぶ価値がとてもあると今のところ感じている(一方で、かなりしんどいため、多くの人が挫折するらしい)。

また、一からちょっとしたSNSを作ったという事実は、単純に自信になる。もちろん、Railsチュートリアルを完走しただけではまだまだ足りないことだらけではあるが、独学で学ぶ上での基礎となることは間違いないだろう。

その他の学習方法・ツール

Gitの入門動画が好評!Udemy

Gitに関しては、評価が高いと噂の Udemy の「Git:はじめてのGitとGitHub」を無料で視聴することができるため、こちらで学習した。最新のUIと若干異なる内容となっているため、読み替えながら進めていく必要がある部分もあるが、この内容が無料なのは驚きである。こちらの動画を視聴してみて、Gitをさらに学んでいきたい方は有料のものも視聴して学習してみるのも良いだろう。

なお、ドットインストールのHTML/CSSの実習レッスンでも学ぶことができたため、筆者あるふ はそちらでも内容を補完した。

女子高生と一緒に学ぶ!?paizaラーニング

複数の教材で飽きないように学びを深めていこうと思い、paizaラーニングも受講してみた。paizaラーニングは、二次元女子高生である霧島京子さんが教えてくれる1本3分程度の動画に沿って、ブラウザ上で用意されている開発環境で実践的に学習していくといった流れとなる。Progateの動画版、ドットインストールの開発環境がブラウザで用意されている版といった感じである。

無料の講座もあるが、しっかりと学びたい場合には有料会員登録をおすすめする。有料のものは1ヶ月プランであれば税込1,078円となっており、12ヶ月プランなら1ヶ月あたり税込600円の7,200円となる(2022年1月現在)。

筆者あるふ は、講師である二次元女子高生の霧島京子さんがプログラムを実行する度に発する「えいっ!」や「どりゃー!」などの掛け声や、作成するコンテンツ名が「プロジェクトにゃ〜ん」であったりすることに苦手意識を持ってしまったが、Progateやドットインストールとは異なるシステム・コンセプトであるため、合う人には合うであろう。

上記の理由により、筆者あるふ はHTML/CSS入門編のみの受講となってしまったが、BootStrapを扱っていたため、Webサイトの見た目の作業効率化が期待できるCSSフレームワークの概要を掴むことはできた。なお、Railsチュートリアルの第6版でもBootStrapが使われている。

なお、paizaラーニングの「プログラミングスキルチェック」は、「プログラミングの基礎は学んだけど、実際に何を作ってみたら良いかわからない。でも勉強は継続したい。」といった人におすすめである。様々なお題に対してプログラミングをしていくことになるため、プログラミングの学習を深めたい方にとっては、競技プログラミングのサイト AtCoder と同様に有益なものとなるかもしれない(個人的には早く自分の作りたいものを明確にしてそれに取り組んだ方が良いと考えているが、明確になっていない人が材料を集めるための一つのツールとして活用するのには良いことであると感じている)。

学習したもの・ツール・今後の課題

最後に、今回「Webサービスをなんとなく作れるようになる」、具体的には「Railsチュートリアルを完走して少しカスタマイズできるぐらいの知識とスキルを得る」といったゴールを達成するために筆者あるふ が学習したもの・ツールと、足りないと思っているもの、今後やってみたい・勉強したいと思っているものを一覧にしたものを掲載する。

【やる必要があった】
HTML/CSS :Progate + ドットインストール + paizaラーニング
SQL
Progate + ドットインストール
Git :Udemy + (ドットインストール)
JavaScriptProgate + ドットインストール + Qiita等でES6の記事
RubyProgate + ドットインストール
Ruby on RailsProgate + ドットインストール + Railsチュートリアル

【やっておいて良かった
jQuery :Progate
UNIXコマンド :ドットインストール
VSCode+Emmet :ドットインストール
BootStrap :paizaラーニング

【足りないと思っているもの】
インフラ環境・クラウド関連(Docker, AWS or GCP)
テスト(RSpec, テストツール)
英語

【今後やってみたい・勉強したいと思っているもの】
Hotwire(Railsチュートリアル 第7版 待ち)
CI/CD
レコメンドエンジン
(Webサーバー)

実際にはコンピュータサイエンス、ネットワーク・セキュリティ、Linuxの基礎知識も必要になってくるが、一応筆者あるふ は元インフラ系SEではあるので、今回は学習の対象外としている。

コンピュータサイエンスに関しては最低限、基本情報技術者試験の合格レベル、できれば応用情報技術者試験の合格レベルは合った方が良いと個人的には考えている。基本情報技術者試験の参考書は通称「猫本」と呼ばれている「栢木先生の基本情報技術者教室」が初学者にはおすすめである。筆者あるふ はこの本にお世話になり、IT素人から数ヶ月で基本情報技術者試験に合格することができた。

Linuxに関しては、Linux標準教科書を読んで、実際にAWSやGCPの無料枠でLinuxを構築してLinuxを触って学習するのが良いだろう。WindowsやMac、Chromebook上で構築しても良いとは思うが、Webサービスの公開を目指すのであれば、セキュリティには十分配慮した上で、AWSやGCPにチャレンジしてみることをおすすめしたい(本サイトはGCPの無料枠で運用している)。Linuxの構築方法に関してはインターネット上に数多く How to が掲載されているため、そちらを参考にして欲しい。もちろん資格ベースの学習でLPICなどに挑戦するのも良いだろう。

今後は足りないと思っているもの、今後やってみたい・勉強したいと思っているものに着手して、Webサービスの公開に向けて取り組んでいきたい。

次回以降では、Railsチュートリアル完走後、「こんな方法でこんなカスタマイズしてみた」を投稿していってみたいと考えている。

最後まで読んでいただきありがとうございました。本記事が、Webサービスの制作に今後チャレンジしようとする方の参考に少しでもなれば幸いです。

情報教育を中心に教育関連のことを発信していますので 他の記事TwitterYouTube もご覧いただけると嬉しいです。また、情報教育教材のまとめサイト も作成しています。教材だけでなく、入試情報や便利ツールの一覧集などのページもありますのでぜひご覧ください。

高校の情報科の元教員で、EdTech Webエンジニア(ネットワークスペシャリスト、情報セキュリティスペシャリスト、AWS Certified Solutions Architect – Associate 認定)。大学・大学院では実験心理学(人間の情報処理)を専攻。実践事例を報告したり、教育者向けだけでなく企業向けのイベントに登壇するなどの活動をしている。Google for Education Certified Trainer(Google for Education 認定トレーナー)。

Web開発

コメント

タイトルとURLをコピーしました