【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
Web上で動作する、もっとも身近なプログラミング言語『JavaScript』。現在のJavaScriptはWebアプリの開発のみならず、さまざまな場面で活躍するプログラミング言語となっています。
今回はJavaScriptでできることと、おすすめの学習方法を初心者向けにご紹介します。
目次
JavaScriptとは主に、Google ChromeやSafariといったブラウザ上で動くプログラミング言語です。
JavaScriptを使えば、たとえば以下のようなことができます。
ブラウザ上でのJavaScriptは、もともとあまり多くの動きができるプログラミング言語ではありませんでした。
しかし近年はスマホやPCなどのIT端末の性能向上や、JavaScriptそのものの進化によって、JavaScriptでできることは以前より幅を広げました。
この記事では、JavaScriptを使えば実現できる代表的な6つのことをご紹介します。
ブラウザ上で表示するHTML(Webページの内容と構造を記す言語)やCSS(Webページの装飾を指定する言語)をJavaScriptで操作し、画面に動きを与えられます。
たとえばユーザーのスクロールに合わせて、画面上の背景デザインを変化させたり、ローディング時のアニメーションを作ったりできます。
See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84) on CodePen.
▲出典:Hand written SVG text animation (anime.js公式デモ)
JavaScriptは、サーバーと通信して情報を取得することもできます。
Web上のコンテンツは基本的に「サーバーサイド」と「フロントエンド」のふたつのシステムで構築されています。
ここでいう「サーバーサイド」とはサーバー側で動いているプログラムのことを示します。
サーバーサイドのプログラムは、たとえば以下の役割を担っています。
- URLに対してどのページを表示するかを制御する
- データベースから特定の情報を取得する
一方でフロントエンドのプログラムは「サーバーサイドから取得したWebページをブラウザに表示する」などの役割を担っています。
ブラウザ上で動くJavaScriptは、フロントエンドとサーバーサイド間のやりとりを行える言語なのです。
たとえば以下のことを実現できます。
「画面を部分的に動かす」「サーバーと情報を送受信する」などができるJavaScript。その機能を活用して、ブラウザ上に高度で複雑なアプリをつくれます。
たとえば表計算ソフト『Googleスプレッドシート』やワープロソフト『Googleドキュメント』などは、JavaScriptにより動的なコンテンツを精製しています。
近年ではこのような「ブラウザ上で動作する複雑なアプリケーション(Webアプリ)」の需要が高まってきています。
Webアプリは「iPhoneかAndroidか」といった端末の違いを気にする必要はなく、「職場ではPCから、家や通勤中にはスマホから使用」なんて使い方が可能です。
PCやスマホ、タブレットなどさまざまなデバイスを複数所有するのが一般的ないまの日本では、こういった使い方をできるブラウザアプリの需要は高いです。
ここまでは「JavaScriptはブラウザ上で動くもの」だと説明してきました。
しかし近年ではJavaScriptの役割が拡大して、ブラウザ以外の環境でも活用されるケースが増えています。
ブラウザ外でJavaScriptが活用されるパターンのひとつがJavaScriptでの「スマホアプリ開発」です。
もともとスマホアプリは、Androidなら『Java』や『Kotlin』、iOSなら『Swift』や『objective-C』などのプログラミング言語で開発されていました。
しかしAndroidとiPhoneで必要なプログラミング言語が違うのは開発者にとって不便なところです。
この状況を打破したのが『React Native』。これは、JavaScriptのスマホアプリ開発用のフレームワーク(アプリ開発をサポートするパッケージ)です。
React Nativeを活用することで、開発者たちは「Android、iOSのどちらにも対応したスマホアプリ」をつくれるようになりました。
React Nativeでつくられたプロダクトの代表例には、スマホアプリ版のFacebookやInstagramなどが挙げられます。
ブラウザ外でJavaScriptが活用される2つめのパターンが「サーバーサイドのシステム開発」です。
もともとブラウザで動かす前提でつくられたJavaScriptは、サーバーサイドでは動かないプログラミング言語でした。サーバーサイドでは『Java』『Ruby』『PHP』などのプログラミング言語が用いられていたのです。
しかし『Node.js』が開発されたことによって、サーバーサイドでJavaScriptを動かせるようになりました。
開発者たちはフロントエンドだけでなく、JavaScriptの技術でサーバーサイドも同時に開発できるようになったのです。
Node.jsを活用すれば、JavaScriptでWebアプリのサーバーサイド側のシステムを構築できます。
ブラウザ外でJavaScriptが活用されるパターンの3つめが「スプレッドシートなどのGoogleサービスと連携した業務自動化・効率化システムの開発 」です。
GoogleドキュメントやGoogleスプレッドシートをはじめとしたGoogle製のサービスでは、JavaScriptをベースにしたプログラミング言語「Google Apps Script(GAS)」で業務の自動化や効率化のシステムをつくれます。
GASはあくまでGoogleが自社製品のために用意したJavaScript拡張言語です。しかしその自由度が高いため、多くの企業や個人がGASを利用しています。
ブラウザ上から編集&実行できるので、開発環境を用意する必要がなく手軽に扱えるため人気があります。
GASを利用すれば、以下が可能になります。
Google Apps Scriptについて、詳しくは以下の記事をご覧ください。
【初心者向け】Google Apps Scriptでできること10選!自動化で業務効率を大幅UP
Workship MAGAZINE
もともとはブラウザのみで動作するプログラミング言語だったJavaScript。しかし現在ではJavaScriptの技術ひとつでさまざまなことを実現できるようになりました。
これからプログラミング言語を学習したい人、かつどの言語から始めるか迷っている人は、とりあえずJavaScriptから始めてみるのはおすすめできます。
とくに
には、JavaScriptはぴったりのプログラミング言語です。
JavaScriptはWebアプリや画面上のアニメーションなど「目で見て分かるもの」をつくるときに活躍することが多いです。
そのため「自分がつくったものを視覚的に確認したい人」「デザインや画面上の装飾をこだわりたい人」こそ、楽しみながら学習を進められるでしょう。
初心者におすすめの学習法が、ブラウザ上に展開されたWebページ(HTML)上のさまざまな要素の操作です。
JavaScriptの基本は、HTML上の要素が保持するさまざまな値(プロパティ)の操作です、入力フォームに文字列を書きこんだり、画面上の要素を動かしたりできます。
プロパティの操作には以下の方法があります。
この基本の操作を繰り返し、JavaScriptの基本的な仕組みに慣れましょう。
だんだんとJavaScript慣れてきたら、次はHTMLとCSSのマークアップを利用しつつ、JavaScriptを利用した自作のWebページをつくってみましょう。
アニメーションを取り入れたり、ユーザの操作に合わせて画面を変化させたり、段階をふんで処理を行います。そうすれば、少しずつJavaScriptの技術を身につけられるはず。
公式ドキュメントや解説本/解説記事を読みながらJavaScriptの使い方を覚え、ある程度基本的な作業をこなせるようになったら、好きなアプリを制作してみましょう。
ただしアプリ制作では、JavaScript以外のプログラミング言語やIT技術を絡めながら学習していく必要があります。そのときは逃げることなく、必要となった新しい技術を身につけていきましょう。
そうすることで、JavaScriptを他の技術と組み合わせながら開発を行う総合的な力が身につきます。
JavaScriptの学習を進めるにあたって、調べてもいまいち理解できない事象に出会うこともあると思います。
そんなときに役立つのがプログラミングスクールです。わからないことがあれば、必要に応じて講師に質問しながら学習を進められます。
2024年 東京都内の優良プログラミングスクール20選
Workship MAGAZINE
またプログラミングスクールのほか、Web上で利用できるプログラミング学習サービスもあります。Webから利用できる学習サービスは、自分のペースに合わせて学習できるのでおすすめです。
オンラインのプログラミング学習サービス27選
Workship MAGAZINE
必要に応じてスクールやサービスを利用しながら、自分にあった学習法でJavaScriptのスキルを身につけていきましょう。
時代の変化とともに機能を発展させ、現在では高度なWebアプリやスマホアプリ、さらにはサーバーサイドのシステムまで幅広い場面でJavaScriptは活躍しています。
年々その重要性と注目度を増しているJavaScript。学習のために用意するものが少なく、勉強しやすいプログラミング言語でもあるので、これからプログラミングの学習を始める人にもおすすめの言語です。
(執筆:sig_Left 編集:Sansui Riho)
JavaScript初心者が失敗しがち/間違えがちなこと8選
Workship MAGAZINE
【連載】プログラミングでできること
現役エンジニアによる各言語の特徴紹介!
プログラミングでできることとは?初心者のための超基礎知識
JavaScriptでできることとは?おすすめの学習方法を徹底解説
【AI開発に必須】Pythonでできること7選。機械学習はもちろん、データ分析やWebアプリ開発も!
Javaでできることとは?汎用性の高い初心者おすすめ言語
PHPでできることとは?Webアプリケーションを作るならコレ!
Rubyでできることとは?スピード感ある開発をしたい方におすすめ!
Go言語でできることとは?パフォーマンスの高い汎用的な言語
Swiftでできることとは?iPhoneアプリの開発ならこのプログラミング言語!
C++でできることとは?IoTや機械工学が得意な歴史ある言語!
Kotlinでできることとは?Googleが推奨する次世代Android用言語
C言語でできることとは?IoTやロボット開発にも使われる汎用言語
C#でできることとは? 幅広いアプリ開発に用いられる将来性の高い言語
Unityでできることとは?世界中のゲーム開発に使われるゲームエンジン
CSSでできることとは? 洗練されたWebデザインに必須の言語!
Perlでできることとは? 存在感は薄れるもニッチな需要がある言語