「JavaScriptでできることを知りたい」「転職を考えてスキルアップしたい」言語だけではなく、将来的な転職に悩まされていませんか?
JavaScriptの利用の範囲は年々広がりを見せています。
転職する際にもJavaScriptについての見識があるかどうかは大きなポイントです。HTML/CSSはできるけど、JavaScriptはできない。転職先やエージェントの視点では、採用に至らないエンジニアです。
そんな未来を回避するため、このページではJavaScriptでできることを「コードを交えて」解説します。そして、気になる年収アップ、実際に学ぶのにおすすめのスクールについて紹介していきます。
JavaScriptでできること
JavaScriptは多岐に渡って様々なことができる言語です。
スキルアップ目的で着手しやすい言語のひとつとなっています。これは近年のJavaScriptがwebアプリケーションをはじめとした、多様なプログラムに利用されているからです
例えばInstagramはJavaScriptで作られています。JavaScriptのアプリは過去には想像できませんでした。web上のプロパティを変化させる程度としての認識だけの時代もあります。しかし、近年は以下のようなことができるようになりました。
- サーバーと連携したwebアプリケーション
- node.jsを利用したサーバーサイド機能
- スマートフォンアプリケーション
JavaScriptはスキルアップにも多様な開発にも役に立つ言語です。まずはポップアップ生成の要素から理解し、言語の掴みを理解しましょう。
1, ポップアップウィンドウの生成(動的なWebページ)
JavaScriptの基本形はクリックや読み込みに対する「イベント」に対して動作を定義することです。最初の取り掛かりとしてポップアップウィンドウの生成をしてみましょう。ポップアップは簡単に画面に動きをつけることができる機能のひとつです。高級言語で扱う「Hello World」と同じ感覚で考えてみてください。
また、JavaScriptは以下の形式で動作させることができます。
- HTMLファイルに直接記述する形式
- jsファイルを記述してHTMLに読み込ませる形式
今回は前者のHTMLファイルのなかに直接記述をして、ポップアップウィンドウの動作まで解説します。
JavaScriptでポップアップウィンドウのコードを書く
ポップアップウィンドウのコードを書くためには簡単なHTMLファイルが必要です。テキストファイルに以下のような記述をして、html形式のファイルで保存しましょう。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>テストファイル</title>
これでHTMLファイルが完成したため、ポップアップウィンドウのコードを記述します。ポップアップウィンドウはたった一行で記述することができます。
<input type="submit" value="購入する" onClick="alert('購入しました!');">
この一文を最後尾につけることでポップアップが完成します。inputタグの中に、onClickの要素を追加することで「購入する」ボタンを「クリック」したときに「動作する」という意味を与えることができるのです。
あとはalert関数の中に「購入しました!」という文字列を書くことで、購入ボタンをクリック時にポップアップが表示されるようになります。
書いたコードを動作させてみる
作成したHTMLファイルをGoogleChromeなどのブラウザで開くと「購入する」ボタンだけの画面が表示されます。
さっそく画面の「購入する」ボタンを押してみます。
クリックと同時に「購入しました!」というポップアップが表示されたことでしょう。すごく簡単に動きのあるサイトができます。
表示されましたか?
JavaScriptを利用することで、文字だけの「静的な」サイトを、ポップアップを表示したり、スクロールすることで表示することができるような「動的な」サイトとして動作させることができるのです。
「静的」と「動的」は紙芝居とアニメーションのような差があります。単なる文字だけのサイトにならないようにJavaScriptで動的なサイトを構成しましょう。
2, webページのバナー広告の生成
ポップアップ機能を利用することで、より表現豊かにすることができます。これは静的なサイトに動きがないためです。バナーを例にすると、画像として表示されるだけの紙芝居ともいえます。
しかし、先述したポップアップ機能を利用すれば動的にバナーを表示することが可能です。また、JavaScriptを利用すれば複数のバナーをローテーションする機能も作れます。
この機能を利用することで複数種類のバナーを見せることができるのです。人の目は動くものに反応するようにできています。特にローテーションバナーは見せるにも効果的ですし、広告に注意を引くことができるのです。
案件例1. ECサイト制作企業での広告運用
業務内容
・ECサイト制作企業での広告運用
・広告バナークリエイティブのディレクション
・クライアント報告資料の作成
応募に必要なスキル
・リスティング広告やディスプレイ広告などの運用型広告経験3年以上
・広告バナーなどのディレクション
・運用予算と実績管理
・クライアント報告資料の作成
【歓迎スキル】
・SNS・アフィリエイト等の運用
報酬(月額)
~500,000円
※開発案件例は架空のものです。
3, サーバーと通信して情報のやり取りを行う
JavaScriptはwebページを動的にすることができることを説明しました。JavaScripは他にもフロントエンドとサーバーサイド間での情報のやりとりに適していることです。
例えば、検索サイトで考えましょう。キーワードを入力して検索ボタンをクリックするとJavaScriptが動作し、web上のサーバーにリクエストを送信します。
リクエストに反応して、キーワードに関連する情報をサーバーサイドがまとめてJavaScriptに返却してくれるのです。返ってきた情報を処理するのもJavaScriptの重要な役割です。
予約サイトなどで、リアルタイムの予約情報などを手に入れる時にもJavaScriptは役立っています。PHPなどのサーバーサイドの言語とJavaScriptをうまく連携させることでより動的なwebページを作成することができるでしょう。
案件例2. ASPカートシステム開発
業務内容
・ショッピングカートサービスの開発をご担当いただきます。
・リリース後の数値やユーザーのフィードバックを見ながらマーケティング
応募に必要なスキル
・MySQLなどのRDBMSを使用した開発経験
・Linux又はFreeBSD上でのwebシステム開発経験
・PHPを用いた開発経験
【歓迎スキル】
・Webサービスの開発及び運用の実務経験
・javascript(jQuery等)を使用した開発経験
・リーダー又はプロジェクトマネジメント経験
報酬(月額)
~750,000円
※開発案件例は架空のものです。
4, スプレッドシートと連携した業務効率化
Googleスプレッドシートを利用したことはあるでしょうか。
GAS:Google Apps ScriptというJavaScriptをベースとした言語が存在しています。この言語はスプレッドシートと連携することで、業務効率化ができます。スプレッドシート上でトリガー設定を行うことで、機能を常駐させることができるのが特徴です。
ブラウザ上で編集や実行が可能となっているため、開発環境がいらないことから、手軽に始めることができます。JavaScriptベースのため理解しやすく、登録したGmailをSlackやdiscodeに転送する機能や、自動翻訳を行うことができるなど、効率化に貢献することが可能なJavaScriptベースの言語です。
上記画像は実際に編集部で稼働させているGmailの通知集約ボットで、GASでプログラミングしたものです。
職業柄、複数のメールアドレスを使い分けているので、それらに送信されたメールをすべてDiscordのサーバーに集約させています。送信元の種類ごとにチャンネルをカテゴリ分けすると、さらに便利に活用できます。
JavaScriptの学習と並行して進めることで、クラウド化が進む現在のエンジニア業界で効率的な作業を行うことができるでしょう。
5, ゲームの開発
JavaScriptではゲーム開発もできます。
ゲームと聞くとUnityなどの専用のツールや言語が必要と思われががちですが、JavaScriptでも以下のジャンルのゲームが作成可能です。
- シューティンング
- シミュレーション
- ロールプレイング
- アクション
HTML5から提供されているCanvasと、JavaScript用のゲームライブラリを利用することで様々なコンテンツを作成できます。物理法則に従ったゲームの作成も、専門的なツールを利用せずに作成が可能です。
案件例3. フロントエンドゲーム開発
業務内容
自社ゲームにおいて、フロント周りの設計/開発/テスト/運用
HTML5 とCSS3 を使用したゲーム開発や、 モックアップ作成、バージョン管理
応募に必要なスキル
・スマートフォンに対応したWebアプリの開発経験
・HTML5とCSS3 を使用した実務経験1年以上
・JavaScriptを使用した実務経験2年以上
・尚可記載のスキルが1項目でも該当する
【歓迎スキル】
・HTML5を使用してゲーム制作を行なった実務経験
・テンプレートエンジンの知識
・オブジェクト指向を利用したJavaScriptでの開発経験
・CSSプロセッサーを利用したスタイリングの経験
・CMS、テンプレートエンジンの利用経験
報酬(月額)
~650,000円
※開発案件例は架空のものです。
言語名 | 人気ランキング | 案件の数 | 案件平均単価 | 習得のしやすさ | 環境構築のしやすさ | できること |
C++ | 1 | ★★★★★ | 71万円 | ★☆☆☆☆ | ★☆☆☆☆ | C++でできること |
C | 2 | ★★★★★ | 67万円 | ★☆☆☆☆ | ★☆☆☆☆ | C言語でできること |
Python | 3 | ★★★★☆ | 77万円 | ★☆☆☆☆ | ★★☆☆☆ | Pythonでできること |
JavaScript | 4 | ★★★☆☆ | 72万円 | ★☆☆☆☆ | ★★☆☆☆ | JavaScriptでできること |
SQL | 5 | ★★★☆☆ | 65万円 | ★★★☆☆ | ★☆☆☆☆ | SQLでできること |
Java | 6 | ★★★☆☆ | 69万円 | ★☆☆☆☆ | ★★☆☆☆ | Javaでできること |
HTML/CSS | 7 | ★★★☆☆ | 70万円 | ★★★★★ | ★★★★★ | HTMLでできること CSSでできること |
PHP | 8 | ★★☆☆☆ | 72万円 | ★★☆☆☆ | ★★☆☆☆ | PHPでできること |
COBOL | 9 | ★★☆☆☆ | 61万円 | ★☆☆☆☆ | ★☆☆☆☆ | COBOLでできること |
Ruby | 10 | ★★☆☆☆ | 80万円 | ★★☆☆☆ | ★★☆☆☆ | Rubyでできること |
Swift | 11 | ★☆☆☆☆ | 79万円 | ★★☆☆☆ | ★★★★☆ | Swiftでできること |
JavaScriptとHTML/CSSはどう違うの?
JavaScriptとHTML/CSSの違いについて、理解していますか?
HTML/CSSと一緒に語られることや、フロント画面を作成時に利用される機会が多いため同一視されがちです。違いをしっかりと理解しておきましょう。
- HTML:webページの文章の内容や構成を定義するためのマークアップ言語
- CSS:webページの見た目を指定するための言語。簡単なアニメーションも可能
- JavaScript:webページのなかにある要素の動きを指定するための言語
定義から理解されたと思いますが、あくまでフロント画面を構築するのはHTML/CSSであり、JavaScriptは動きを定義するための言語であることを間違えないようにしましょう。
JavaScriptを使った開発案件は稼げるの?仕事ある?
結論からいうと、JavaScriptを利用する案件は多数あります。
webエンジニアのなかではJavaScriptは必須の知識です。node.jsによりサーバーサイドの処理も可能になったことから、JavaScriptは多彩な案件に利用される言語として安定するといえます。
また、フリーランスではJavaScriptの平均単価は72万円です。これはJavaの平均単価を超えていることから、年収アップを考えている場合はJavaScriptを学習して損はありません。
もし新たな言語の取得を模索している場合は、JavaScriptを理解することで稼ぎと仕事の両方を手に入れることができるでしょう。
JavaScriptが人気な理由
JavaScriptが人気な理由としては開発環境がすぐに整うことです。極端な例をあげればWindowsPCがあればその瞬間から開発ができます。
標準的なエディタを利用することで開発が可能であるという手軽さや、特別な環境変数を通す必要がないことから容易に始められることが魅力です。
例えば、特別な開発では開発環境を整えるだけで1日を費やしてしまいます。それが100人いれば100日分の工数や金銭を使うことになります。しかしJavaScriptはそれがありません。それ以外にも学習を始めるのに心強いのが以下のような点です。
- エラーやバグについての情報交換が盛んなことから、迷った時の解決策が多い
- プログラミングスクールで必ず取り扱われている
- 学習コストが低い
もしも専門家の知識が欲しいと考えている場合はプログラミングスクールに入会すれば学習の道筋を立ててくれるでしょう。
JavaScriptエンジニアの平均年収
JavaScriptエンジニアの平均年収には2種類あります。それはフリーランスであるか、会社員であるかです。
結論から言うとフリーランスエンジニアの平均年収は802万円で、会社員は469万円となっています。
会社員のフロントエンジニアというのは、上流工程から関わることがない限り基本的に年収が低いということです。比べてフリーランスは高単価なJavaScript案件に関わることができるため、このように年収に差が生まれているのです。
また、会社員とフリーランスでは求める技術レベルに差があります。フリーランスとして生きていくのであればしっかりとした学習が必要でしょう。特に独学では高いレベルを要求されたときにつまずくため、ハイレベルなエンジニアを目指すことを検討しているのであればプログラミングスクールを利用するのは必須です。
JavaScriptでできることまとめ
JavaScriptでできること、平均年収や業界の実状について解説してきました。
エンジニアの業界は常にスキルアップが必要です。それと同じスピードで言語のレベルも利用用途も増えてきています。現職の仕事を続けることに悩んでいる人、転職を切に希望している人。それぞれの不安を抱えていることでしょう。
JavaScriptの学習は金銭的な余裕を生み出すことにも長けていますし、スキルアップをするために必須の技術です。
ハイクラス転職を希望している人、これから副業などを始めたいと思っている方は、プログラミングスクールを利用することで効果的な学習を行うことができるでしょう。
将来的な不安の払拭や、スキルアップのためにも、先行投資をして学習を行っていくことがオススメです。ぜひスクールの内容をチェックしてみてください。