JavaScriptとASP.NETについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptとASP.NETについて解説しています。WebアプリケーションフレームワークのひとつASP.NETの特徴、JavaScriptとASP.NETで開発を行う手順を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptとASP.NETについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptとASP.NETについて詳しく説明していくね!

大石ゆかり

お願いします!

 

Webアプリケーションフレームワークとは

普段利用しているWEBサービス。何気なく利用していると思いますが、その仕組みに関して改めて考えてみましょう。WEBサービスを利用する際に私たちが使用するのは、ブラウザー(IE,Edge,Chrome,Safari など)です。では、ブラウザーとは何をしてくれるものなのか?考えたことはありますか?

最近は高機能になっていますが、本来は『HTML形式の情報をその形式に従って表示させてくれる』ものとなります。要するにタグ(<h2>や<br> など)をルール(文字の大きさや色など)に従って画面に表示してくれます。

これに対して、WEBサーバーはURLでリクエストのあった内容の『HTML形式の情報』を返してあげる事をしています。『HTML形式の情報』という事がポイントで、HTMLファイルである必要は有りません。

WEBサーバーは、HTMLファイルやサーバーサードプログラム(PHPなどが代表的)の実行結果などを組み合わせて、『HTML形式の情報』に加工した結果をブラウザーに返しています。こうする事により、動的なWEBサービスを提供する事が可能になっています。

さて、WEBサービスの概要はある程度おさらいできたかと思います。では、本題の「Webアプリケーションフレームワーク」と何なのでしょうか?一言でいうと「WEBサーバを通して、WEBサービスを提供する仕組みを簡単に用意するツール」という事になります。

先ほど説明した、WEBサーバがリクエストに応じてHTML形式の情報を返す仕組みを構築するのが目的となるわけです。「Webアプリケーションフレームワーク」には沢山の種類があります。

  • Ruby on Rails
  • Django
  • CakePHP
  • ASP.NET

其々に使える言語や特徴などがあるので、興味がありましたら調べてみて下さい。

 

ASP.NETとは

今回は、先ほど上げた中の「ASP.NET」について解説致します。

「ASP.NET」はマイクロソフトが出している「Webアプリケーションフレームワーク」になります。其の為、利用できる言語はC#やVB.NETなどで、基本的にWindowsで稼働できます。※MACでも出来ます。

Windowsになれている人には、親しみやすいかもしれません。構築もとても簡単で、”Visual Studio”(community版は無料)をインストールしてプロジェクトでWEBサービスを選択すればOKです。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptとASP.NETなどのWebアプリケーションフレームワークを組み合わせた開発の例

まずは、下記で”Visual Studio”(community版は無料)をダウンロードしてインストールをしましょう!

https://visualstudio.microsoft.com/ja/downloads/

基本的にデフォルトで問題なくインストール出来ますが、詳しい方法は別途調べてみて下さい。インストール出来ましたら、早速プロジェクトを作成します。今回は、JavaScriptの勉強という事で、「空のNode.js Webアプリケーション」プロジェクトを選びます。

プロジェクトの作成を終えると「Node.js」のランタイムが見つからない旨のメッセージが出る場合があります。その場合は、下記よりダウンロードして下さい。

https://nodejs.org/en/download/

ダウンロードしたら、プロジェクトの構成で「node.exe」のパスを指定します。続いて、上部にある”Webサーバ”のボタンをクリックすると起動します。ブラウザーが開いて”Hello World”が表示されれば、取りあえずはOKです。

もっと詳しく知りたい場合は、マイクロソフトの公式サイトよりチャートリアルを進めて下さい

https://docs.microsoft.com/ja-jp/visualstudio/ide/quickstart-nodejs?view=vs-2019

※因みに、上記サイトはASP.NETで作成されています。

結構簡単にWEBページが作成出来るのがわかるかと思います。使い方を覚えるのは少し大変ですが、自身でWEBの構成を考えなくて良いので「Webアプリケーションフレームワーク」は積極的に使って行きましょう。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。