Web

未経験でWeb系プログラミング学習の始め方[実体験]

未経験でWeb制作スキルの身につけ方を紹介します

こんばんは、未経験でWeb製作に携わってるマサキです。

タイトル通りです。

未経験でWeb系プログラミング学習の始め方について解説していきます。これから手に職付けてweb業界で転職したい人たちに少しでも役に立てれば嬉しいです。

この記事の信頼性について

現在Webサイト製作会社に未経験で入社（入社して９ヶ月経過）

入社するまで：独学とプログラミングスクール通いで４ヶ月で学習。

学習中も前職に在職しながら会社退社後、夕食とお風呂以外は学習に奮闘してました。

＊プログラミングスクールに関してはまた後日記事で投稿します。

では本題に行きましょう。

①未経験でWeb系プログラミング学習で必要な言語

知識

そもそもなぜ僕がWEB系に進もうと思ったのは早く稼ぐためにも、「Web系」を選ぶのがいいかなと思ったからです。

※本記事は「完全初心者向け」なので、わかりやすさ重視で書いています。

まず本記事の本題に入る前にこの２つの言葉を覚えてください。Web系に入るなら意味も理解した方がいいですね、

それぞれわかりやすい言葉で説明します。

フロントエンド

バックエンド

フロントエンドはユーザー、僕たちが見ている画面やページの部分のことです。

バックエンドはフロントエンドからのデータ入力や指示に基づき、ユーザー、今見ている画面からは見えないところでデータ処理や保存などを行う部分のことです。よくデータベースがなんちゃらーって中身もこのバックエンドのことです。

未経験からwebサイトスキルを習得を求めるなら、フロントエンドがおすすめです。

フロントエンドはユーザーも開発者側も途中経過と完成を直接確認することができます。webサイトで使う言語は、フロントエンドとバンクエンドで異なりますので、理解も考え方も違います。

僕も偉そうに言えませんが初めは苦労しましたよ、途中投げ出して、ちょっと放置してました（笑）

本題に戻ります。

  • Webサイトのフロントエンドで必要な言はHTML,CSS,Javascript
  • Webサイトのバックエンドで必要な言はPHP

HTML,CSS,Javascriptはプログラミング言語とは言わずマークアップ言語と呼ばれています。

HTML

文章や文字を構成するマークアップ言語です。

CSS

レイアウトを構成するマークアップ言語です。

Javascript

文章やレイアウトに動作を加えるのマークアップ言語です。

近年は簡単な動作ならCSSでも可能になってます。＊2020年現在

PHP

Web開発でよく使用されるスクリプト言語で、HTMLに埋め込むことができます。ちょっと簡単に書きすぎましたね。

もう少し詳しく説明したものを下に書いてあります。

PHPとJavaScriptの大きな違いは、そのコードがどこで実行されるかにあります。

JavaScriptは、クライアントサイド（Webサイトを閲覧しているブラウザ）がコードを受け取り、そこで動作します。そのため、どのようなコードが書かれているのか、誰でも見ることができてしまいます。

一方、PHPはサーバーサイドでコードを実行します。

クライアントサイドはその結果のみを受け取るため、どのようなコードで導き出された結果なのか見ることができません。

HTMLにPHPのコードを埋め込むためコード実行の結果はブラウザで確認できますが、実行途中はサーバーサイドで行われているためブラウザでは確認することができません。

では、次に行きます。

②未経験でWeb系プログラミング学習に必要な期間

プログラミング

僕の実体験から申しますと、４ヶ月で間に合います。

例えば目標を来年の４月入社が希望です。そうするとそこから逆算して学習期間が４ヶ月　+　転職期間をざっくり２ヶ月とみると６ヶ月（半年）の期間が必要になります。

４ヶ月の学習フローですが各言語ごとに期間を設けました。

  1. １ヶ月：HTMLとCSS
  2. ２ヶ月：JavaScript
  3. ３ヶ月：php
  4. ４ヶ月：webサイト作成

③学習方法は基礎学習→簡単なサイトを作る

学習方法の基本は次のとおりです。

（１）基礎学習

（２）簡単なサイトを作る

これだけです。 どんな参考書を買っても、どんなスクールに通っても、どんな会社で教育を受けるにしても、流れは上記のとおりになります。

大切なので繰り返し書きますが、「(1)基礎学習 → (2)簡単なサイトを作る」という流れです。

基礎学習→簡単なサイトを作る

本当に大切なので何度も繰り返し書いていますが、本当にこれだけです。

  • HTMLとCSSを身につけたい場合 →HTMLとCSSの基礎をググりつつ、記事や参考書や動画のとおりに学習する。ある程度は理解したなと感じたら、自分なりに簡単なサイトを作ってみる。
  • PHPを身につけたい場合 → PHPの基礎をググりつつ、記事や参考書や動画のとおりに学習する。ある程度は理解したと感じたら、自分なりになにか動くものを作ってみる。
  • JavaScriptを身につけたい場合 → JavaScriptの基礎をググりつつ、記事や参考書や動画のとおりに学習する。ある程度は理解したと感じたら、なにか動くものを作ってみる。

本当にこれだけです。
ここで終わると中途半端なので、もっと解説していきます。

参考書を使ってプログラミング学習する方法

基本的には次の手順でOKです。

  • まずはさらっと１周して読んでみる。理解度は30%でOKです。
  • ２週目を読みつつ、サンプルコードを書いてみる。理解度は50%でOKです。
  • さらっと３週目を読みつつ、参考書にある課題をやってみる。

こんな感じです。

動画を使ってプログラミング学習する方法

実際に僕もこの方法でJavaScriptを勉強しました。動画と言ってもたくさんありますから、

動画での基礎学習なら「ドットインストール」がおすすめです。学習方法は次の感じでOKです。

  • 動画をみつつ、一時停止などを使いつつ、実際にコードを書いてみる
  • 動画のとおりにコードが動くか検証する
  • 動くならそれでOK、動かないなら巻き戻して間違いを探す

こんな感じです。

１つ１つの動画は短く要点がしっかりしています。

動画の場合は「動画を真似しながら書いてみる」みたいな進め方がいいです。

プログラミング学習サービスを使ってプログラミング学習する方法

有名なプログラミング学習サービスは「Progate[プロゲート]」ですね。

  • Progateのとおりに学習を進める
  • なんか進んでいるけど、いまいち理解してないところがある
  • 戻って復習してもよし、ググってもよし
  • 必ず手を動かして、課題とぶつかるのでググりつつ頑張る

こんな感じです。書籍で理解が追いつかなくて、とにかく手を動かしたい人には「Progate[プロゲート]」をやってみてはいかがでしょうか？

ノーコストに始めたい人は上記方法のどれを試してもokです。

とは言っても、基礎を学んで固めることはすごく大切なので、参考書とか動画でもいいかなーって思ってます。

しかし、このあたりは好みの問題なので、色々と試してみるといいですね。

どうでしょうか？

もしweb系興味があって学習に悩んでる人がいれば、この記事が役に立っていることを願っています。



シェアしてね！

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です