1. /
  2. /
  3. /
  4. 【超入門】新入社員と学ぶNode.js！【前編】Webアプリの仕組みがなんとなく分かる！
その他

【超入門】新入社員と学ぶNode.js！【前編】Webアプリの仕組みがなんとなく分かる！

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
  • 0

 

皆さんこんにちは！

今年度SRA東北に入社しました新入社員の髙坂です！

10月に入り、芋煮がおいしい季節になってきましたね！
皆さんは仙台風と山形風、どちらがお好みでしょうか？（私は仙台派です！！！）

さて、私事ではありますが新入社員研修としてNode.jsについて学ばせて頂きました。
今回は、「これからNode.jsを学ぶよ！」という方に向けて、私が学んだことや感じたことを交えながら、Node.jsとWebアプリケーションについてお伝えしていこうと思います！

この記事を読んでいただくと、Node.jsを学ぶ上で必要な知識とWebアプリケーションの仕組みを少し理解して頂けるかと思います！

記事を書いていたところ長くなってしまったので今回は前編として、

  • Node.jsとは何か
  • JavaScriptとは何か
  • Webアプリケーションとは
  • Webアプリケーションの仕組み

以上の4点について、これまでの歴史を交えながら少しでも分かりやすいように説明したいと思います！

何かのご参考になりましたら幸いです。それでは最後までお付き合いください！

Node.jsとは

Node.jsとは、「Webアプリケーションを構築するために設計されたJavaScriptの実行環境」で、JavaScriptを動かすためのソフトウェアです！

今回はNode.jsの具体的な解説の前に、まずNode.jsの根幹であるJavaScriptとは何か、Node.jsやJavaScriptを用いて開発を行うことができるWebアプリケーションとは何かについて解説をします！

次回の後編では、より詳しくNode.jsの特徴やメリットなどを解説していきます。

それではJavaScriptとは何かを学んでいきましょう！

JavaScriptとは

JavaScriptはWebブラウザ上で動くスクリプト言語です。

Webページ内に動きを付けたり、操作に対して即座に反応して処理を行うことに用いられています。

身近に体感でき、JavaScriptが使われている例として有名なのが、GoogleMapです！
Webページ上のGoogleMapを見ているとき、ページをいちいち更新せずとも中の地図を自由に動かせますよね？その動作を実現するために、AjaxというJavaScriptの技術が用いられています！(Ajaxが気になった方は是非調べてみてください！)

他にも入力情報を確認するポップアップやログイン画面などの入力フォームのチェックにも使用されており、JavaScriptはWebアプリケーションにはなくてはならない技術です。

JavaScriptがどのようなものか分かってきたところで、JavaScriptがWebアプリケーションでどのように使われているのでしょうか？
それを学ぶために、まずはWebアプリケーションとは何かを先に学んでみましょう！

Webアプリケーションとは

Webアプリケーションとは、インターネットを通してWebブラウザ上で動作するアプリケーションのことです。

スマートフォン用のアプリやパソコン用のデスクトップアプリケーションもありますが、WebアプリケーションはWebブラウザさえあれば利用できます。近年では、Webブラウザはパソコンやスマートフォンだけでなくテレビやゲーム機などにも搭載されていることから、様々な機器でWebアプリケーションを利用することができるという特徴があります。

Webアプリケーションの一例としては、皆さんが普段から使っている有名なSNSや買い物サイトがWebアプリケーションとして挙げられます。

少し脱線してしまいますが、アプリケーションについてより深く理解するためにWebアプリケーションの根幹であるインターネットについて歴史を学んでみたいと思います。
Webアプリケーションに用いられている技術の発展や、現在人気があるサービスがいつ登場したのかといった情報も合わせてみていきましょう！

インターネットの歴史

ここでは、Webアプリケーションの根幹であるインターネットについての歴史を学んでみたいと思います！
現在に至るまでどのような過去があったのでしょうか、それでは見ていきましょう！！

1967年 インターネットの起源

もともとインターネットは1967年にアメリカが軍事目的で開発した、ARPANETが始まりです。
日本では1973年に初めて東北大学とハワイ大学のコンピュータで接続実験が行われ、テレックスにて接続が成功しました。この頃は、アメリカ、日本のどちらにおいても商用利用はされておらず、民間で使えるものではありませんでした。日本国内初のインターネットは1984年のJUNETと言われており、約700の機関を結ぶネットワークとなりました。
JUNETは、研究者間の情報共有が目的で、主に電子メールで情報共有が行われていました。また、700の機関の中には、大学や国立研究機関だけでなく、計算機メーカーの研究所やソフトウェア会社の研究開発部門などが参加していました。その中には、ソニー株式会社やアスキーなどが参加しており、さらには弊社のグループ会社であるSRAもJUNETに参加していました。

余談ですが、株式会社SRA東北は1986年に設立されました！
(歴史ある会社ですね…！)
ちなみに1986年は、「写ルンです」や「ドラゴンクエスト」が発売され大ヒットした年です！

1990年 インターネットの商用利用の開始とWWW

1990年頃にアメリカで私的・商用利用ができるようになりました。
日本では1993年に郵政省により商用利用が許可され、IIJ(株式会社インターネットイニシアティブ)が初めてインターネットに接続できるサービスの提供を開始しました。

さらに、1993年にはWebアプリケーションの根幹であるWWWが無料開放されるようになりました。
WWWはサービスや情報の提供者がWebサーバーを公開し、ユーザーはWebブラウザを介して情報の閲覧やサービスが利用できる技術です。
無料開放されてから現代でも使用されており、この技術によってインターネットを用いたサービスが普及していきます。

1995年 コンピュータの普及

1995年にMicrosoftから「Windows95」と合わせてWebブラウザ「Internet Explorer 1.0」が発表されました。また、インターネットプロバイダの急増によって料金が安価になったことや、日本では阪神淡路大震災での安否確認で利用され、インターネットと家庭用コンピュータが急速に普及していきました。

当時のインターネットは電話回線を用いて接続しており、ダイヤルアップ接続という方法でインターネットに接続していました。ダイヤルアップ接続はインターネットに接続している間は継続して電話をかけっぱなしの状態になるため、通話料が高額になる問題がありました。
そのような状況のなか、1995年にＮＴＴからテレホーダイというサービスが登場しました。テレホーダイは23時から翌日の8時まで通話時間にかかわらず定額で使用することができるサービスのため、夜間のインターネット利用が急増しました。テレホーダイの価格は月額1800円から使うことができ、携帯電話での電話料金が3分50円以上する当時としては破格の金額でした。

同じく1995年はJavaSctiptが誕生した年でもあり、当時はLiveScriptという名称でWebブラウザのNetscapeNavigatorの為に作成されました。ですが、JavaScriptはブラウザ上でコンテンツを動かすことができる反面、セキュリティ面での不安が高まりWebブラウザのJavaScript機能をオフにする人も多くいました。

 

2000年 インターネットの普及

2000年以降では急速にインターネットが普及していきます。

1999年頃はインターネット利用率が約20％だったのが2003年では約60%の3倍になり、さらに年々増加し2009年では1999年頃の4倍の約80％まで普及しました。2000年頃は、さまざまな事業者間での競争と定額料金制サービスの登場によりインターネット利用料金がさらに安価になりました。当時の具体的なインターネットの定額利用料金の相場は、2000年で月5000円程度だったのが、翌年の2001年では2000円前後の半額以下になりました。

インターネットを使用したサービスの内容も、写真や動画などの容量の大きなコンテンツを用いたサービスが登場し、リアルタイムでの通信ができるサービスが開始されていきます。

この頃、動作が軽くアニメーションや動きのあるコンテンツを作成できるFlashが人気になり、JavaScriptはあまり利用されない風潮にありました。
ですが、2005年にJavaScriptの技術であるAjaxを用いてGoogleMapがリリースされ、JavaScriptが注目され人気を取り戻すことができました。さらにjQueryなどのライブラリが普及し始め、JavaScriptに勢いがついていきました。

現在人気があるSNSが生まれ始めたのもこの頃で、2004年にFacebookやmixi、2005年にYouTube、2006年にTwitterが誕生しています。

2010年~現代

 

2010年頃から、スマートフォンなどモバイル端末でのインターネットの利用率がパソコンを上回り、Facabook、Twitter、InstagramなどのSNSや、パズル＆ドラゴンズを初めとしたスマートフォンでのオンラインゲームが流行しました。
さらに2010年にはInstagram、2011年にLINEがリリースされ、その後他にもメルカリやPayPayなどのさまざまなサービスが開発されてきました。

その頃JavaScirptは、2010年頃からNode.jsの人気が高まり、JavaScriptがサーバーサイドの開発でも用いられるようになりました。

近年では、コロナ渦によりZoomをはじめとするWeb会議システムが普及し、インターネットが人々の生活に不可欠な社会インフラとして利用されるようになりました。

ここまでインターネットの歴史について、寄り道してみました！WebアプリケーションはWWWやJavaScriptなどの技術とともに進化してきたことが分かりましたね！

これまでのインターネットの成り立ちを少し学んでみたので、ここからは少し具体的な技術を交えながらWebアプリケーションの仕組みについて学んでいきましょう！

Webアプリケーションの仕組み

一般的なWebアプリケーション

ここでは、Webアプリケーションの仕組みを学んでいきます。
基本的なWebアプリケーションの仕組みと、Node.jsを用いた場合どのような違いがあるのかを見ていきましょう！

Webアプリケーションの基礎は、前述しました「WWW」という技術でした。
WWWの仕組みを理解するためには、クライアントとサーバーという2つを覚えておく必要があります。

単語が難しいように聞こえてしまいますが、クライアントは私たちが持っているPCやスマートフォンなどで、サーバーはデータの保管やWebアプリケーションを動作させているコンピュータのことです。

サーバーとクライアントのイメージを、検索サイトを用いた例で説明したいと思います！

①検索の要求 : まずクライアントのブラウザ上に表示されている検索欄に検索したいキーワードを入力して、検索ボタンを押すとサーバーに対して検索の要求を行います。

②検索結果を返答： サーバーは検索の要求を受け、検索処理を行いクライアントに対して検索結果を返答します。

③表示画面が更新される : クライアントはサーバーから結果を受け取り、表示画面を更新し検索結果を表示します。

このような流れで、クライアントとサーバーは動作しています。
普段Webアプリケーションを使用していると、手元のスマートフォンやPCのWebブラウザで処理が行われているように見えますよね。
ですが、実際にはWebブラウザからサーバーに対して要求を行い、サーバーが処理を行った結果をWebブラウザが受け取って表示しているのですね！

さらに、基本的なWebアプリケーションの具体的な技術としてはこのようになっています。

クライアントのWebブラウザ内では、HTMLやCSS、JavaScript等の技術を用いてサーバーに対して要求を行ったり、サーバーからの応答を表示するなどといった処理が行われています。

サーバーの内部にはさらに３つの役割があり、

  • クライアントからの要求を処理するWebサーバー
  • アプリケーションを動作させるアプリケーションサーバー
  • アプリケーションのデータを保管するデータベースサーバー

が動作しています。

ここまでWebアプリケーションの基本的な仕組みを学んでみました！
なんとなくでもイメージを掴んでいただけたでしょうか？
では今回の本題である、Node.jsを用いた場合どのような仕組みになるのでしょうか？

ここからはNode.jsを用いたWebアプリケーションの仕組みを見ていきましょう！

 

Node.jsを用いたWebアプリケーション

ここではNode.jsを用いたWebアプリケーションの仕組みを見ていきます！

Node.jsを用いると、サーバーはNode.jsとデータベースサーバーのみで動作することができます。

基本的なWebアプリケーションのサーバーで必要だった、

  • アプリケーションサーバー
  • Webサーバー

の２つの役割をNode.jsだけで開発してしまうことができるのです！

では一般的なWebアプリケーションと、Node.jsを用いて開発を行った場合の実際に用いられている開発言語や技術にはどんな違いがあるのでしょうか？？

一般的な場合とNode.jsを用いて開発した場合の比較

では一般的なWebアプリケーションと、Node.jsの場合の使用されている技術を比較してみてみましょう！

Webアプリケーションに用いられている技術をまとめてみるとこのようになります！
一般的な場合を見てみると、様々なプログラミング言語や技術が用いられていて複雑に感じますね・・・
１から勉強しようと思ったら挫折してしまいそうです・・・

一方Node.jsの方を見てみると・・・あれ？？

なんとほぼJavaScriptだけで開発できてしまいます！！

Node.jsを用いるとJavaScriptだけでクライアントもサーバーも開発が行えるので、初心者でも複数の言語を勉強する必要がなく勉強量を少なく開発が行えますね！！

私が学んでみた感想としても、Node.jsを用いて開発をすると複数の言語や技術を学んだり使い分けたりせずに開発ができるので、経験の浅い私でも少ない勉強時間で効率よくWebアプリケーションを作ってみることができました！

Node.jsって素晴らしいですね！！！
私もこれからNode.jsでバリバリ開発ができるように精進してきたいと思います！！！

まとめ & 次回予告

今回の【超入門】新入社員と学ぶNode.js！【前編】では、Node.jsやJavaScript、Webアプリケーションの基礎的な部分について学んできました！

Webアプリケーションと用いられている技術がどのようなものか、拙い説明だったかと思いますがお伝えできたでしょうか?

次回の【超入門】新入社員と学ぶNode.js！【後編】では、より具体的なNode.jsのメリットや、より効率よく開発を行うために用いられている技術について学んでいきたいと思います！次回の後編もぜひご覧いただければ嬉しいです！

この記事が少しでも皆様のお役に立てれば幸いです。

最後までお付き合い頂きありがとうございました！

 

 


原稿執筆
株式会社SRA東北　髙坂


原稿監修
株式会社SRA東北　我妻裕太

 

お問い合わせ

SRA東北では、今回ご紹介したようなWebアプリケーションだけでなく、AIを用いた開発、学習データの作成なども行っております！

ご興味を持っていただいた方はぜひ下記のフォームよりお気軽にお問い合わせください。

今回の記事に対する、ご質問やご感想も是非お待ちしております！

お電話でのお問い合わせはこちらからお願いいたします。
受付時間：営業日　月曜日～金曜日　9：00～17：30

 

 

 

 

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る