※ まだまだ勉強中ですので参考程度にお読みください。
※ 今回の記事は初学者向けの話で技術的な内容はあまりありません。
どんな感じでWebサイト実装していくのか、ある程度理解したよ
この一年は私のエンジニア人生の青春でした。
知識０、経験０からエンジニアとして羽ばたくために。
一年間ずっと家でコードばかりいじってました。
休んでいる時も、飯を食いながらも、常にコードを見ており、隣の芝生もコードwという、コードばかりの一年です。
少し大げさに言いましたが、それだけエンジニアになるため、真剣でした。
そのおかげで、Webサイト制作に必要なフロントエンド言語(HTML,CSS,JS)から、PHP, Pythonなどのバックエンド言語まで学習することができ、仮想通貨に関するサイトを作ったり、企業から大きな案件をいただいたりすることができるようになりました。
まだまだ学習中の身ですが、この経験が誰かの励みになれば嬉しいなと思い、記事にすることにしました。
エンジニアになるために大事なことは、やっぱり手を動かしてコードを書くことです。たとえわからなくても。
まずはHTMLとCSSから始めよう
Webページを作成したいと思った場合に、まずHTMLから始めるといいと思います。その次にCSSです。
今から勉強するならHTML5とCSS3だけでOK。
それ以前のXHTMLなどは出てきたらその都度調べる程度でいいかと思います。
おすすめの勉強方法
- 参考にするサイトのページのソースを表示する。テキストエディタでひたすら.htmlファイルを無心で作りつづける。
- プログラミング学習用の勉強サイトを使う。ドットインストールやプロゲートなどが主流だと思います。
- テックアカデミーなど短期間スクールに通う。
互換性などが気になる場合はこのサイトを使って調べることもできます。
PHPとJavascriptの理解度は緩やかな二次関数
- 関数プログラミングの背景が深い
- オブジェクト指向という概念Class/Prototype
- サーバーサイドとクライアントサイドの違い
- 静的・動的の違い
- ファンクション（関数）とアレー（配列、リスト）とオブジェクト
個人的に概要のような歴史的な背景から学習を始めることが多いんですが、これがぱっとしないんですよ。書いてる内容もわかるし、理解もできるんだけど、具体的な使い所がぱっとしない。（この方法は初学者にはおすすめしません。）
学習初期ではサーバーサイドとクライアントサイドの違いがよくわからない。何がどう向いているのかもわからない。
- ES6(ES2015)とそれ以前の違い
- DOMと仮想DOM
- MySQLなどのデータベースとの結合
基本PHPとセットになるのがMySQLなどのデータベース。
それらが合わさることで記録されていた情報を使ったり保存したりできるが、初学者は勉強量が増える。
かなり勉強の量が増える割にできることがぱっとしないし、学習進度は極めて緩やかである。
Javascript
HTML/CSSからワンランク上のWebサイトを作成する際に必要になる言語。Javascriptを使うことでアニメーションなど動きをつけたWebサイトを作れるようになります。
PHPやRubyよりもJavascriptの方が将来性がある反面、クライアント、サーバーサイドで活躍できる言語のため学習範囲が膨大です。
まず、クライアントサイドのWindowオブジェクト辺りからやってみることをおすすめします。
間違っても私みたいに仮想DOMがやりたいからと言ってサーバーサイドのFrameworkを触ろうと思わないほうがいいです。笑 サイトが完成するまでにかなりの時間がかかってしまいます。笑
またECMAScript 2015 (ES6)の仕様が定義されたため、ES5とES6の構文が混在してる情報がいっぱいあります。結構ごろっと変わっているので、慣れてない場合はほんとに迷子になります。
最初からMDNのサイトなどを見るのはすごく大変でしょうから、Javascriptを初めて触るという方はまず本屋に行ってES6対応の本を手にとることをおすすめします。
PHP
HTMLやCSSは作成者側から一方的に情報を発信するのみでした。
クライアントサイドのJavascriptで作られたページはユーザ側からのアクションに対して一時的に対応できました。
しかし、それはユーザがリロードやブラウザバックするまでのことで、次訪れたときはまた最初からです。
継続的にユーザからのアクションに応えていきたいと思った時にPHPが選択肢に入るのではないでしょうか。
データベースと連携をしてIDとパスワードを取得して認証したりできます。(Auth)
新しいページを作って、表示して、変更して、削除したりできます。(CRUD)
PHPの特徴は何かする際はサーバー側に問い合わせしないといけないということです。
さて、PHPの肝心の学習方法ですが、これも自分に合った本を見つけるのが一番です。詳しくはまた別ページにてまとめます。
しかし、まずはHTML→CSS→JavaScriptの順で勉強し、簡易なWebサイトを作ってみることをオススメします。
高い目標は、時に自分を苦しめる
理想と現実のギャップ
これらを勉強して実際重い腰を上げてオリジナルの大規模なWebサービスを作ろうと思うとまず挫折すると思います。実際私は挫折しました。笑
友「Airbnbみたいな民泊サイト作ってや。俺マネージメントするわｗ」
私「え。それまじで言ってる？ちょっと考えるわ。。」
『。。。ユーザ認証、データベースのテーブルの構成、JSのUIUXデザインの作成。。ect』
「ごめん。今の俺ではこれ無理やわ。個人レベルでどうにかなる代物じゃないｗ」
それからもこんなサービス作りたいと思って試みたが、結果はみんなの想像通りだ。
どうして作れなかったのか？
挫折から学ぶWebサービス
何故かと言うと、普段みなさんが使っているWebサービスは今でも進化を続けるWebAppであって、Googleなどの検索エンジンで検索できるWebサービスは超一流のエンジニア集団が作っている代物です。
作成するのに時間もお金も人も使っているWebサービスが、一朝一夕で作成できるなんて世の中そんなに甘くありません。。
でも、そこまで悲観することはないです。
以前紹介したLaravel TodoAppは、ユーザーの入力をDBに保存し一覧表示するもので、どんなWebサービスでも使われている技術です。
Social Login Appはユーザ認証の原型でもある。
こんな感じに小さいプロジェクトを作成して組み合わせることで大規模なWebサービスを作ることができるようになる。
それがかなり加速度的に急速に訪れる。パズルが解けるように。そしてまた壁にぶち当たるのだ。
同じことを繰り返すことで理解度が深まる。
これは一般的に言われていることで、プログラミングに限ったことではない。
インプットとアウトプットは別物だ。
あたりまえのことだ。親が子供に言うような話で申し訳ない。
でも実際勉強は読んで書いて覚えて教える。こんな感じで理解度が変わっていく。
繰り返し、繰り返し、ボロボロになるまで繰り返せ。
本を参考にしている人はまず何も考えずに最初っから最後まで３回繰り返す。東大主席の人は７回教科書を読んでたらしいが。笑
同じ内容のものを３つ用意して読み比べる。いろんな視点からその内容を理解することができる。
一年間の学習方法を書いてみて
今回は、Web系言語を中心に一年間振り返ったことを書いてみました。初心者の方は、内容がわからなくても大丈夫です。少しずつ勉強すれば、いづれわかる日がきます。その日を楽しみにしていてください。
初心者の方で、もしこの記事を読んで何かわからないことがありましたら、ぜひお気軽にメッセージください。問い合わせ欄やTwitterでの質問でも、私にわかる範囲内であればお答えします。
また、この記事を読んで、「Webサイト制作を頼んでみようかな」とお思いの中小企業や個人の方はぜひお気軽にご相談ください。 お仕事も受け付けています！その際はWebサイト右上部分の”Contact”からどうぞ！
コメントを残す