TIMES入会申込お問い合わせスタートアップが会社情報とお知らせを配信できるようになりました。TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。cc「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第6回目のテーマは「JavaScriptの基礎」です。前回は「これからプログラミングを学び始める方へ」というテーマでお送りしました。今回はより具体的にプログラミングを学んでいただくために、JavaScriptについてご紹介していきます。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。本記事では、数あるプログラミング言語の中でJavaScriptがどういった背景や性格を持つ言語なのかを解説し、動作するソースコードを交えてJavaScriptに触れるきっかけを提供します。JavaScriptとは何か?以前の記事で、マークアップ言語のHTMLと、スタイルに関する情報を記述していくCSSについて解説しました。Language(ハイパーテキスト・マークアップ・ランゲージ)の略称で、Web上の文書を記述し、またブラウザがそれを解釈するためのマークアップ言語(構造化言語)。指定など、スタイルに関する情報を、連続して記述していくもの。これらの要素に対して操作や制御を行うために使うのがブラウザ上で動作するJavaScriptの役割です。具体的には、ボタンをクリックした時にアラートを出す、HTML文書の情報をページを書き換える、などです。HTMLは文書構造を定義し、CSSでは定義された情報に基づいてスタイルの適用させます。JavaScriptは、さらにその情報を操作することを可能にします。ちなみに、初心者でJavaScriptとJavaを混同される方がいますが、まったくの別物ですのでご注意ください。生い立ちから仕様の標準化までJavaScriptのプログラムをブラウザで動かす前に、JavaScriptの生い立ちについて知っておきましょう。2.0で実装されたプログラミング言語です。開発当初はLiveScriptと呼ばれていましたが、1995年にJavaScriptという名前に変更されました。3.0に搭載、1997年にはJavaScriptのコア部分の仕様がECMAScriptとして標準化され、ウェブブラウザ間の互換性が高まりました。JavaScriptに限りませんが、プログラミング言語にとって「どの環境でも動く」というのは大事なことです。Explorerユーザーには使えないウェブアプリケーションを書いているとしたら、それは大きな機会損失となります。そのためECMAScriptとして仕様が標準化されていることは、JavaScriptにとっても開発者にとっても、さらにはアプリケーションを利用するエンドユーザーにとっても、とても重要なことなのです。ccでは手始めに、最も簡単なJavaScriptプログラムを書いて、動かし方を覚えましょう。プログラミング言語を学ぶ際にお決まりなのが「Hello,world」という文言を出力することです。JavaScriptはブラウザで動作する言語として広く知られており、HTMLファイルのscriptタグの中に記述して簡単なスクリプトを動かすことが出来ます。world");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;この記述をしたhtmlファイルをブラウザで表示すると、問題なくHello,worldというアラートが出力されるはずです。このように面倒な環境構築が必要ないという意味では、初学者に易しいプログラミング言語と言えるでしょう。JavaScriptというスクリプト言語の良いところは、学習の最初のハードルが下がることです。オブジェクト指向でありながら関数型言語としての一面も持ち、ブラウザ上だけでなくサーバーサイドのプログラミング言語としても使われるJavaScriptは決して簡単な言語ではありませんが、使い慣れたブラウザを仲介することで学習を始めやすい言語であることは確かなのです。イベントドリブンな言語JavaScriptのもう一つの特徴として、イベントドリブンというキーワードが挙げられます。イベントドリブンとは、ユーザーのアクションやその他のイベントによってプログラムが作動するという意味です。alert("ボタンがクリックされました!");}このように、ドキュメントの要素をオブジェクトとして取得して、そこに関数を割り当てることで、イベントドリブンの挙動を実現しています。JavaScriptで作るミニアプリではいよいよ、JavaScriptで簡単なアプリケーションを作りながら、JavaScriptに触れていきます。身近な例ということで、2020年の東京オリンピックまでのカウントダウンタイマーを作ってみます。&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;HTML中から外部のJavaScriptを呼び出すには、<script>タグを使って、src属性に対象のスクリプトを指定します。今回はtimerというID名を指定した場所に、オリンピックまでの残り時間を表示させます。次に、index.htmlと同じ階層にapp.jsというファイル名でJavaScriptファイルを作り、プログラムを書いていきます。1000);}このプログラムを書いてから先ほどのHTMLファイルを表示すると、カウントダウンが動作しているはずです。ここでは、オリンピックまでのミリ秒を取得してそれを各単位(日・時間など)に変換、最後にHTMLに反映させています。この処理だと読み込み時に1度だけ実行されてカウントダウンにならないので、処理を関数にまとめておいて1000ミリ秒(1秒)ごとに繰り返し実行しています。JavaScriptの各種ライブラリ・フレームワーク簡単なJavaScriptプログラムを書いてみたところで、目的に応じてJavaScriptをより便利に扱えるようにした有名なライブラリやフレームワークをいくつか紹介します。jQueryjQueryとは、簡単に言うとJavaScriptをより直感的に扱うためのライブラリです。代表的なのが$関数で、たとえば先に書いたコードを例に出すと、以下のように書き換えることができます。days;jQueryを使ったコード$("#days").text(days);jQueryを使わないコードに比べて短くなり、可読性も向上しました。CoffeeScriptCoffeeScriptとは、JavaScriptを書きやすくするためのもので、スタートアップのWebアプリケーションなどで積極的に採用されています。"taro"セミコロンや丸かっこを書かなくて済むので、スリムな見た目のコードが書けるようになります。AngularJSAngularJSとは、クライアントサイドのMVCフレームワークです。HTML5以前のJavaScriptはウェブアプリケーションにおいて、見た目を操作したりちょっとしたアニメーションを付けたり、という補助的な役割を担っていたケースが多かったため、クライアントサイド(ブラウザ側)のフレームワークはそれほど必要とされていませんでした。近年、クライアントの役割がより重要になり、大規模なJavaScriptを書く必要が出てきたため、このAngularJSのようなフレームワークが人気となっています。Node.jsNode.jsとはサーバーサイドのJavaScript環境です。ウェブアプリケーションのサーバーサイドというとPHPやRuby、Javaなどが一般的ですが、これらに加わるサーバーサイドプログラミングの選択肢として注目を浴びています。cc本記事で、JavaScriptの基本的なところは知って頂けたと思います。これからさっそくJavaScriptを学習するとして、何をすればいいのでしょうか。HTMLの設計思想と、2014年に最適な学び方で紹介した内容と被るところもありますが、ここでは3つだけご紹介します。動画学習サイトで学ぶHTMLの記事でもおすすめしましたが、動画で学ぶのは何も知らない状態から勉強するのに、とても適しています。人がコードを書いている所を眺めるだけでも、勉強になります。動いているサンプルをいじってみるある程度つかめてきたら、実際に動いているサンプルコードをいじってみることをおすすめします。jsdo.itのようなサイトで簡単なJavaScriptプログラムを検索して見つけてみて、手元でいじってみてはいかがでしょうか。簡単なツールを作ってみる最初のうちは、JavaScriptでどういったツールを作れるのかわからないと思います。動画で学習したり実際に動いているサンプルをいじってみると、ある程度難易度がつかめると思います。占いアプリのように、簡単なプログラムでも見せ方次第で面白いツールになり得ます。HTMLとCSSとJavaScriptさえ知っていれば、そういうものを今すぐ世界に公開することができるのです。以上、JavaScriptについて見てきました。次回の第7回は「PHP」をテーマにお送りします。Bridge」はアジア圏の起業家と投資家をつなぐプラットフォームです。スタートアップに関するニュースサイトとデータベースを融合して、Bridgeスコアによってスタートアップへの注目度を数値化します。