web制作は、webデザイン、webプログラミング、コンテンツ作りの要素から成り立っているのですが、今回はwebプログラミングとサイトの仕組みについての記事です。
この記事では以下のことがわかります。
- webプログミングの勉強法
- サイトの仕組みを理解するための勉強法
- 実践的なwebサイトを作れるプログラミングの紹介
プログラミングは難しいようなイメージを持っている人も多いかもしれませんが、やってみると意外とできちゃいます。いきなり難しい言語を勉強すると挫折の可能性も高くなるので、どういった順で学ぶと、より理解ができるかというところも解説しますね。
webプログラミングとサイトの仕組みの勉強法
webサイトというのはデザインを決め、コンテンツを決め、それをプログラミング言語でネット上に反映させるといった仕組みになっています。
今はまだこの意味がわからないと思いますが、一つ一つ理解していくことによりweb制作ができるようになるので、少しづつインプットとアウトプットを繰り返しながら学んでいきましょう。
webプログミングの勉強法
それではwebプログラミングの勉強法を解説します。
プログラミング言語はとてもたくさんの言語があるのですが、その中でも全てに共通する基礎的な言語があります。
それが『HTMLとCSS』です。
これにより、webサイトを反映させることができます。
これ以外の言語に関しては後半の『高度なwebサイトを作れるプログラミングの紹介』といった部分で解説しますが、まずはHTMLとCSSが簡単かつ、必須なので、勉強していきましょう。
HTMLとCSSの勉強ツール
結論からいうと動画コンテンツがおすすめです。webデザインの勉強法の記事でも書きましたが、本は時代遅れになる可能性と、わかりづらさにより、コスパはあまりよくないです。
かくいう私もほとんど本では勉強していません。本も買ってみたのですが、それ通りにやっても動かないとかあったので、初心者からすれば本が間違っているのか、自分が間違っているのかの判断もできづらいですよね。
そもそもまずは無料の教材があるので、そこから勉強してみましょう。
無料動画勉強サイト
無料のものだと以下のものがあります。
Progate
初心者が学ぶためのプログラミングの無料オンライン学習サイトの代表格ですね。私もここから始めました。
ゲーム感覚でとてもわかりやすく、楽しみながら学ぶことができます。
とりあえず何から勉強しようかと思った方はこれがおすすめです。最初は無料のもので大丈夫です。有料会員になれば月額１０００円くらいで学べる幅を広めることができますが、とりあえずは無料でOKです。
ドットインストール
こちらは動画学習サイトの代表格です。こちらも無料で始めることができます。ドットインストールの方が深く知識を学ぶことができます。実践的でとても勉強になる最高の学習サイトです。
こちらも有料のものもありますが、それは少し勉強してからでいいと思います。
とにかくまずはできることから行動してみましょう。
Codecademy
こちらはProgateのアメリカ版のような感じです。ですが、無料で使えますし、プログラミングを学ぶと、割と英語で検索して調べてみると、わかることがあったりするので、英語は必要だとは言いませんが、わかる方が進歩も早いこともありますので、慣れるといった意味では使ってみるのもありかもしれません。
youtube
これは誰でも知っていますよね。無料動画サイトですね。実はyoutubeは結構宝庫で色んな方が無料でプログラミングのことについて発信しています。
特に「HTML tutorial」とか「〇〇 tutorial」とか検索すると外国のものですが、めちゃくちゃためになる動画を出してくれています。
英語がわからなくてもプログラミングは世界共通なので、かなり勉強になると思います。
サイトの仕組みを理解するための勉強法
HTMLとCSSを勉強するだけでもなんとなくサイトの仕組みなんかも理解できてくるとは思うのですが、サイトの仕組みを理解することでweb系の基礎的な知識を身につけることになるので、意外と重要だったりします。
デベロッパーツールの勉強
HTMLとCSSを学んでいくうちにデベロッパーツールを使うことが出てくると思います。これの使い方がわかると、サイトの仕組みだったり、世の中のサイトがどのように作られているのかわかるようになります。
GoogleChrome
スマホだとsafariだったり、google検索だったりで検索していると思うんですが、そのwebブラウザの一つにChromeというものがあって、プログラマーであれば正直必須とも言えるくらい使いやすく、拡張機能やデベロッパーツールも使いやすく、必ず入れておいた方がいいです。
Googleで検索する
これはどの分野においても基本的なことかもしれませんが、パソコンのことについては大抵web上に答えが転がっていたりします。
自分でわからないことを検索するということはとても大事なことであり、何か壁にぶつかっても自分で解決できるようになるので、必須の勉強法でもあります。
「サイト 仕組み」なんかで検索してみてください。
ためになる情報がたくさん出てきますよ。
自分でブログを作る
サイトの仕組みを理解するための勉強法としての最後はこちらです。
ブログを自分自身で作ることは実践的にやるという意味ではとてもいいです。SEO対策など実際にどうやったらサイトをみてもらえるようになるのかなどの勉強にもなります。
この点は今回はあまり詳細に書きませんが、サイトの仕組み、アクセスを集めるとということを理解するためには必ずやった方がいいタスクだったりします。
ブログの作り方に関してはまた別記事で紹介しますね。
実践的なwebサイトを作れるプログラミングの紹介
ここまでで基本的なサイトは作ることが可能です。ですが、実用的ではありません。ここからは実用的で実際に企業に作ってあげられるようなレベルになるにはどういった勉強が必要なのかを解説します。
wordpress
HTMLとCSSとサイトの仕組みを勉強すればwebサイトを作れるは作れるのですが、このwordpressを使うことで、ブログ機能をつけたり、色んなサイトにカスタマイズが可能になります。
世界のwebサイトの２５％はwordpressで作られているほど、圧倒的な世界１のシェアを持っているものでほとんどのwebサイトはこれでできていると思ってもらっていいです。
そのくらい実用性が高く、メリットも大きいのがwordpressです。
HTMLとCSSを学ぶだけでは見るだけサイトは作ることができるのですが、実際は企業の新着情報だったり、ブログ機能であったり、企業のために作ってもその企業さんが更新して新しい情報を入れていかないとあまり意味がありませんよね。
その辺のブログ機能などをwordpressを使うことによってできるようになります。ちなみにこのブログもwordpressで作っています。
勉強ツールは以下です。
ドットインストール
先ほど紹介しましたが、wordpressにおいてもこちらで学ぶことができます。ドットインストールは月額１０００円の有料会員になればかなりの知識を学ぶことができるのでとにかくオススメです。本を買うよりもよっぽどコスパもクオリティもいいと思います。
Udemy
こちらはwebデザインの勉強法【１００点は求めなくていい】でも解説していますが、基礎的なものから実践的なものまでの動画を有料で販売しているサイトです。
通常２〜３万円ほどの教材なのですが、セールをよくやっているので、その時に買うと１０００円ちょっとくらいで買えたりします。
最高の動画教材なので、本を買うくらいであれば絶対にこちらを買うことをお勧めしますね。
web制作に当たって特にオススメの動画はこちらです。
未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
僕も買いましたが、web制作のことについてかなりのことが網羅されています。コスパとわかりやすさは神レベルです。
テーマをいじってみる
wordpressには既存のテーマと呼ばれるテンプレートが多数存在しています。これらを使うことによって、圧倒的に簡単にwebサイトが作れますし、自分で１から作るよりもよっぽど洗練されて、高機能なものが多かったりします。
これについての勉強法は以下を参考にしてください。
バズ部さんのこの記事がとても役に立ちます。
WordPressカスタマイズの基礎が全て分かる初心者必読の記事10選
それから実際に手を動かしながら勉強する上では次の記事が役に立ちました。私自身なんどもこのサイトは見まくりました。
PHPとJavaScriptとJQuery
初心者からしたらなんだこの文字の羅列は？と思って離脱してしまうかもしれませんが、ちょっと待ってください。
大事なところです。
これら３つはプログラミング言語でして、webサイトを作る上では今後勉強せざるを得なくなると思います。
最初はどれも基礎的な理解でいいのですが、これらをよく理解すると本当に色んなwebサイトが作れるようになるので、今はまだこんなものがあるくらいでいいのですが、３ヶ月後くらいにもう一度この記事を見てもらえるときっと私がお話しする意味がわかってもらえると思います。
具体的には動きのあるwebサイトを作ったり、アンケート機能やお問い合わせ機能をつけられたりします。
これらも先述したProgateだったり、ドットインストールなどで学ぶことが可能なので、ぜひ勉強してみることをお勧めします。
まとめ
今回はweb系プログラミングの勉強法について解説しました。
全て自分の実体験で使ったことのあるものばかりで、他にも色んなものがありますが、本当にオススメのものだけを取り上げたので、ぜひ利用して勉強してみてください。
web制作でフリーランスになりたい方向けにweb制作の業務全般を網羅している記事もありますので、ご覧ください。
