プログラミングの学習を始めようと思った時、言語は何にしよう。まず何から始めればいいんだ？
と考えますよね。Web系の言語はおすすめですよ。
今回は、Web系のプログラミング言語の学習を独学で始めて2ヶ月が経った僕が、2ヶ月の独学でできるようになったことを紹介します。
Contents
Web系プログラミングとは？
Web系のプログラミングとは、主にWebサイトの構築をするプログラミングのこと
僕が学習しているのは、「フロントエンド」と呼ばれる分野で、Webサイトの見た目を構築するためのものです。
HTMLやCSSといったマークアップ言語を使用して、見た目を作ります。そして、JavaScriptという言語でサイトに動きをつけます。
職種としては、コードを書いてデザインをマークアップする「コーダー」、フロントエンドを広く担当する「フロントエンドエンジニア」などがあります。
いきなりプログラミング言語の話をされても、もう知ってるわ！
もしくは、何のことかさっぱり分からない。と思いますよね。
ですので、まずは2ヶ月目の学習で制作できるようになったWebサイトのページをお見せします。
2ヶ月でできるようになったこと
結論：2ヶ月継続すれば、かなりマークアップ言語の力は付く。
これは僕がデザインを元にコーディングした仮想のWebサイトです。
実際に何をしているかというと、
HTML・・・文字や画像を画面上に表示させる（Webサイトの骨組み）
CSS・・・HTMLで表示させた文字や画像の色や形、大きさ、配置を調整する（Webサイトの見た目の装飾）
jQuery・・・Webサイトに動きをつけるプログラムを書く。クリックした時の動きなどを指定する。
※jQueryというのは、JavaScriptというプログラム言語を便利に使うものです。
2ヶ月目の学習内容
学習2ヶ月目には、ProgateのHTML/CSSの学習を終えて、実際に制作していくことをしていました。
具体的には、Web制作を仕事とされている方がnoteに公開しているデザインカンプをダウンロードし、自分のレベルに沿って、コーディングの練習をしました。
そして、上で見せたサイトのようにjQueryを用いた動きの実装が求められたため、jQueryの学習をしたり、後々cssを書く上で効率化やファイル管理のしやすさというメリットがあるため、SCSSの学習にも取り組みました。
まとめると
2ヶ月目の学習
- jQueryを実装するための学習
- SCSSの学習
- 1ヶ月目に学習したHTMLとCSSの基礎学習
これらを用いて、Xdからのデザインカンプコーディングを主にやっていました。
デザインカンプからのコーディング
Web学習を独学している人の中には、web上に公開されているサイトの模写は必要ないの？
Xdからのコーディングができるようになってからサイト模写に進むの？
のように、Progateでの基礎学習以降の学習が分からない方が多いと思います。
僕の結論：模写必要なし、Xdからのコーディング練習しよう！
です。メリットとそのために必要なスキルを考えました。
メリット
僕がサイト模写ではなく、デザインカンプからのコーディングをやっている理由をメリットとして紹介します。
Xdのデザインカップからのコーディングは、実務により近いらしいからです。
というのも、twiiterには自分たちより早くからWeb制作を学習している方や、実務をこなしている方がたくさんいますよね。
実務ではXdのデータを受けとって、それをもとにコーディングを進めていくパターンが多いそうです。
ですので、Xdからのコーディングを練習していけば、実務に求められることが身につきやすい意ですね。
ポートフォリオ掲載OKなことがある
2つめのメリットは、Xdのデザインカンプを配信されている方のnoteには、デザインカンプからのコーディングである旨を明記の上でなら、
ポートフォリオ掲載OKと書かれていることが多いです。ですので、コーディングの制作物として自分のポートフォリオに掲載できるのは、学習者にとっては嬉しいですよね。
またこれがサイト模写の場合、Web上に公開されている誰かの所有物であるサイトを自分のものとして掲載するのは問題ですよね。そういったことを避けるためにも、
掲載許可の有無が記述されているデザインカンプのコーディングをした方が良いですね。
必要となるスキル
デザインカンプコーディングをするには2つの力が必要です。
Xdのデザインカンプから必要となる素材を入手するスキル
Progateやドットインストールでは、画像は用意されているものを使って学習を進めていくと思います。
デザインカンプでは、自分で抽出していく必要があります。
Xdのデザインカンンプはこんな感じです。
このデータから、マークアップに使う画像を書き出してフォルダの中に画像用のフォルダを用意する力が必要です！
Xdの各値を調べてマークアップしていくスキル
画像を書き出して用意できた後は、実際にコーディングを進めていくのですが、
各フォントの詳細や、余白の大きさ、動きの実装などXdを読む力が必要となります。
この2つのスキルを身につけられれば、Xdからのデザインカンプコーディングを進めていけるようになります。
そんなに難しいことじゃないですよ！
XDのデザインカンプからのコーディングのやり方は、下のブログを参考に学習しました！
[blogcard url="https://haniwaman.com/xd-coding/"]
おすすめのデザインカンプ
ここでは、おすすめのデザインカンプをご紹介します。
Web制作でフリーランスとして活躍されている、しょーごログのしょーごさんが配布してくれているデザインカンプです。
しょーごさんのデザインカンプは入門編から初級、初級改、中級、中級改、上級編と6段階のデザインカンプが入っています。
こちら入門編以外は有料ですが、これだけで実務レベルのスキルが身につくまで走り切ることができるのでおすすめです。
[blogcard url="https://note.com/samuraibrass/m/mad296098d928"]
HTML/CSSの基礎からjQueryの実装、サーバーやドメイン、最後はWordPress化など、時間はかなりかかると思いますが、
かなりの有料教材かなと思ってます。
Sassの学習
メリット
Sassの最大のメリットは「CSSの管理しずらさを解消してくれること」です。
僕が感じるSassの最大のメリットは、フォルダを分割することでフォルダ管理ができるということです。
CSSでは全てstyle.cssに記述するので、headerからfooterまでCSSが1ページに書かれます。
Sassにはパーシャルファイルというものを呼び出すことができるので、ファイルをいくらでも分割できます。
base・・・リセットCSSや要素の基本となるCSSを格納
mixin・・・アニメーションやmixinや関数を格納
module・・・使い回しできるモジュール的なCSSを格納
pages・・・ページごとに必要なCSSを格納
variable・・・変数を格納
style.scss・・・上記のフォルダ群をまとめるファイル
こんな感じで記述するフォルダとそれを1つにまとめて実際にHTMLに反映させるフォルダのように分けることができます。
その他にも、変数管理とmixinという機能を僕は使います。
Sassは他にもたくさんできることがあるらしいですが、「フォルダ管理、変数管理、mixin」この3つを使えるようになるといいと思います！
Sassの学習方法
Sassの学習方法は、Progateと参考書を1冊買って学習しました。
ProgateにはSassⅠという単元が1つあります。1時間〜2時間でこなせます。この単元で、Sassとは何か、何がCSSと違うのかを学びました。
正直Progateだけでは、Sassをコードエディタで書き始めることはできないので、環境構築と理解を深めるために参考書を使いました。
これ1冊で、環境構築とSassでできることのほとんどを学ぶことができると思います！
Sassは本当に学習して使えるようになってよかったと感じているので、ぜひ学習してみてくださいね。
jQueryの学習
jQueryでできること
jQueryでは、Webサイトに"動き"をつけることができます。
例えば、クリックした時にメニューがにゅっと出てくるあれや、スクロールした時に要素がふわっと表示されるあれです。
jQueryを学習することで、今までHTML/CSSでコーディングした静的なページに動きを与えることができます。
jQueryの学習方法
jQueryの学習には、Progateと参考書を使いました。
実際にjQueryやJavaScriptを何も見ずに実装するのは実務未経験の僕にとっては難しいと思ったので、
基礎的な書き方や、どんなことができるのか？
を意識しながらの学習になりました。
ProgateはjQuery上級編まで、2周やりました。
そして参考書ですが、僕はこちらを使いました。
実装例が30レッスン分載っているので、かなりおすすめです。
参考書では、とりあえず1周手を動かしてカンニングしながら実装しました。
その後は、Progateも参考書も辞書のような役割として、実装で分からないことがあればその都度見てみるという使い方をしています。
個人的に、jQueryのコピペはあまり好みではなく、記述の意味を理解してスクリプトも読めるようになりたかったので、
参考書の実装例をアレンジしたり、簡易なものを自分で書いてみたりしました。
サイトに動きを加えられると、一気に制作してる感が出て、モチベーションも上がりますよね。
これからのロードマップ
Web制作の学習は長期的に続けていくつもりです。
僕の3ヶ月目以降の学習ロードマップを書いて終わりにします。
PHPの学習
PHPはWordPressを構築するために使う言語らしいので、デザインカンプコーディングをある程度こなせるようになったら、学習していきます！
twitterの方々は、WordPressの構築のためにであれば、PHPはそこまで本格的に学習する必要はない。
ということをよく言っているので、ProgateのPHPのコースをやろうと思ってます。
WordPressの学習
PHPの学習が終わったら、いよいよWordPressの学習に入るつもりです。
まだまだ先になるとは思いますが、僕のWeb制作学習が目指すところなので、コツコツと学習を進めていきたいと思ってます。
WordPressの構築が自分でできるようになれば、ブログの運営にも好影響が出てくるのかな？
と想像しています。
最後に
学習を始めて、2ヶ月経ちましたが今月も100時間以上Web制作に使うことができました。
自分が全く知らなかったことを学習して、多くの知識を得て、手を動かして、
0から何かを作っていくことは楽しいですね。
挫折率が高い独学ですが、モクモクと進めるのが向いてる自分には結構しっくりきています。
Web制作はつまづいたらGoogleでいっぱい情報や解決策が出てくるので助かります。
それだけ、世の中のいろんなことがプログラミンで作られているということかなと思いました。
2ヶ月目にやったこと
- HTML/CSSの基礎学習
- jQueryの学習
- Sassの学習
- これらを使ってデザインカンプのコーディン
引き続きコツコツ頑張ります！