こんにちは。
前回の記事では「コーダーに向いている性格」を10項目、取り上げました。
それをご覧いただき「自分はコーダーに向いているかもしれない!」と思ってしまった方。
今回はそんな方向けに、さらに一歩進んだ内容をお届けします。
題して「半年でそれなりのコーダーになる方法!(しかも独学)」です。
はい。タイトルの通り、半年でそれなりのコーダーになる方法を伝授します。
ちなみにスクールなどには通わず、独学で十分コーディングを上達させるハウツーをご紹介します。
・・・え?なんだって?
「『それなり』ってどういうこと?」って??
まあ、それは後でご説明しますので、まずはどうぞ!
▼目次
・下準備:検定試験の日取りを決めよう + 参考書を入手しよう
・1ヶ月目:動画を見てコーディングのおおまかな知識/流れを知ろう
・1〜2ヶ月目:ひたすらタグを覚えよう
・3ヶ月目:試験に備えた勉強をしよう
・3ヶ月目:試験当日〜合格
・4ヶ月目:ウェブサイトを作ってみようPart1 + 就職先を見つけよう
・5ヶ月目:ウェブサイトを作ってみようPart2 + デザインしてみよう
・半年目:ウェブサイトを作ってみようPart3
■1)下準備:検定試験の日取りを決めよう + 参考書を入手しよう
サーティファイが実施している「Webクリエイター能力認定試験」あたりがベストでしょう。
「エキスパート」と「スタンダード」の2種類がありますが、まずは「スタンダード」から受けてみましょう。
https://www.sikaku.gr.jp/web/wc/
※自分が受験したものは同じサーティファイの「上級」で、ランクも「上級」「初級」でしたが、ここ数年で変わったようです。
また、参考書を買うことも必須です。
特に初学者の場合、インターネットで得る知識よりも書籍を用いて学ぶことをおすすめします。
書籍は知識が体系化されているため、読み進めながら無理なくステップアップすることが可能です。
初心者向けの書籍であれば、どのようなものでも構わないと思いますが、先のサーティファイが試験向けの赤本(問題集)を発行しているので、それを参考とするのがベターです。
https://bookshop.wenet.co.jp/products/detail.php?product_id=199
■2)1ヶ月目:動画を見てコーディングのおおまかな知識/流れを知ろう
まずは「コーディングとはなんぞや?」について知る必要があります。
書籍を参考とするのも良いですが、ここは実際にエディタでコードを打つ場面を動画で見たほうが覚えやすいと思います。
Youtubeでもいくつかそういった内容の動画はありますが、
おすすめしたいのが「ドットインストール」です。
ドットインストールのなかから、とりあえず必聴の動画を以下にピックアップしましたので、
これらの動画を、しのごの言わずに全て視聴してみましょう。
その際、細かな不明点や疑問などが出てくるかもしれませんが、
あくまでここで目的としたいのが「おおまかな知識と流れ」を知ることですので、
「あー、こんな感じでウェブサイトって作るんだな」というものが感覚で掴めれば良いでしょう。
HTML入門(全24回)
https://dotinstall.com/lessons/basic_html_v3
CSS入門 (全23回)
https://dotinstall.com/lessons/basic_css_v3
CSS3入門 (全19回)
https://dotinstall.com/lessons/basic_css3_v2
CSSレイアウト入門 (全15回)
https://dotinstall.com/lessons/basic_css_layout
実践!ウェブサイトを作ろう (全17回)
https://dotinstall.com/lessons/website_html_v2
レスポンシブウェブデザイン入門 (全14回)
https://dotinstall.com/lessons/basic_responsivewebdesign
■3)1〜2ヶ月目:ひたすらタグを覚えよう
動画を見終えたら、次は実際にコーディングを始めてみましょう。
そこで必要なのがHTML・CSSの「タグ」を覚えることです。
全てのタグが、それぞれ固有の意味を持っており、用途も異なります。
それらタグの意味と用途を単語帳のようなものを用いながら、まずはひたすら頭に叩き込むことが重要です。
「え・・・まじで。HTMLのタグってめっちゃあるし、その上CSSまで覚えなきゃいけないの?」
HTMLのタグの歴史は古く、伝承によると中国におけるHTMLの発祥は、黄帝の代に倉頡(そうけつ)が砂浜を歩いた鳥の足跡を参考に創った文字とされており、今やその種類は現存するもののみでも、およそ3億8500万種類あるとされています。
しかし安心してください。
そのうち実際に使用するのは約50種類程度。さらにその中でも頻繁に使用するタグはせいぜい20〜30個程度です。
CSSに関しても、実際に使用する記述はそう多くはありません。
頻出するHTMLのタグやCSSは参考書に載っていたり、それら書籍のサンプルコードに書いてあるはずですので、まずは、そういった「基本的なタグ」を覚えていけば十分でしょう。
■4)試験に備えた勉強をしよう(3ヶ月目[試験の2週間前〜])
ある程度HTMLのタグ・CSSの記述が頭に入ったら、いよいよ試験に備えた準備を進めていきましょう。
先ほどご紹介したサーティファイの参考書には、実際の試験で出題される内容などが記載されていますので、それらに沿って問題を解いてみましょう。
ちなみに「スタンダード」の場合、試験時間は
・テキストエディター使用/70分
・Webページ作成ソフト使用/60分
となっています。制限時間内に参考書の模擬試験を解く練習をいちど試しておくと、本番でも焦らずに挑むことができるはずです。
■5)試験当日〜合格(3ヶ月目)
試験前日は早めに休んで、本番に備えます。
本番はさくっと終わらせて、いっときの開放感を得ましょう。
ちなみに自分は試験後、ずっと行きたかった(けど我慢していた)古本市場とブックオフをハシゴしてから、成城石井でケーキとチキンを買って独りでニコニコ動画観ながら食べていました。
なぜならその日は自分のバースデーで、独身貴族だったからです。
雪のちらつく、寒い、寒い冬の日でした。
■6)ウェブサイトを作ってみようPart1(4ヶ月目)+就職先を見つけよう
おそらく、試験結果が出ているはずです。そして、ここまで頑張ってきたアナタなら当然のごとく合格通知が届いていることでしょう。
「やったー!これで晴れてコーダーだ!」と、まだ喜んではいけません。
この段階ではまだアナタはただ試験に合格しただけの「ちょっとだけインターネットに詳しいただの素人」に過ぎません。
ここでさらにストイックに自分を追い込んでいきましょう。さっそくウェブサイトを作ってみます。
ここで目標としたいのが「いちから全てコーディングすること」です。
おそらくサーティファイの参考書などでは土台となるソースの上に、何かしらコードを加筆するスタイルだったと思います。
そうではなく「すべてをイチから全部コーディングしてみる」ことが、ここでは重要です。
charsetやmetaタグ、classの指定やネーミングなど、イチから書かないと分からかったことを、より深く理解できるようにしましょう。
あと、並行しながら就職先を見つけましょう。試験に合格してテンションの上がったあなたはおそらく
「どこに就職しよう!いま流行りのLI○Eは?いや〜料理好きだしクッ○パッドとかも良いかも!それともいっそGo⚪︎gle?」
とか思うかもしれませんが、思い上がるのもいい加減にしろと言いたいところです。
おそらくまだ今の段階では、コーダーとしての就職は厳しいでしょう。
しかし、Web関係の仕事はコーダーだけではありません。
ライティングやディレクターなどあなたの得意分野があれば、それを武器にWeb業界へと潜り込み、
下積みをしながらコーダーとして働けるチャンスを虎視眈々とねらうのも良いかもしれません。
これは余談ですが、自分の場合は「デザインとかしたいかなー」という超軽い気持ちでインターンとしてWeb会社(前職)に就職しました。ただ、そこで待っていたのは「飛び込み営業」と「電話営業」の嵐。
かっこよくPhotoshopをいじりながら「これトンマナあってなくないスか?」とか言ってる自分の姿を想像していたのですが、実際はリクルートスーツ着て炎天下の大阪市内(当時大阪に住んでいた)を練り歩きながら名刺を配り続ける日々。紺色のスーツは汗(塩)で真っ白。
かといって涼しいオフィスに居たら居たで、タウンページやハローページの「あ」から順に電話をかけ続ける日々。
「忙しいねんボケ!カス!」「二度と電話してくんなダボが!」「ガチャ切り(名乗った段階で受話器をそっ閉じされる)」など、連日のストレスでタバコがみるみる灰と化していきました。
そんな中、社内の制作担当の先輩から「Web制作の人員が足りないから、やってみない?」と声をかけてもらいました。
「やったー!!これで解放される!!」と思って即答で「はいやります!」と喜んだのもつかの間、「3ヶ月後に試験を受けてもらうから、それまでにコレとコレとコレと・・・コレも、とりあえず全部覚えてね」と言って先輩はありえない量の課題を僕に課せてきました。
で・・・なんだかんだあって今に至ります。営業も制作も厳しい世界なんだねーという話でした。
■7)ウェブサイトを作ってみようPart2 + デザインしてみよう(5ヶ月目)
引き続き、ウェブサイトを作ってみましょう。
つぎに目標としたいのが「レスポンシブサイト」の制作です。
レスポンシブサイトとは、パソコンでもスマートフォン・タブレットでも閲覧できるよう最適化されたコーディングのことです。
レスポンシブを意識するかしないかで、ソースコードの組み立て方がかなり異なってきます。
また、パソコンでは問題のなかった箇所でも、スマートフォン特有の挙動のため問題が発生することも多々起こります。
ここでは、そういったユーザーの環境に最適なコードの書き方を学んでいくようにしましょう。
また、コーディングと並行して「デザイン」にも触れてみましょう。
コーディング作業はエディタだけ使用できれば良いということではなく、PhotoshopやIllustratorといったデザインソフトを使用して画像をスライスしたりします。
また、Webデザインの仕組みを知っていることで、よりコーディングを深いところで理解することができるようにもなります。
まずは手始めに、なんでも構いません。お気に入りのウェブサイトをピックアップして、そのサイトをキャプチャーしてからPhotoshopで模写しましょう。
この際、1pxでもズレることは厳禁です。うちのデザイナーも口をすっぱくして申しておりますので、よろしければあわせてご覧ください。
「WEBデザイナーを目指した僕が、最初に学んだ事まとめ。」
■8)ウェブサイトを作ってみようPart3(半年目)
ようやく半年が経過しました。最後に、もうひとつウェブサイトをコーディングしてみましょう。
最後の目標は「JavaScript(ジャバスクリプト)で動きのあるウェブサイトを作ってみよう」です。
JavaScriptとは、ウェブデザインに「動き」を加えることができるプログラミング言語です。
ちなみに、HTMLやCSSは「マークアップ言語」と呼ばれ、JavaScriptのような「プログラミング言語」とは異なった言語となります。
JavaScriptを覚えるとなると、これまた数ヶ月掛かってしまうため、ここではJavaScriptを使用した「プラグイン」を用いてみましょう。
「プラグイン」とは、たとえばメイン画像が横にスライドする「スライダー」や、クリック等で開く「モーダルウィンドウ」などが定番です。
これらプラグインのソースコードはWeb上にたくさん落ちていますので、それらを活用して動きのあるウェブサイトを構築してみてください。
さいごに
いかがでしたか?
はじめの半年をこんな感じで進めていけば、きっとあとあとスムースに学習を進めることができるはずです。
もちろん全員が全員、このようなスケジュールが合っているとは限りません。
「半年もかかんねーよ」という方もいれば「これはちょっと詰め込み教育すぎる」といった声があって当然です。
今回ご紹介した全ての方法を、その通りに実践する必要はありません(実践したい!というならご自由にどうぞ)。
ただ、ひとつだけ「あらかじめ試験日を決めて、受験する!」という方法に関しては、本当にオススメです。
期限が設けられていない独学は、なにかとダラダラしがち。そこで「試験」という制限を設けることでモチベーションアップに繋げるのです。
さいごに。何度もしつこいようですが、ここに記載の方法は「半年でそれなりのコーダー」になる方法です。
「それなり」というのは、その言葉の意味通り「それなり」です。
半年間、とてもよく勉強してきました。覚えることもたくさんだったと思います。
今と昔とを比べてみて、少しはコーダーとしての技術も自信もついてきたのではないでしょうか?
しかしコーディングを甘くみないでください。アナタがいまの段階で備えている知識は、ほんの全体の5%以下にも満たないものです。
コーディングを極めようとすることは、途方もない長旅に似ています。
まだ知らない技術や知識、言語や方法論、人知を超えたバグの嵐、そしてそれへの対処・・・。
それらを身につけるには、実務を通じて実績と経験を積んでいくしかありません。
この勉強を終えた段階では、少なくともコンサルロケッツでは「コーディングがちょっとできる人」という位置付けでしかありません。
とにかく、実務を経験してください。たくさん経験を積んで、大きく育ってください。
そして、早く就職してください。心配しています。
母より