JavaScriptとデータベースの操作を現役エンジニアが解説【初心者向け】

Webサイトを作っていると、様々な情報を保存したい場合がありますよね。

ニックネームや文章、写真などを保存して表示すれば、様々な機能を実現できます。

例えばコメントや投稿をして表示すれば、SNSのようなWebサイトを作ることができるでしょう。

本記事では、JavaScriptを使ってサーバにデータを保存する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、あわせてご覧ください。

目次

• JavaScriptでデータを保存する方法
• ローカルストレージ
• データベースサーバとバックエンド
• 「NodeJS」バックエンドJavaScript
• 「BaaS」 バックエンド as a サービス
• まとめ
• JavaScriptを学習中の方へ

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

 

 

JavaScriptでデータを保存する方法

プログラミング言語JavaScriptでデータを保存する方法はいくつかあります。

代表的な手法を3つ、それぞれの特徴をまとめました。

 

手法	用途例	データ保存先	注意点
ローカルストレージ	ユーザー入力履歴	Webブラウザ	保存先がサーバではない
データベース	掲示板・SNS・ログイン	データベースサーバ	サーバサイドJavaScript
BaaS クラウド	掲示板・SNS・ログイン	クラウドサーバ	クラウドサービスを利用

 

それでは詳しく見ていきましょう。

 

ローカルストレージ

JavaScriptでデータを保存する一番簡単な方法がローカルストレージです。

setItemでデータを保存し、getItemでデータを取り出します。

 

localStorage.setItem("username", myData.name);
const value = localStorage.getItem("username");

 

See the Pen
Local Storage JS by TAKAYOSHI (@lspuwbkv)
on CodePen.

詳しい使い方は、こちらの記事やこちらの記事でも解説していますので、ぜひご覧ください。

ローカルストレージでは、データが保存されるのはブラウザ内で、サーバではありません。

例えばユーザーが入力した名前などを保存しておくことができます。

 

しかし、他のユーザーに保存した情報を公開することはできません。

掲示板やSNS、問い合わせフォームなど、「アップロード」はできないのです。

アップロードの仕組みを作るには、サーバにデータを保存する必要があります。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

データベースサーバとバックエンド

データを保存するサーバで、まず思い浮かべるのが、データベースサーバです。

Oracle、MySQL、SQLiteなど様々な種類のデータベースサーバがあります。

旧来から、様々なWebサービスのバックエンドでデータを保存するために使われています。

 

ですが一般的なJavaScript、Webブラウザで動作する「フロントエンド」では、データベースサーバに接続できません。

Webブラウザは「http」や「https」という方式で、Webサーバとの接続だけできます。

データベースサーバと接続するための方式は、セキュリティ上許されていないのです。

 

データベースサーバと接続できるのは「バックエンド」のみ。

つまりPerlやPHPやRubyやJavaやPythonなど、サーバで動くプログラムだけです。

そのため、旧来は「サーバ/クライアント構成」という仕組みを作るのが一般的でした。

 

サーバにPHPなどでプログラムをし、HTTPを使ってデータを受け取ります。

そして、そのデータをデータベースサーバに保存するのです。

すると、表示するHTMLを作るときに、データベースに保存した情報を使えますね。

誰かが投稿した文章や写真を使ってHTMLを作れば、掲示板やSNSになるでしょう。

 

つまり、データベースサーバにデータを保存するには、3つの言語を使う必要があったのです。

JavaScriptなどのクライアント言語、PHPなどのサーバ言語、MySQLなどのデータベース言語。

少しレベルが高いですね。

 

「NodeJS」バックエンドJavaScript

そんな中、2009年にNodeJSが登場し、JavaScript技術が大きく発展します。

NodeJSを使うと、JavaScriptでバックエンドを作ることができます。

つまり、JavaScriptでデータベースサーバに接続できるのです。

 

JavaScriptは、Webブラウザ上で動作するプログラミング言語として生まれました。

そのため、できることはブラウザに許可されていることに制限されてしまいます。

そこで登場したのがNodeJSです。

 

NodeJSとは、JavaScriptをブラウザの外で動かすための実行環境です。

WindowsやMac、LinuxなどのOSにインストールして使います。

文法はJavaScriptですが、従来のブラウザ上で動くJavaScriptとは全く違う概念です。

 

そこで、NodeJSをサーバにインストールし、バックエンドを作るために使われます。

バックエンド/フロントエンドの境目なくプログラミングできます。

また、必要な言語も1つ減り、少し敷居が低くなりました。

 

「BaaS」 バックエンド as a サービス

しかしながら、サーバにデータを保存するためにはバックエンドを作る必要があります。

NodeJSやデータベースのを用意したり、まだまだ気軽ではありません。

 

フロントエンドで簡単にサーバにデータを保存したい、そんな悩みを解決するのが、「BaaS」バースという種類のクラウドサービスです。

 

クラウドとは「インターネット越しに」「設定運用の手間なく」「後払い従量課金で」サービス化することです。

何をクラウド化したものかを、 aaS （as a Service）という言葉で表しています。

ソフトウェアのクラウドがSaaS (Software as a Service)、プラットフォームのクラウドがPaaS（Platform as a Service）です。

 

そして、バックエンドをクラウド化したものがBaaS（Backend as a Service）です。

データ保存やログイン、プッシュ通知といったバックエンド特有の機能を提供するクラウドサービスです。

クラウドなので「インターネット越しに」「設定運用の手間なく」「後払い従量課金で」使えるのです。

 

Amazon AWSや Google Firebase、Microsoft Azureなど様々なクラウド事業者のBaaSがあります。

ユーザー登録してログインすれば、JavaScriptからAPIを使って簡単に使えます。

豊富なマニュアルやサンプル、安価な料金や無料利用枠も魅力ですね。

 

まとめ

いかがだったでしょうか。

JavaScriptからデータを保存する3つの方法をご紹介しました。

作りたいものやレベルにあった、一番良い方法を選んでみてください。

データの保存ができると、高度なWebサービスを作ることができますね。

ぜひチャレンジしてみてください！

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！