カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • 【初心者必見】JavaScript習得のためのベストな勉強法

【初心者必見】JavaScript習得のためのベストな勉強法

Kredo編集部
Kredo編集部
公開日:2020.02.04
更新日:2020.02.06
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット

こんにちは!Kredo編集部です。

数々のプログラミング言語があるなか、ソフトウェアの評価専門機関であるTIOBEが発表したランキングで、2020年1月時点で人気のプログラミング言語・第7位にランクインしているJavaScript。

【TIOBE Index for January 2020】

(引用元:TIOBE)

IT人材の需要が高まるなか、これからJavaScriptを勉強しようと考えている方もいらっしゃるのではないでしょうか。

しかし、プログラミングをこれまで習ったことがないという方は特に、どのような順番で勉強を進めていけばいいのか分からないものですよね。

そこで今回は、効率よくJavaScriptの勉強を進めるための順番を紹介していきます。

これからJavaScriptの勉強をしようと考えている方、興味がある方は必見です。

記事のもくじ

  • 全部で5ステップ、JavaScriptの勉強の順番
    • 《勉強の順番ステップ1》JavaScriptの特徴を理解する
    • 《勉強の順番ステップ2》本やサイトを参考にしながら、見たものを写す
    • 《勉強の順番ステップ3》構文を理解する
    • 《勉強の順番ステップ4》JavaScriptで作られているサイトを見る
    • 《勉強の順番ステップ5》ゼロからWEBサイトを自力で作る
  • JavaScriptを勉強するときの2つのポイント
    • 《JavaScriptを勉強するときのポイント1》とにかく繰り返し勉強する
    • 《JavaScriptを勉強するときのポイント2》複数の本・サイトを利用する
  • 初心者必見!JavaScriptの独学におすすめのサイト
  • JavaScriptと一緒に勉強したい2つの言語
    • JavaScriptと一緒に勉強したい言語1:html
    • JavaScriptと一緒に勉強したい言語2:css
  • プログラミング初心者でも大丈夫!JavaScriptを勉強しよう

全部で5ステップ、JavaScriptの勉強の順番

それでは早速JavaScriptの勉強を進める際の順番をみていきましょう。

JavaScriptの勉強は、全部で下記5つのステップに分けられます。

【JavaScriptの勉強を進める際の順番】
  • 順序1:JavaScriptの特徴を理解する
  • 順序2:本やサイトを参考にしながら、見たものを写す
  • 順序3:構文を理解する
  • 順序4:JavaScriptで作られているサイトを見る
  • 順序5:ゼロからWEBサイトを自力で作る

《勉強の順番ステップ1》JavaScriptの特徴を理解する

細かい学習をはじめる前に、まずはJavaScriptがどんな特徴のある言語かを知っておきましょう。

JavaScriptはプログラミング言語のなかでも、少し難易度が高めの言語として知られています。

そのため、最初からガツガツと構文を学んでしまうと、挫折してしまう可能性も高いのです。

そこでまずは、JavaScriptの概要から学び、イメージを作っておきましょう。

なお、プログラミング自体を勉強するのが始めてという方は、「そもそもプログラミングとは何のためのものなのか」「どのようにして動くのか」という、プログラミングの全体像あらかじめ理解しておくことが重要です。

完璧に理解する必要はありませんが、知っておくことで各プログラミング言語を学ぶときのベースの知識として活きてきます。

なお、下記記事では、プログラミング完全初心者さんにおすすめの入門書をまとめています。

プログラミングを完全に初めて勉強するという方は、紹介されている本のうち少なくとも1冊は読んでからJavaScriptに取り組むとよいでしょう。

【おすすめの関連記事】

【初心者必見!】プログラミングを始める前に読むべき基礎が学べる本12選

また、プログラミグの学習を進める上で、PC環境を整えることも欠かせません。

下記記事では、初心者さんにおすすめのソフトを紹介しているので、「まだPCでプログラミングができる状態にない」「そもそも何をすればいいのか分からない」という方は、参考にしてみてください。

【おすすめの関連記事】

プログラミングの入門者に必要なソフトとは?

《勉強の順番ステップ2》本やサイトを参考にしながら、見たものを写す

JavaScript

プログラミングの基礎・JavaScriptの特徴把握ができたら、実際にコードを書く段階に移ります。

まずは本・サイトに記載されているコードを真似て、タイピングしてみましょう。

このとき、コードの意味や順番を理解できていなくても問題ありません。

いくつかのコードを書き写すうちに、徐々に法則や書き方がつかめてくるはずです。

「これはこういう意味なのではないか?」「この次にはこのコードがきそうだ」と、ご自身の頭で考えながら進めることで、学習を効率よく進めることができるようになります。

すぐに答え合わせをせず、まずはご自身の頭で色々想像したり、考えたりを繰り返しましょう。

徐々にJavaScriptの雰囲気がつかめてきたら、次のステップに移ります。

《勉強の順番ステップ3》構文を理解する

見よう見まねで書き写す段階の次のステップは、「構文を理解する」です。

JavaScriptにはいくつか定番の構文があります。

まずは基本的な構文をチェックしながら、コードを書き写すなかで考えたご自身の予想と、実際の意味が合っているか答え合わせをしてみましょう。

ただし、本やサイトを見て構文の意味が分かったとして、ただ頭で理解しても、使いこなせるようにならなければ意味がありません。

サッと構文が頭で思い浮かべられるように、ステップ2とステップ3をなんども反復しながら、しっかりと体に叩き込んでいきましょう。

JavaScriptを学習するなかでは、この2つのステップが最も時間を必要とする工程です。

《勉強の順番ステップ4》JavaScriptで作られているサイトを見る

ある程度構文に慣れることができたら、ご自身でゼロからWebサイト制作を行う工程に入ります。

しかしその前にもう1段階、実際にJavaScriptで作成されたサイトを見てみるステップを踏みましょう。

ちなみに、JavaScriptを使用しているかどうかは、Webサイトのページソースを見ることで確認できます。

①特定のWebサイトを表示したのち、②右クリック「ページのソースを表示」をクリックし、③表示されたソース上で「.js」と検索してみましょう。

なかにはソース内に表示されているURLからJavaScriptのソースをチェックすることもできるので、参考にしてみるのもおすすめです。

なお、具体的に、JavaScriptが使用されているサイトには下記のようなものがあげられます。

【JavaScriptが使用されているサイト例】
  1. ユニクロ
  2. Uber Eats
  3. LIG

ぜひ様々なサイトを見ながら、ご自身オリジナルのWEBサイトを作るときの参考にしてみてください。

《勉強の順番ステップ5》ゼロからWEBサイトを自力で作る

ひととおりJavaScriptを学んだら、いよいよご自身オリジナルのWEBサイトを制作してみましょう!

これまでステップ2・ステップ3で実施してきたような、既にあるものを模倣するようなやり方と、ゼロから生み出すのとでは、難易度が格段に上がります。

そのため、なかなか作業が進まなかったり、悩んでしまったりすることもあるでしょう。

「分かっているつもりでいたけれど、実はしっかり理解できていなかった」というような、ウィークポイントを把握することができるのも、ゼロからご自身で制作することのメリットです。

もし構文が分からなくなったり、悩んでしまったりしたら、ステップ2・ステップ3に戻り、復習しながら作業を進めるようにしましょう。

何度も制作を重ねれば重ねるほど、JavaScriptの実力は上達していくものです。

ぜひ試行錯誤しながらJavaScriptの勉強を楽しんでください。

JavaScriptを勉強するときの2つのポイント

ここまでJavaScriptの具体的な勉強の順序を紹介しましたが、ステップ1~ステップ5に進めていくなかで、どのようなポイントに注意すればよいのでしょうか。

JavaScriptを勉強するときのポイントは、ずばり下記の2つです。

【2つのポイント】
  1. とにかく繰り返し勉強する
  2. 複数の本・サイトを利用する

それぞれ詳しく解説します。

《JavaScriptを勉強するときのポイント1》とにかく繰り返し勉強する

とにかく繰り返し勉強することは、JavaScriptを勉強する上でとても重要なポイントです。

JavaScriptに限らず、プログラミングには言語によってたくさんの構文があるため、1度ですべてを理解できたり、覚えられたりする人はほとんどいません。

そのため、勉強のし始めはとにかく繰り返し勉強することで、徐々に感覚を身につけていくことが非常に重要なのです。

最初から完璧に理解できなくても大丈夫。

時間をかけて、ゆっくり着実に実力をつけていきましょう。

《JavaScriptを勉強するときのポイント2》複数の本・サイトを利用する

「プログラミングを勉強したい」と希望する方の多い現在では、JavaScriptの本だけを見てもかなりの種類が存在します。

その中身は、初心者向けに基本的な構文が詳しく記載されたものから、実践的なWEBサイト制作のために細いテクニックが記載されたものまで様々です。

また、本によって解説の詳しさも異なります。

分からないポイントをできるだけすぐ解決し、効率よくレベルアップしていくためにも、JavaScriptの勉強をするときには、複数の本・サイトを利用して勉強を進めるのがおすすめです。

初心者必見!JavaScriptの独学におすすめのサイト

ここまで具体的にJavaScriptの勉強方法について紹介していきましたが、具体的役立つサイトを知りたいという方も多いことでしょう。

下記記事では、プログラミング勉強のときのおすすめサイトをまとめています。

今すぐに勉強を始めたい方、できるだけコストを抑えてJavaScriptの勉強をしたいという方は、ぜひ参考にしてみてください。

【おすすめの関連記事】

プログラミング学習サイトで十分スキルが身につく!おすすめ学習サイト10選

JavaScriptと一緒に勉強したい2つの言語

既にお話した通り、JavaScriptはプログラミング言語のなかでも比較的難易度が高い言語です。

そのため、勉強を進めていくなかで「なかなか理解ができない」「動きのイメージがつかめない」と悩むことも少なくないでしょう。

そんなときには、下記のような言語と一緒に勉強するのがおすすめです。

  1. html
  2. css

上記2つはJavaScriptと関連して使用する言語なので、学んで損することはまったくありません。

しっかりと勉強する必要はありませんが、気晴らしにサラッと本を読んでみたりコードを書いてみたりするのもおすすめですよ。

JavaScriptと一緒に勉強したい言語1:html

htmlとは、WEBサイトを制作するときの基盤ともいえる言語です。

プログラミング言語のなかでも構文が分かりやすいため、初心者にも人気の言語の1つです。

JavaScriptは、htmlに動きをつけるために使用します。

JavaScriptと一緒に勉強したい言語2:css

Css, Web, 開発, プログラミング, ウェブサイト, スクリプト, プログラマ, 開発者

cssは色をつけたり位置を調整したりと、デザインを担当するプログラミング言語です。

htmlが作った基盤に、装飾を施すための言語とイメージしておけばよいでしょう。

cssもhtmlと同様に構文が分かりやすいプログラミング言語なので、プログラミング初心者にも人気があります。

基本的にhtmlとセットで使用される言語なので、この機会に軽く覚えておきましょう。

プログラミング初心者でも大丈夫!JavaScriptを勉強しよう

今回はJavaScriptを勉強するときの順番を紹介しました。

JavaScriptは1週間程度で完璧に身に付けられるほど、簡単なものではありません。

勉強を進めるなかで、ときには悩んだり苦しい思いをしたりすることもあることでしょう。

しかし、そこで乗り越えた山は確実に力になるので、諦めずにコツコツ勉強を進めていきましょう。

ぜひ今回紹介した順番を参考に、JavaScriptの勉強に取り組んでみてください。

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、 これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか?

\プログラミングと英語が同時に身につく!/
KredoのIT留学について詳しくみる

  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
Kredo編集部
Kredo編集部

Kredo編集部です!Tech、英語学習、キャリア、セブ島留学の情報を発信していきます。

関連記事

  • Web・プログラミング

    初心者必見!Pythonの詳しい導入手順を徹底解説【Windows・Mac別】

    2020.10.19
  • Web・プログラミング

    Rubyで開発?Ruby開発に向いているもの&開発に必要なことまで解説

    2020.09.26
  • 【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!
    Web・プログラミング

    【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!

    2020.09.25
  • 【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!
    Web・プログラミング

    【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!

    2020.09.11
kredo it 英語 留学

よく読まれている記事

  • 2020.12.03

    【1/6&1/7 無料オンラインセミナー】なぜ今、プログラミング × 英語を身につけるべきなのか?

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

  • ショッピングを楽しんでいる男女のイメージ画像
    2019.02.12

    海外就職を成功させたい人へ!経験者が教えるメリットとデメリット

  • 熱心にプログラミングを教えるフィリピン人講師と日本人留学生

    【日本語で学んでいる場合じゃない】“英語”でIT・プログラミングを学ぶメリットとは?

IT留学オンライン
kredo 留学

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.