JavaScriptとデータベースの操作を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptとデータベースの操作について現役エンジニアが解説しています。サーバーサイドとして動作するNode.jsをインストールすると、JavaScriptでデータベースを操作することが出来ます。今回はMySQLを使ってJavaScriptでデータベースに接続して操作してみます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
この記事を書いた人
テックアカデミーマガジン編集部
Webサイトを作っていると、様々な情報を保存したい場合がありますよね。
ニックネームや文章、写真などを保存して表示すれば、様々な機能を実現できます。
例えばコメントや投稿をして表示すれば、SNSのようなWebサイトを作ることができるでしょう。
本記事では、JavaScriptを使ってサーバにデータを保存する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、あわせてご覧ください。
目次
- JavaScriptでデータを保存する方法
- ローカルストレージ
- データベースサーバとバックエンド
- 「NodeJS」バックエンドJavaScript
- 「BaaS」 バックエンド as a サービス
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、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、問い合わせフォームなど、「アップロード」はできないのです。
アップロードの仕組みを作るには、サーバにデータを保存する必要があります。
データベースサーバとバックエンド
データを保存するサーバで、まず思い浮かべるのが、データベースサーバです。
Oracle、MySQL、SQLiteなど様々な種類のデータベースサーバがあります。
旧来から、様々なWebサービスのバックエンドでデータを保存するために使われています。
ですが一般的なJavaScript、Webブラウザで動作する「フロントエンド」では、データベースサーバに接続できません。
Webブラウザは「http」や「https」という方式で、Webサーバとの接続だけできます。
データベースサーバと接続するための方式は、セキュリティ上許されていないのです。
データベースサーバと接続できるのは「バックエンド」のみ。
つまりPerlやPHPやRubyやJavaやPythonなど、サーバで動くプログラムだけです。
そのため、旧来は「サーバ/クライアント構成」という仕組みを作るのが一般的でした。
サーバにPHPなどでプログラムをし、HTTPを使ってデータを受け取ります。
そして、そのデータをデータベースサーバに保存するのです。
すると、表示するHTMLを作るときに、データベースに保存した情報を使えますね。
誰かが投稿した文章や写真を使ってHTMLを作れば、掲示板やSNSになるでしょう。
つまり、データベースサーバにデータを保存するには、3つの言語を使う必要があったのです。
JavaScriptなどのクライアント言語、PHPなどのサーバ言語、MySQLなどのデータベース言語。
少しレベルが高いですね。
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
「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サービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)