こんにちは。侍ブログ編集部の小林です。
初心者がWebコーディングのスキルを学ぼうと思っても
このような悩みがあるのではないでしょうか。僕もコーディングを自分でしようと思った時に、どう進めていいか分からず悩んだのを覚えています。まずはどのようにコーディングのスキルを磨いていけばいいのでしょう？
今回は初心者のあなたに向け、コーディングが最速でできるようになる5つのステップをわかりやすく解説していきます。この記事を参考にコーディングスキルを磨いてみてください。
- 既存のWebサイトを参考すればコーディングが習得しやすい
- 難易度が低いHTMl/CSSから学習すれば挫折しにくい
- 無料の学習サイトを活用すれば費用をかけずスキル習得が可能
最速でコーディングができるようになる5ステップ
初心者がコーディングを効率よく学習できる5つのステップを紹介します。最速でエンジニアとして成長して行きましょう！
インプットよりアウトプットを重視する
「まずはしっかり勉強してからじゃないとWebサイトを人に見せられない」なんて考えてる人、初心者に多いかもしれません。ですが、サイトや本ばかりでインプットしていても、学習はあまり進みません。
大事なのは「アウトプット」するということです。コーディングのスキルは最初は難しく感じますが、手を動かすことで感覚的に覚えることが可能です。ですので、実際に手を動かしてWebサイトを作ってみましょう。
実際に作っていくうちに、Webサイトができていく感覚がつかめるのでお勧めです。
【ステップ1】まずは目的をはっきりさせる
まずは、何をするにもそうですが「目的」を明確にするところからはじめましょう。コーディングをこれからするということは、何かしら形ある「Webサイト」を作りたいと考えていると思います。
初心者の人だとこの目的を考えるのが難しく感じる人もいるかと思います。最初は簡単でいいので、そのWebサイトが「どんな人のために」「何を伝えたいのか？」ということを考えてみましょう。この目的を考えることで、今後の仕事にも役に立ちます。そしてWebサイトの仕上がりも変わってきます。
当然、どのWebサイトも目的があって作成されています。今のうちからこの「目的」を考える癖を付けましょう。
【ステップ2】参考にしたいWebサイトを探す
ある程度のスキルが身につくまでは、参考となるサイトを見つけてそれをカスタマイズしていきましょう。
自分でWebサイトの構成を考える時間を短縮して、手を動かすことを意識してください。他の人のデザインを観察するとどんな構成がよいのか理解が深まります。これによって自分の引き出しやアイディアも豊かになっていくでしょう。
でも最初は、どのようにカスタマイズするのかも分からないはず。なので、参考にしたサイトと同じものをつくってみるのがいいでしょう。少しなれてきたら文字の位置を反対にしたり、色を変えたりと簡単なカスタマイズからはじめてみましょう。
【ステップ3】HTML/CSSでWebサイト全体を整える
実際に参考にしたWebサイトをカスタマイズしていきます。
ここから本格的に「HTML/CSS」を使っていきます。HTML/CSSは覚えてしまえば、そんなに難しいスキルではないので、実際にどんどん書いていって感覚を掴みましょう。
インプットばかりでは、学習に飽きてしまいます。実際に文字の色や背景色が変わったり、配置が変わっただけでも最初の頃は感動します。自分の目でみてその変化を実感することで、コーディングすることが楽しくなってきます。学習する上で、この楽しいという感覚がとても大事になります。
CSSを当て込んだ場合
【ステップ4】JavaScriptでWebサイトに動きを付ける
HTML/CSSに慣れてきたら、JavaScriptでWebサイトに動きを付けてみましょう。
Webサイトなどを見るとよくボタンが動いていたり、キャラクターが動いていたりしているサイトがあると思います。このような動きを付けられるのがこのJavaScript のスキルです。
こちらのスキルは、HTML/CSSに比べると難易度が上がります。ここでつまずく人も多いです。なので、まずは簡単な動き「ボタンに動きを付ける」や「強調したい文字を動かす」など簡単なカスタマイズからやっていきましょう。
JavaScript は、アウトプットしながらでもスキルを学ぶことはできますが、最初に学習サイトで動画などをみて、ある程度の知識を覚えておいた方が効率はいいです。完璧に覚える必要はないですが、「こんな感じなんだなぁ」と感覚をつかめれば大丈夫です。
【ステップ5】レスポンシブ対応をする
「レスポンシブ」とは、簡単にいうと「携帯の画面でもデザインが整って表示される」ようなことです。
あなたが作ったWebサイトはPCユーザーだけが見るとは限りません。PCで表示されるデザインは整ってるけど、スマホでみるとデザインが崩れている。それだとせっかくスマホでアクセスしたユーザーは離れていってしまいます。
現在はスマホでWebサイトを見る人が多いのでレスポンシブ対応をするのは当たり前の時代になっています。
コーディングに必要な基礎スキルとは？
コーディングのアウトプット方法をお伝えしてきました。どんなスキルが必要なのか、一つひとつ知りたい人もいるでしょう。次は、コーディングにはどんなスキルが必要なのかご紹介します。
HTML/CSS
コーディングをやる上でかかせないスキルとなるのがこのHTML/CSSです。
Webサイトの基本的な骨格や文章は、このHTMLで作られています。なので、このスキルが無いとWebサイトに文字を表示させることはできません。そしてWebサイトの中身が文字だけだったら味気ないですよね？ この文字を装飾したり、位置を整えたりするスキルがCSSです。
HTML単体とかCSS単体で使うことはあまり無いので、セットで覚えておきましょう。
JavaScript
JavaScriptは、Webサイトに動きを付ける時に必要になります。
サイトで詳細を見るためのボタンが動いていたり、そのサイトキャラクターが動いていることがあります。そういった動きを付けるためにJavaScriptが必要になります。こういった動きを付けることでWebサイトの印象がガラッと変わります。
コーディングの仕事でも場合によっては、こういった動きのあるサイトを作成することもあります。JavaScriptの基礎は覚えておくと良いでしょう。
コーディングが学べる学習サイト
では、さきほど上記で説明したコーディングのスキルを学ぶために必要な学習サイトも合わせてご紹介致します。
CODEPREP
CODEPREPはプログラミングを実際に書ける実践型の学習サービスです。100種類以上のカリキュラムが用意されているので目的にあったプログラミング学習をすることが可能です。
今回の場合は、Webサイト制作がでけるカリキュラムを重点的に進めて、コーディングの基礎を学びましょう。
Progate
ProgateもCODEPREP同様、画面上に実際にコードを書いてプログラムの動きを学ぶことができる学習サービスです。HTML/CSSとJavaScriptの基礎知識を全て学ぶことが出来るのでProgateのカリキュラムは必ず全て修了させましょう。
かわいいキャラクターで楽しみながら学習できるし、進捗管理もできるのでおすすめの学習サービスです。
ドットインストール
ドットインストールは項目ごとに3分の動画でカリキュラムが構成されており、視覚的にプログラミング学習をすることができる学習サービスです。動画をみながら一緒に手を動かすことができるので、アウトプットしながら学習を進めることができます。
基本無料で使えて、進捗管理などもできるのでおすすめです。
まとめ
いかがでしたか？
今回は、初心者がコーディングを効率よく進める方法をご紹介しました。スキル習得にはとにかくアウトプットすることが大事です。インプットもある程度はしなくてはいけませんが、「アウトプット7割：インプット3割」の気持ちで臨むのがいいでしょう。
この記事を参考に、コーディングスキルを最速で習得していきましょう！
