フロントエンドエンジニア初学者のほぼ全ての人が最初に悩む事が、どの言語から学べばよいのか、ではないでしょうか。
HTMLやCSS、jQuery、PHPなどなどなど…、調べれば調べるほど沢山の言語が出てきますが
「さすがにそんなに習得できない」
ごもっともです。
今回の記事では、初学者に必要な習得言語やどのように学べばよいのかを解説します。
この記事を最後まで読めば、技術の習得がスムーズになりますよ！
なにはともあれHTMLから
言うまでもなくWebで一番大切であり最初に学ぶべき言語「HTML」。
どのようなWebサイト・WebサービスであろうともまずHTMLがなければ表示できません。
WebとはこのHTMLを
- CSSでレイアウト・装飾したり
- Javascriptで操作したり
- PHPで出力したり
して成り立っているのです。
どのくらいHTMLを学べばよいの？
まずはHTMLの基本的概念である「マークアップ」を理解しましょう。
見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指示すること、ってことをなんとなく理解できていれば大丈夫です。
古い教科書などではXHTMLという言葉が出てきたり、HTML5の歴史的経緯など説明されたりしますが、そんなことはいつか時間が出来たときに見返せば十分です。Hyperなんちゃらなんて正式名称なども覚える必要はありません。
次はHTMLを形成する「タグ」の学習。ここが時間がかかります。
なぜなら現在HTMLタグは110種類以上あるからです。といっても、全部覚える必要は全くありません。日常的に使っているのは40〜60種類程度です。
!DOCTYPE,html,head,meta,title,link,script,body,header,footer,main,section,article,p,span,img,a,h1,h2,h3,h4,h5,h6,table,thead,tbody,tr,th,td,ul,ol,li,dl,dt,dd,nav,aside,picture,figure,svg,form,input,button,select,textarea,label,hr,br,blockquote,ruby,sub,sup,address,cite,code,pre,em,strong,time,canvas最初のステップとしてdivタグだけ(画像が必要ならimgタグも)でWebページを作ってみて、他のタグは必要が出てきたら順々に覚えていく流れでも良いでしょう。
そして最後に、それぞれのタグの意味や目的をしっかりと意識した「セマンティックコーディング」が出来るようになれば完璧です。きっとSEOにも強いコーダーになれるでしょう。
CSSも習得必須!!
HTMLをブラウザに表示させる際、レイアウトや色、サイズなどをブラウザに伝えるものがCSSです。
CSSがなければHTMLはただ文字が羅列して表示されているだけになってしまいますので、当然習得必須です。
ただ、このCSSも奥が深くどこまで学べばよいのかが難しいところです。
まずはCSSの記法やどうHTMLと結びつけるのかという基本的なことを学びましょう。
そして色や大きさ、位置などを指定するのに使われるCSSプロパティを覚えます。
2022年現在それは約250種類もあります。各ブラウザ独自で有効のプロパティを合わせると300は超えるでしょう。
しかしこちらもHTMLタグのように普段使わないプロパティが沢山あります。使いたいものから順々に覚えていきましょう。
完璧に覚える必要はありません。筆者もうろおぼえで習得しつつFlex系プロパティ(レイアウトや並びに関するプロパティ)などちょっと複雑なものはその度に調べながら使っています。
CSSを学びたいのにSCSSって違う言語が出てくる
と憤慨されている初学者の方はいないでしょうか。
本来Webサイトの構築は最もとっつきやすくてすぐに学習しやすいものでしたが、便利になればなるほど様々なツールが開発されて初学者には敷居が高いものになってしまっています。
このSCSSというワードもその便利ツールの一つです。
簡潔に説明すると、SCSSはCSSを書くときの色々な面倒臭さをとっぱらって書けるようにしたものです。一番の良い点はCSSで同じ内容を何度も書く必要がなくなり、作業効率が爆上がるところです。
多少の学習コストは必要ですが、早めに覚えておけば実作業の際とても有効でしょう。
だったら最初からSCSSを覚えればよいのでは？と思うかもしれませんが、SCSSのままだとブラウザが理解できません。SCSSをCSSに直す必要があるのです。
検索すると出てくるSASSやLESSといったワードも同じようなものと思ってください。
HTMLとCSSだけ覚えれば良い?!
Webサイトを構築するために必須なのはHTMLとCSSだけです。
ただ、それだけで実案件を受けることが出来るかと言うと
答えはYesでもありNoでもあります。
なぜなら、今どきのほとんどのWebサイトはJavascriptが使われているからです。
ただ、Javascriptは習得が困難で時間がかかるため、触りだけしか理解してないフロントエンドエンジニアさんはたくさんいます。いわゆるコーダーと呼ばれる方たちです。
コーディング(HTML&CSS)のみで仕事を請けるためには、セマンティックにきれいなHTMLが書けたり、爆速でCSSを当てられたりと、HTML&CSSの高い技術が求められます。
Javascriptの習得は必要?
HTMLやCSSを動的に操作できる言語がJavascriptです。
ただし、HTMLやCSSと違ってプログラミング言語なので一気に難度は上がります。それだけに、Javascriptのスキルはとても価値が大きいのです。
習得は必須ではないながらも、これからのWeb業界を生きていく中で必要になってくる場面は出てくるはずです。
また、いざ学び始めるとHTMLやCSSよりも楽しいという人も実際多いです。自分にあったスキルを探るためにも一度試してみると良いでしょう。
一言でJavascriptといってもその形態は様々です。特にここ最近トレンドの言語であるため、Javascriptから派生する言語やツールもたくさんあります。
jQuery、React、Vue、Next、Nuxtなどよく聞くワードはすべてJavascriptを使いやすくするために生まれたものです。
また、NodeやnpmなどWebサイト以外で使われるものもあります。
もちろんその全てを学習する必要はなく、全てを使いこなせる人も殆どいないです。学習する中で自分が進みたい方向が決まってきたら、取り入れていく形がよいと思います。
ただ、jQueryという少し前までかなりの人気を占めていたJavascriptライブラリは、今からJavascriptを学ぶ人にとっては全く必要ありません。既存のコードがjQueryで書かれていたり、jQueryプラグインを使わなければいけない場面で仕方なく調べる程度で十分でしょう。それだけJavascriptが進化しているということです。
まとめ
まずはHTMLとCSSを軽く学んでみてWebサイトを作ってみましょう。
それをブラッシュアップする形でより高度なHTMLとCSSを使い、さらにちょっとJavascriptを使ってみて動きを出してみるまでが初学者の第一段階になると思います。
その先は
爆速コーディングができるようになる！
React(Javascript)を使ってWebサービスの構築ができるようになる！
PHPを学んでWordPressの自作テーマを作ってみる！
など様々な道があります。
自分の環境や得意分野を見極めて習得する言語を選んでいきましょう。