JavaScriptの学習を開始する：なぜあなたがすべきか、そしてそれを無料で行う方法

公開: 2022-04-23

JavaScriptの学習を開始したいのですが、どこからどのように始めればよいかわかりませんか？ この投稿では、人気のあるプログラミング言語で自分自身を教育し始めるために必要なガイダンスを提供します。

難易度とキャリアの見通しの両方の観点からJavaScriptの学習を検討する理由について説明します。 その後、投稿では、多くの場合無料で開始する方法について説明します。 終了したら、JavaScriptを最初から学習する方法を十分に理解してください。

JavaScriptとは何ですか？なぜそれを学ぶのですか？

JavaScriptで自分自身を教育する方法に入る前に、そうする理由について話しましょう。 そのためには、プログラミング言語を何に使用できるかを知っておくと便利です。

JavaScript用のアプリケーション

最初にウェブデザインについて話しましょう。 Webサイトの構築に関しては、JavaScriptがWebサイトをインタラクティブにする部分です。 HTMLはスケルトンとコンテンツを提供し、CSSはサイトのレイアウトとデザインを定義しますが、JavaScriptは機能と動作を追加するためにあります。 ドロップダウンメニュー、ポップアップ、その他のモーダル、連絡先フォーム、アニメーション、インタラクティブマップの一部として最も一般的に見つけることができます。

javascriptアプリケーションの例：インタラクティブマップ

HTMLやCSSと同様に、JavaScriptもすべてのブラウザーが理解して処理できるものです。

WordPressでも、JavaScriptのアプリケーションが増えています。 WordPress.comのデスクトップアプリであるCalypsoは、JavaScript、特にReactとNode.jsに完全に基づいています。

カリプソスタック：JavaScriptの学習を開始する理由の1つ
Calypsoは最新のJavaScriptスタック上に構築されています。

2018年にデフォルトの書き込みインターフェイスとして従来のWordPressエディターに取って代わったグーテンベルクエディターも、その主要なテクノロジーとしてJavaScriptを使用しています。

ワードプレスグーテンベルクエディター：javascriptアプリケーションの例

元々はクライアント側の言語（ユーザーブラウザで解釈および処理されることを意味します）でしたが、Node.jsのおかげで、サーバー側でも実行できるようになりました。 さらに、React NativeとIconicはそれをモバイルデバイスに、Electronをデスクトップにもたらしました。

その結果、JavaScriptのアプリケーションはWebをはるかに超えています。 これを使用して、Webアプリやバックエンド製品を作成したり、スマートTV、モノのインターネットデバイス、ネイティブモバイルアプリを実行したりできます。 さらに、クロスプラットフォーム互換であるため、どこでも動作するデスクトップアプリを強化できます。

JavaScriptの長所と短所

JavaScriptを何に使用できるかを知るだけでなく、JavaScriptの長所と短所を調べるのにも役立ちます。

JavaScriptの長所

プログラミング言語としてのJavaScriptの利点から始めましょう。

  • 汎用性—JavaScriptのアプリケーションの無数の領域についてはすでに説明しました。 ウェブサイト、モバイルアプリ、デスクトップアプリから、スマートデバイスやゲーム、さらには機械学習まで、使用できないものはほとんどありません。 JavaScriptは、フロントエンドとバックエンドの両方に適しており、他のプログラミング言語でもうまく機能します。 要するに、JavaScriptは汎用性の原動力です。
  • 初心者向け—JavaScriptの構文は簡単に習得できます。 また、開発環境を構築する必要はなく、ブラウザでコーディングを開始するだけです。 さらに、この言語にはアドバイスとサポートのための大規模なオンラインコミュニティがあります。 さらに、JavaScriptは、他の言語にも適用される基本的な概念（オブジェクト指向プログラミングなど）を学ぶのに最適です。 最後に、あなたに足を伸ばすことができる多くのフレームワークがあります。
  • 速度—他のプログラミング言語、特にPHPのようなサーバー側で実行されている言語と比較すると、JavaScriptは通常より高速に実行されます。 コンパイルしたりサーバーに話しかけたりすることなく、ブラウザーで直接実行できるので、それは不思議ではありません（外部リソースが必要な場合を除く）。 また、サーバーの需要も減少します。 したがって、多くの場合、対話性の高いアプリやサイトに選択されます。

JavaScriptの短所

JavaScriptには欠点がありますか？ もちろん、完全にマイナス面がないものはほとんどありません。 この場合、次のことを考慮する必要があります。

  • セキュリティ上の懸念— JavaScriptはユーザーブラウザ内で実行されているため、悪意のある目的でJavaScriptを悪用する可能性があります。 そのため、デフォルトでブラウザでオフにすることを選択する人もいます。
  • クロスブラウザのサポート—サーバー側のスクリプトとは対照的に、異なるブラウザが同じJavaScriptコードを異なる方法で解釈する場合があります。 これにより、クロスブラウザ互換のコードを記述しにくくなる可能性があります。
  • SEO —検索エンジンがJavaScriptをどれだけうまくクロールできるかは完全には明らかではないため、SEOの潜在的な問題が発生します。 とにかく、SEOにやさしい方法でJavaScriptを実装する方法を学ぶ必要があります。

キャリアの見通し

近年、プログラミング言語はますます人気が高まっています。 2021年のStackOverflow開発者調査では、プロの開発者の間で最も人気のあるプログラミング言語に選ばれました。 9年連続！

スタックオーバーフロー開発者調査2021最も人気のある言語

さらに、上位5つのWebフレームワークもすべてJavaScriptフレームワークです。

スタックオーバーフロー開発者調査2021最も人気のあるWebフレームワーク

言語が新しい分野に移動するにつれて、それはますます多くの雇用機会を開きます。 Devskillerは、2019年に、すべての企業の72％がJavaScript開発者を探していることを発見しました。 プログラミング言語は、面接で最も一般的にテストされるスキルでもあります。

フルスタック開発者のフロントエンドになりたいのであれば、JavaScriptを知っていることは当然のことです。 さらに、ゲーム開発、機械学習、または人工知能を使いたい場合は、JavaScriptを知っていることも役立ちます。

さらに、JavaScriptに熟練した人は、高給を命じることができます。 Indeed.comによると、米国のJavaScript開発者の平均基本給は年間111,278ドルです。 初心者でも$90,000から始めることが期待できます。

javascript開発者の給与米国2021

さらに、LinkedInでJavaScriptを検索すると、米国だけで40万人以上の求人が表示されます。 つまり、JavaScriptのスキルを身に付ければ、良い仕事の機会と高給の機会の両方に直面することになります。

JavaScriptは初心者にとって簡単に習得できますか？

さらに、JavaScriptの利点の1つは、習得が容易なことです。 それが真実であることを示すために、ここでいくつかの基本的なJavaScriptの概念とコードについて説明します。 そうすれば、あなたは自分自身のために意見を形成することができます。

コメントコメント

最初にコメントについて話しましょう。 ほとんどのプログラミング言語と同様に、JavaScriptを使用すると、ブラウザーがコードを実行しようとしない方法で、コードにコメントを付けたり、コメントにマークを付けたりすることができます。 そうすれば、エラーを発生させることなく作業を文書化できます。

JavaScriptは、1行と複数行の2種類のコメントを認識しています。 それらを書く方法は次のとおりです。

 // Nothing in this line will be executed /* Neither Will Any of This */

2つの言語が同じようにコメントをマークするので、PHPに精通している人は自宅にいるように感じるでしょう。

データの出力

JavaScriptを試す最も簡単な方法の1つは、 alert()を使用することです。 ブラウザ内のポップアップウィンドウにメッセージを出力するために使用できます。

javascriptはアラートメソッドの学習を開始します

上記を取得するには、ブラウザ開発者ツールでコンソールを開き、次のコードを貼り付けます。

 alert("With JavaScript, it's really easy to make this box appear.");

とてもわかりやすいですよね？ ここでEnterキーを押すと、上記と同じメッセージが表示されます。

alert()は、ユーザーにデータを出力するためのJavaScriptメソッドです。 角かっこ内の文字列（テキストを意味する）は、ポップアップの内容です。 コードの行が完全であることを示すために、最後にセミコロンが必要です。

この知識があれば、自分で試してみることができます。 角かっこ内の文字列（必ず引用符で囲んでください）を、独自のポップアップを作成したいものに変更するだけです。

コンソールを使用したjavascriptアラートメソッドの例

DOMの操作

Webデザインでは、ほとんどの場合、JavaScriptを使用してユーザーインターフェイスまたはDOMに変更を加えます。 DOMは「DocumentObjectModel」の略で、基本的にWebページを構成するHTML要素のツリーです。 開発者ツールを使用してページを調べると、それを確認できます。

ブラウザ開発者ツールでhtmlを検査します

JavaScriptには、変更を加えるためのさまざまなオプションが用意されています。 例を見て、それがどのようにできるか、そしてそれがどのように見えるかを示しましょう。

 <!DOCTYPE html> <html> <body> <h2>Start Learning JavaScript Demo Page</h2> <p></p> <script> document.getElementById("target").innerHTML = "With JavaScript, it's really easy to manipulate the DOM."; </script> </body> </html>

上記では、簡単なHTMLページを作成しました。 ご覧のとおり、見出しと、 targetのIDを持つ空の段落要素があります（HTMLクラスとIDについて不明な場合は、ここで詳細を確認できます）。

下部にはJavaScriptスクリプトもあります。 ブラウザが認識できるように、 <script>タグでラップされています。 それが何をするのかを理解するために、それを分解してみましょう：

  • document —Webページであるドキュメントオブジェクトにアクセスします。
  • getElementByID("target") —IDに従って要素を検索します。 角かっこには、引用符で検索するIDが含まれています。
  • innerHTML —要素の内部HTMLを変更します。

それらを組み合わせると、スクリプトは基本的にWebページでtargetのIDを持つ要素を検索し、その内部HTMLに追加します。 その場所に含める必要があるのは、二重引用符内の等号の後ろにあります。 結果として、ブラウザで上記のコードを使用してファイルにアクセスすると、次のように表示されます。

javascriptでDOMを操作する方法を学び始める

理解するのはそれほど難しいことではありませんか？ うまくいけば、上記がJavaScript構文がどのように機能するかについての簡単な印象を与えてくれました。 このJavaScriptチートシートでより基本的なヒントを見つけることができます。

フレームワークはどうですか？

JavaScriptを学び始めたときによく耳にするのは、フレームワークです。 この用語に精通していない場合、フレームワークはほとんどコードライブラリのコレクションです。 それらには、Webページ、アプリケーション、またはその他の目的の共通の機能と要素が含まれています。 これにより、これらの要素と機能を最初から作成しなくても作成して使用できます。

それで、JavaScriptフレームワークがとても楽になるなら、すぐに使い始めるべきではないでしょうか？

これは実際、開発者の間で白熱した議論の一部です。 フレームワークの前にバニラ（プレーンを意味する）JavaScriptを学ぶべきだと言う人もいます。 他の人は、フレームワークをすぐに使い始めて、着実に実行する必要があるという意見です。

ここでこれに対する明確な答えを提供することはできませんが、分岐する前に少なくともJavaScriptの基礎を学ぶことはおそらく常に良い考えです。 そうすることで、あなたが何をしているのかをよりよく理解し、より良い開発者にすることができます。

JavaScriptを無料で学び始めるにはどうすればよいですか？

これは疑問を残すだけです、できればそれを支払うことなく、JavaScriptを正確にどこから学び始めることができますか？ 旅を始めるために使用できる無料のリソースは次のとおりです。

  • MDN Web Docs — Mozilla Developer Networkは、Webデザインの知識の主要なリソースの1つと見なされています。 HTML over CSSからWebフォーム、アクセシビリティなど、あらゆるものに関する一流のチュートリアルが満載です。 彼らはまたあなたが無料で通り抜けることができるJavaScriptを学ぶための広範なガイドを持っています。
  • W3Schools — MDNと同様に、W3SchoolsにはJavaScriptの完全な紹介があります。 一口サイズのレッスンで、自分で試してみる例がたくさんあります。 このサイトは、ルックアップリソースとしても最適です。 さらに、もう少し構造化されたアプローチが必要で、それに対してお金を払っても構わないと思っている場合は、有料コースを試すことができます。
  • JavaScript.info —クリックしてクリックできる完全なJavaScriptオンラインコース。 豊富な情報、ビジュアル、およびヒント（たとえば、使用するコードエディタを含む）。 また、読者が質問したり、議論したり、コードスニペットを共有したりできるコメント機能もあります。
  • Eloquent JavaScript —元々は印刷された本でしたが、Eloquent JavaScriptは、オンラインおよび電子ブックとして完全に無料で入手できます。 かなり密度が高いので、中級の開発者に適しているかもしれません。

さらにお探しの場合は、学習リソースを含む記事もあります。 さらに、Team Treehouse、Udemy、Skillshareなどの有料コースがあります。

では、2022年にJavaScriptの学習を開始する必要がありますか？

JavaScriptは現代のWebの不可欠な部分です。 Webサイトやアプリケーションの多くの機能は、この動的プログラミング言語なしでは考えられません。 さらに、ゲームや機械学習など、他の多くの分野にも進出しています。

この投稿では、JavaScriptの学習を開始する必要があるかどうか、およびその方法についての質問に答えようとしました。 言語がどこで役割を果たしているか、何ができるか、そして仕事と給料の機会を見ると、JavaScriptを理解することが賢明な道であることが簡単にわかります。 WordPressの分野の誰かとして、あるいは特に、ここでも前進しているので、それは理にかなっています。

足を踏み入れたい場合は、JavaScriptの学習を開始するための無料のオンラインリソースがたくさんあります。 すぐに始められますので、いかがですか？

共有するJavaScriptを学習するための他のスターターリソースはありますか？ もしそうなら、下のコメントでそれをしてください！