Edited at
SchooDay 23

挫折しがちな人のための、Webプログラミング学習法

More than 1 year has passed since last update.


はじめに

本投稿はSchooの年末特別企画「Schoo Advent Calendar 2016」への投稿記事になります。

こんにちは。@tazawa_naoto です。Schooには今年の10月にエンジニアとして入社しました。

Schooが教育サービスを提供しているということもありまして、今回は、初心者向けのプログラミングの学習法について記事を書いてみたいと思います。

プログラミングと言ってももちろん様々なプログラミングがありますが、ここではWebに絞って個人の体験をもとに書いてみます。

賛否あるかもしれませんが、挫折しがちな人向けの一つの方法として読んでいただけたらと思います。

これから書く内容の前提ということで、私のことをちょっとお話します。

今でこそエンジニアとして仕事をしてはいますが、実は開発の経験は浅く、数年前に独学で勉強を始めたのがきっかけだったりします。

ITとは全く別の業界で、ITの知識もなければ知人もいないような状態で、なんとか手探りで勉強をしてました。

なぜ自分が一人きりで学習を続けれられたかと言うと、作りたいサービスが最初からあって、それがある世の中を見たいという思いが支えになっていたからでした。

そんな経験をもとに、反省点も交えながら楽しくWeb開発の学習を続けられるコツをご紹介してみたいと思います。

そして最後には、出くわした罠についてもご紹介します。


挫折しないために大切なこと


  • 自分が作ったサービスが流行ってる世界を想像してニヤニヤする

  • 真面目にやりすぎない

この2点に尽きるのではないかと私は思ってます。それぞれ具体的に考えてみます。


ニヤニヤする

学習において何でもそうだと思いますが、習得したときの自分を思い浮かべることは、モチベーションを高めるために重要です。

Web開発であれば、自分が作ったサービスがたくさんの人に使われてる様子を想像するのがいいと思います。

そのために大切なのは、「勉強始めるこの時点で作るサービスを明確にして、それを作ることを目標にする」ということです。

目的がなかったり、義務的に勉強していてもモチベーションが上がりませんしね。


真面目になりすぎると先に進めない

勉強し始めても全然習得している実感がないのはとっても不幸です。つまらなくなって挫折してしまいます。

学習は勢いが大切ですから、細かいことは後回しでいいと思います。

そのうち一流になるわけなので、今は気にする必要はありません。


何をつくればいいのか

とは言っても何を作ったらいいのかなんて簡単に思い浮かばないかもしれません。私がそうだったのですが、最初に作ろうとするサービスって漠然としてて壮大になりがちだったりします。

そんなに難しく考えずに、世の中にたくさんあるようなツールでもいいので、その模倣で同じものを作ってみることをオススメします。

なぜかと言うと、同じものを作ろうとしたところで、自分のオリジナリティーは誤魔化せないからです。

簡単なToDoアプリや、おみくじのようなもので全然問題ありません。

サービスを作り慣れている人は、次第に作るものが限定的な用途のものだったり、地味なテーマのものになっていったりするものです。


どうやって勉強するか

どんなものを作りたいか、先に決めてしまうと便利な理由として、「調べものベース」で学習が進められるということがあります。

「Webページの画面ってどうやってつくるんだ?」 → HTML

「かっこいいデザインのサイトつくるにはどうしたらいいんだ?」 → CSS

「ここをクリックしたら、ここがこう動くようにしたいぞ」 → JavaScript

「ログイン機能があって、ユーザー管理したい」 → PHP, MySQL

完成形から逆算しながら学習ができると、だんだん出来上がっていく様子が確認できて、ワクワクしますからね。

ではWeb開発で必要な技術について、それぞれ具体的に見ていきます。


HTML, CSS

HTMLやCSSはプログラミング言語というわけではありませんが、Webを作るための前提の知識として、これが理解できるとまずテンションあがります。

プログラミング学習では、だいたい最初に出てくるHTMLとCSSですが、実はかなり奥が深く、しっかり理解しようとするとキリがありません。

ですから、自分が求めてる見た目になっていたらOKという感じで、最低限だけ学んで次に進んだほうがいいと思います。

勉強していると、<section><article>とか出てきますが、当然正しいHTMLを書くには必要なタグで、SEOにも関わってくるのですが、見た目には関係ありませんので、最初は後回しでいいです。

CSSに関しても、これまた奥が深すぎるので、最初は割り切って望んだ見た目になっていれば良しとします。

CSSというのは、自由に書けすぎるだけに破綻がしやすかったりします。自分で書いたコードが大量になってきて管理に困ったときにまた勉強すれば良いので、最初は難しいことは考えずに気軽にやっていきましょう。

あと、HTMLとCSSにおいては、必殺のBootstrapというものがあります。これは、HTMLの中で先に読み込んでおくと、コピペでそれっぽいデザインが作れてしまうというスグレモノです。こういうのをCSSフレームワークといいます。

プロの現場でも使うものですので、見た目はBootstrapで済ませるというのも一つかもしれません。そして何より、Bootstrapをコピペするときに、そのコードを見て勉強できるという意味もありますね。


Schooのおすすめ授業


JavaScript

JavaScriptになると、いよいよプログラミングになってきますね。

実は、Webサービスの構築において、JavaScriptが自分で書けることは必須ではありません。ちなみに私は、最初に作った個人サービスは、ログイン機能があってSNS的な要素もあるようなものだったのですが、JavaScriptは全く書けない状態でした。

でも見た目はそれっぽい感じで、動きも多少はあるデザインでした。

そのカラクリはというと、例のBootstrapと、jQueryとそのプラグインを使っていたからです。

JavaScriptにはjQueryという、JavaScriptを簡単に扱えることのできるライブラリがあります。

jQueryのプラグインには、「これをHTMLのどの位置にコピペして、どう設定すると、どう動くよ」と丁寧に解説されているものも多いですから、実はJavaScriptはもとよりjQueryの理解がなくても使えてしまいます。

ですので、最初は理想の見た目にするために、プラグインのようなツールを使っていきましょう。

いやいや、学習法になってないじゃないか!と思われるかもしれませんが、大丈夫です。

当然、BootstrapやjQueryプラグインに依存していると、限界が訪れます。思い通りのデザインやインタラクションを表現するためには、自分でJavaScriptを書かざるを得なくなります。そうなったときに初めて、調べながらでもいいので自分で書いていきましょう。

必要に迫られて調べて書いている時点で、もはや学習法なんて必要ないと私は思っています。

jQueryを使って簡単に動きを作っていく分には、そんなに難しくはないですから。

そんなわけで、最初はJavaScriptに関しては、「jQueryを学ぶ」くらいのつもりで大丈夫だと思います。

「ここをクリックしたら、このパネルが表示されて」みたいなことを、jQueryを使わず素のJavaScriptでやるとか、無駄感があってもはや憂鬱ですよ。


Schooのおすすめ授業


PHP

サーバーサイドの言語はPHPの他にもたくさんありますが、私が使っているということと、Web専用の言語ということでPHPとさせていただきます。考え方の話をするだけなので、なんでもいいのですが便宜上PHPとしますね。

私がそうだったのですが、HTMLとかCSSまではなんとかわかるものです。ブログのデザインのカスタマイズとかを通して、なんとなく触ったことがある人も多かったりしますからね。ただ、ログインして自分しか見れないページがあったり、みたいな領域になると、何がどうなってそうなるのか、全く検討がつかなかったりします。

そういうのを実現できるプログラミング言語というのが、PHPです。サーバーサイドが書ける言語では、他にもRubyやPythonとかがありますね。

仮にToDoアプリ的なものを作ろうとしたとして、これまでのHTML,CSS,JSまでの知識で作ったとしても、ブラウザ閉じたらデータは消えてしまいます。他の端末から見ることもできません。

というわけで、ここで「データベース」という概念が出てきて、MySQLが登場します。イメージとしては「ユーザーの情報をPHPで受け取って、MySQLに保存する」みたいな感じです。

このように動作するものをWebアプリケーションと呼びます。一般的にWebサービスと言われるものです。

サーバーサイドの開発に入ってくると、覚えることというよりも、理解するべきものが出てくるため、ピンとくることがないまま挫折してしまうことも少なくないかもしれません。

理解できなかったら、とりあえず理解できないままでいいので、サンプルプログラムをコピペしちゃいましょう。サンプルのコードでもいいので、コピペして動かしてみることで、まず感動を覚えることが先です。

動いてから、「なんで動いたんだろう」って考えればいいので、気軽にやっていけばいいと思います。どうせそのうち一流になるので今は大丈夫です。

あと、MySQLとかを単独でとりあえず学習するっていうのはあまりオススメしません。「で、これ実際どう使うの?」とかなって、たぶん楽しくはないし、最初はあくまでWebアプリを作っていく過程で必要なものとして学ぶくらいで大丈夫です。

あ、あとサーバー言語を使うときは、HTML,CSS,JavaScriptを扱うときと違って、開発環境の準備がちょっと面倒です。このあたりは、無理に理解しようとせず、紹介されてるチュートリアルなんかに沿って準備すればOKです。


Schooのおすすめ授業


サーバー

というわけで、今までご紹介した技術を使えば、Webサービスは作ることができます。当然、公開することを目標にがんばってきたわけですし、公開しなければ今までのニヤニヤはなんだったのかという話になってしまいます。

PHPを使って開発していたということは、おそらく自分のPCに仮想のサーバーを立てて自分だけが見られる環境だったと思います。これを公開するにはみんなが見ることができる場所にアップする必要がありますね。

でも、こういったサーバー周りのインフラというのは、今までやってきた「プログラミング」的要素から離れて、ちょっと機械いじり的な概念が出てきます。覚えるというより、理解が必要な領域にもなってきます。

ここにきて挫折するわけにもいかないので、PHPの開発環境を作ったときのように、チュートリアルを見ながら見よう見まねで頑張ってみます。せっかく作ったサービスなのですから、意地でも公開しましょう。「このやり方でいいのかな・・・」とか余計なことは考えなくて大丈夫です。いつか一流になるので今は気にしません。

ちなみに私は、初めてサービス公開したとき、素人のくせに「ちゃんとしないとアクセス過多で落ちたりするのでは?」と生意気なことを心配していました。落ちるくらいのサービス作れたら、それはすごいことです。そのときは落ちたことを誇りましょう。

最初は作ったサービスが動く最低限のスペックを持ったサーバーで問題ありません。


Schooのおすすめ授業


以上で

以上のような流れで、独学でも、自分が作ったWebサービスが公開できる状態になっていると思います。実際、私は小さいものも含めて3つほどサービスを公開したときまでは、相談できる知人もいなく完全に一人でやっていました。

ただし、その後、会社に入ってチーム開発に参加したとき、大きな壁が待ち受けていました。独学でプログラミングをやってきた人間がハマる罠についてもご紹介してみたいと思います。


独学の罠


Gitって何・・・

Git(ギット)とは、作業履歴を管理できるツールのことです。チーム開発をやっていると、誰がどこをいつ作業したかの確認が必要だったり、別々の作業分を統合させるなんてことも日常的に行います。

チーム開発では当たり前のこのGit、独学でやっていると存在すら知らないまま時は過ぎていきます。最初から知っておく必要はありませんが、作業の差分を管理するという考え方は面白いと思いますので、余裕があれば一人でやっているうちから使ってみるといいかもしれません。


Webアプリケーションフレームワークって何・・・

実際の現場ではフレームワークを使わずに開発をすることはほぼありません。にも関わらず、これまた独学でやっていると存在すら知らないまま時は過ぎていきます。

PHPで言えば、CakePHP, Laravel, symfony, Codeigniter, 他にもたくさんあります。

フレームワークを利用すると、Webアプリケーションを効率的につくることができます。セキュリティ対策なんかもやってくれたりします。

これらのフレームワークというのは、初心者の域を出ると考えられるためか、入門者向けにはなかなか紹介されないようです。そのせいか、これまでご紹介したような「調べ物ベース」の学習方法をとっていると、知る機会があまりありません。損でしかないです。

Webアプリを作るなら、初心者のうちからでもぜひ利用しておく技術だと思います。

JavaScriptに関してもフレームワークというのはあって、React.js, Angular.js, Vue.js, Backbone.js等いろいろあります(ReactやVueは厳密にはライブラリですが)。

JavaScriptに関しても、現場ではこのフレームワークを使わない開発というのは少ないです。近年ではWebアプリをjQueryで構築することはまずないでしょう。

にも関わらず、やっぱり初心者の域を出てしまうからなのか、入門者としては知る機会がない技術です。

ただ、サーバーサイドのフレームワークとは違って、最初から使う必要はないと思うんですよね。jQueryとかでせっかくお手軽なプログラミングを知ったのに、今度は実装以外にも使うために難しい技術がいろいろ登場してきます。

JavaScriptに関しては、実力がついてきてからいろいろ触ってみれば良いと思います。

個人的に思うのは、PHPフレームワークに関してだけは最初から知っておきたかったですので、PHPをなんとなく知ったら、フレームワークのことも軽く頭に入れておくことをオススメします。

あ、Laravelに関しては今回の「Schoo Advent Calendar」でも @ohida が詳しくご紹介しています。チュートリアル形式ですので、一緒に進めていくことができますよ!


というわけで

以上、言いたかったのは、あまり気負わずに学習をすればいいのかなということです。

最終的に、目的の到達点にいればいいわけですから、途中失敗したっていいんです。おそらく、今回ご紹介したような、Webサービスを公開する前提で突っ走っていくやり方で進めていくと、いろんな失敗をすると思います。失敗をするということは、自分が何かに挑戦をしたということでもあります。

プログラミングを学ぼうとしている方は、きっとその先の何かを目標にされていると思います。世の中にWebサービスを送り出したい、現場でバリバリ働くエンジニアになりたい、またはとりあえずスキルとして習得しておきたい程度の方もいるでしょう。

でも、やっぱりプログラミングはあくまでそのためのツールの一つです。それを使ってどんな活躍をしていくかは、その後の生き方がすべてです。挑戦して失敗して挫折しながらも学び続けることができたなら、その先の活躍は必ず訪れることでしょう。

私が最初からWebサービスをつくることを前提にしたほうがいいと思う理由が一つあります。

Webサービスというのは、同時に「使う人」も存在します。つまり、Webサービスを作るために学習しているときは、無意識に「使ってくれる人を思い浮かべながら」学習しているときでもあります。

楽しいもの、便利なものを作って、みんなに使ってもらいたいという思いは、どんなものより学習のパワーとなります。特別な思いによって作られたサービスは、未熟であってもその本人にしか作ることができないものです。

私がWebサービスを作って一番意外だったのは、自分自身に素敵な出会いがたくさん訪れたことです。私のWeb業界との接点は、すべて個人で作ったサービスから始まりました。

プログラミングという、一つのスキルを習得しようとしているとき、実は新しい人生もまた、始まっているということを最後にお伝えしたいです。


仲間を募集しています

Schooでは一緒に働いていただける方を募集しております。学ぶことの楽しさ、共に追求しましょう!

https://www.wantedly.com/companies/schooWEBcampus/projects