こんにちは。侍エンジニア塾ブログ編集部です。
初心者にもおすすめの言語と聞いたので習ってみたい
プログラミングをこれから始める方にとって、JavaScriptは比較的人気なプログラミング言語の1つではないでしょうか。
しかし、JavaScriptが色々できることはわかるけど、具体的に何ができるのかよく分からない。という方もいらっしゃいますよね。プログラミング言語によってはできることと出来ないことがあるので、実はあなたの目的とJavaScriptがマッチしていないということも考えられます。
そこでこの記事では、JavaScriptで具体的にどんなことができるのか、例としてどんなモノが作れるのかを解説していきます。
JavaScriptを学習する前に、まず何が出来るのかをしっかりと学んでおきましょう。
この記事の目次
そもそもJavascriptとは？
JavaScriptは主にInternetExplorerやGoogleChromeといったブラウザ上で動作するプログラミング言語です。
WEBプログラミングを学習している方にとって、JavaScriptはHTML/CSSの学習後に出てくるはじめての本格的なプログラミング言語になりますね。
勉強を始めたばかりの方は、JavaScriptはWEBページの動きを担当していると学習するのではないでしょうか。HTMLやCSSがWEBページのデザイン(動きのない静的)を担当していることから、よく言われます。
しかし、JavaScriptでできることはものすごく幅広く、様々なモノを作ることができるのです。
JavaScriptの基本をもっと詳しく知りたい方はこちらを御覧ください。
JavaScriptでできること
では、具体的に何ができるのかさっそく見ていきましょう！
WEBサイトに「動き」を加える
HTML、CSSの操作を動的に行うことができます。
動的とは、WEBページが表示された後に、HTMLの要素を追加したり、CSSで色を変えることができることを指します。
そのため、目立たせたいボタンやメニューにアニメーションや効果を追加したりできるので、ユーザーが使いやすいサイトを作ることが可能なのです。
WEBサイトの利便性を向上させることは、ビジネス上ではユーザー獲得において重要な要素となります。これがもっともJavaScriptが使われる理由です。
もっと具体的な例で確認してみましょう。
具体例1:HTML要素を追加
下記のようなコードを書くと、HTML要素を追加することが可能です。
See the Pen appendChild2 by 河野七海 (@kouno73) on CodePen.0
このあと紹介するクリックイベントを使うことにより、クリックしたら動作するというプログラムにしています。
具体例2:CSSを変えて見た目を変更
JavaScriptはHTMLだけでなく、CSSの変更も可能です。
See the Pen anime4 by 河野七海 (@kouno73) on CodePen.0
こちらもクリックイベントと組み合わせてみました。
イベント処理
JavaScriptは、マウスの動作やクリックされたという動作をイベントとして取得することができます。
そのイベントと紐づけて、いろいろな動作をつけることも可能です。
具体例1:クリックしたら動作する
先ほど紹介した、クリックしたら動作するプログラムですね。
See the Pen sample2 by 河野七海 (@kouno73) on CodePen.0
クリックされたことを判定するコードを入れ、その中に実際に起きる変化を書くことで、クリックしたら変化するプログラムを書くことができます。
具体例2:チェックされたら動作する
判定できるのはクリックだけではありません。
下記のようなチェックボックスにチェックが入った時もイベントとして取得が可能です。
See the Pen onchange2 by 河野七海 (@kouno73) on CodePen.0
こんな感じで、チェックしたら次の項目が表示されるプログラムが書けるというわけです。
その他のイベント
他にも、以下のようなイベントを取得することができます。
- フォーカスが移動したとき
- フォームの入力値、選択が変更されたとき
- テキストが選択されたとき
- フォームの送信
- 画像読み込みとき
- WEBページの読み込み、切り替え時
- クリック、ダブルクリック
- キーボードからの入力
- マウスを乗せたり離した時、クリックした時
- マウスを動かしている時
- マウスのドラッグ＆ドロップ
こんなにたくさんのイベントを取得することができます。
ユーザーの操作に応じて自由に処理を追加できるため、どんな機能でも実装できるといっても過言ではありません。
非同期通信
非同期通信とは、「リアルタイム通信」を実現する技術のことです。
通常WEBサイトでは、「InternetExplorer」や「GoogleChrome」といったブラウザ上からサーバーという処理を行うコンピュータへ通信を行い、サーバーから処理した結果を受け取ります。
ブラウザでURLを入力した時は、少し待たないとWEBページが表示されないでしょう。
これはサーバーからの応答を待っているからです。
しかし、非同期通信を使ったアプリは、サーバーの応答を待たず次々と処理を行うことができます。
例えば、GoogleMapは地図を動かしても動かした差分だけ画面が更新されますが、これは次々とサーバーと非同期通信し、リアルタイムで画面を更新することで実現しているのです。
JavaScriptで作れるモノ
それでは、JavaScriptでどのような機能が実現できて、どんなものが作れるのかをご紹介します。
WEBサイト
一番メジャーな利用方法として、JavaScriptでは様々な動きをWEBブラウザ上で表現できます。
例えば、次のような機能をJavaScriptで作成できます。
- メニューのボタンを押すと滑るように該当箇所へ移動する
- 複数枚の画像がスライドして表示される
- フォームの入力項目などを「追加する」ボタンで増やす
- メニュー等をボタンで出し入れできる
- お買い物サイトで料金を試算出来る
最近はWEBサイト上でも簡単なアニメーションはCSS3というもので表現されることもあります。
しかしJavaScript等を使わないとブラウザの機能を利用した複雑な動きや細かな動作を作ることが出来ません。
なお、jQueryやBootstrap3と呼ばれるような、特定の動作が予め簡単に作れるように処理がまとめられているものもあります。
世の中にあるほとんどのWEBサイトでJavaScriptが使われており、使われていないWEBサイトの方が少ないです。
WEBアプリ
JavaScriptは、WEBアプリも作ることができます。
JavaScriptだけでWEBアプリを作ることも可能ですが、RubyやPythonなど他のプログラミング言語と併用されることが多いです。
WEBアプリ開発では、WEBページのデザインや処理を担当するフロントサイド、サーバーでの処理を担当するサーバーサイドと分かれて作業することが多いです。
フロントサイド
フロントサイドでは、主にWEBアプリの使いやすさを向上させるために、ボタンやメニューに機能をつけていきます。
現在ある多くのWEBアプリでは、主に
- フォーム送信時の入力内容チェック（バリデーション）
- 子ウィンドウやメニューなどの画面切り替え
などの機能に用いられています。
サーバーサイド
サーバサイドJSと呼ばれる、サーバーと通信する機能を実装できるJavaScriptがあります。
リアルタイムに遣り取りをするチャット機能や通知機能などの作成を得意としています。
なお、Node.jsやMeteor.jsはCloud9という開発ツール上でも簡単に学習や開発を始める事ができますので、こちらもチェックしてみてください。
>>Cloud9の使い方と便利機能！最強プログラミング開発環境
スマホアプリ
スマホアプリには大きく分けてネイティブアプリとハイブリットアプリと呼ばれるものがあります。
ネイティブアプリはスマートホン本体がほぼそのまま理解できる命令で書かれているので、スマホにとって動作させやすいものになります。
ハイブリッドアプリはWEBの技術で記述して、通訳を通して大体ネイティブアプリと同じように動作させられるようにしたものとも言えます。
JavaScriptは様々な開発環境が有るため、両方制作することが可能です。
ハイブリッドアプリ
JavaScriptでひとつコードを書けばAndroidやiPhoneのiOSなど様々な環境へ配布することが出来ます。
代表的なものにはMonacaという開発環境などがあります。
ネイティブアプリ
通常ネイティブアプリはAndroidならJava、iOSならSwiftというプログラミング言語で制作しますが、Titaniumといったツールを使うとJavaScriptのコードをネイティブアプリへ変換してくれます。
http://www.appcelerator.com/mobile-app-development-products/
Titaniumの動向などは下記スライドなどが参考になるでしょう。
ゲーム
厳密に言えば仕組みはWEBアプリやスマホアプリと同じなのですが、そこに画像などの表示やルールを設けることで簡単にゲームを制作することも可能です。
ルールの作り方次第なので、クイズゲームやシューティングゲーム、RPGなんかも制作可能です。
画像やアニメーションの表示などゲームを制作することを簡単にしてくれるツールが多数配布されていますので、こちらも参考にしてみてください。
>>簡単開発！JavaScriptでゲームが作成できるおすすめライブラリ5選！
Javascriptを学ぶべき対象者は？
比較的、習得難易度が低いことと出来ることが多いため、初学者に人気のJavaScriptですが、どのような人が学習するべきかを整理すると、
- プログラミング初心者
- Webサイトを作成したい人
- Webアプリやサービスのデザインを作りたい人
- 簡単なスマホアプリを作りたい人
といったようになります。
Javascriptは、「読みやすく書きやすい言語」なのでプログラミング初心者の人にはぴったりの言語ですし、Web上の表面的な部分を扱う言語なので成果が分かりやすく、インターネット社会において非常に需要の高い言語といえます。
逆にこれらの項目に当てはまらない場合は、JavaScriptではなく別の言語を学んだ方がいいかも知れません。あなたの目的に合わせて必要なプログラミング言語を診断するプログラミング診断サービスを用意しました。
最短1分であなたに合ったプログラミング言語の選定が出来るので、本当にJavaScriptを学んだほうがいいかお悩みの方はぜひご利用下さい。
どのようにJavaScriptを学べばいいのか？
JavaScriptを学ぶには、
- 独学で一人で学ぶ
- プログラミングスクールでプロに学ぶ
この2種類があります。独学で学習を始める場合、無料学習サイトなど多く存在するので、以前よりも学習を始めやすい環境になってきています。ですが、独学で学習する場合、学習時間はおおよそ1000時間かかると言われています。
そのため、モチベーションが続かず挫折する可能性も非常に高いため、プログラミングを学ぶことは難しいと印象を持つ人もいるのではないでしょうか？
プログラミングを挫折せず効率的よく習得するには、適切な環境と適切な教材で学習を続けることが鍵となります。
このように疑問を持つ人もいるでしょう。
では、そのような環境を作るためにはどうすればいいでしょう？答えは、上で紹介したプログラミングスクールで学習をすることです。
弊社「侍エンジニア塾」では、
- JavaScriptをプロからマンツーマンでレッスンできる環境
- あなたの目的に合わせた最適な教材で学習できるオーダーメイドカリキュラム
- 躓いたときにすぐ質問できる学習サポート
を提供いたします。あなたも侍式メソッドで効率的なプログラミング学習を体感してみませんか？
実際通った時に環境が自分と合わなかったらどうしよう…。
といった不安や悩みを抱えているあなたは、まず、弊社「侍エンジニア塾」の無料体験レッスンを受けてみてはいかがでしょうか？弊社では未経験から転職やフリーランスとして活躍されている卒業生を多く輩出している実績があります。
JavaScriptを学ぶ目的を明確化し、その明確になったキャリアに向かって最短で学習するための学習プランを提案させて頂きますので、無駄のない学習で最速でエンジニアになれるイメージが湧くと思います。
不安があって、なかなか未来に向かって一歩踏み出せないあなたを全力でサポートいたします。遠方の方でもオンラインで無料体験レッスンを受講出来るので、お気軽にご利用お待ちしております。
まとめ
いかがでしたか？
JavaScriptで出来ること、色々イメージが具体化してきたと思います。
JavaScriptはまだまだ進化の過程に有るため、今後どんどん環境が変わっていくことが予想されます。
つまり、まだまだ無限の可能性を秘めているのです！
これからますます楽しみなJavaScript、この機会にぜひ学習してみてください。
関連記事
>>未経験からWebアプリ開発にいたるまで！エンジニアになるためのプログラミングスキル修得方法
>>【現代必須の3種の神器】成功者から学ぶ3つのビジネススキル
>>挫折率90%！プログラミングを独学で勉強するのは不可能？！
>>あなたがフリーランスエンジニアを目指すべき7つの理由
>>【体験談付】3Kはもう古い！？エンジニアが手にする『5つの自由』とは？
