【初心者向け】JavascriptでWebアプリ開発をする手順・どう学習するかを紹介!

この記事を見ているということはJavaScriptを学び始めて少し経ったか、これから学び始めて何かを作っていこうと考えているのではないだろうか。

ただ作るといっても何から始めればいいのか、どういったものを作ればいいのか分からないでしょう。そこでこの記事ではJavaScriptでWebアプリ開発をする上で何をすればいいのか?っていうのを書いていきたいと思う。

JavaScriptで作れるWebアプリ

そもそもですが、JavaScriptで作れるWebアプリってどんなものでしょう?一般的にイメージするのは画面だけで完結するアプリケーションだと思います。

例えば以下のようなWebアプリなら画面だけで完結させることができる。

画面だけで完結するWebアプリ
  • 電卓
  • カウントダウンタイマー
  • 通貨変換アプリ
  • キーボードアプリ

以下の記事でJavaScriptで作れるものを紹介しましたね。どんなものが作れるか気になる方は見てみてください。

どうですか、こういうのってイメージしているものですかね。それともイメージしているWebアプリではなかったでしょうか。やっぱりWebアプリっていうとTwitterやYoutubeのようなものをイメージするかな。

データを保存するならサーバーサイドが必要

大半のアプリケーションは入力したデータをデータベースに保存して、そのデータを引っ張ってそれを表示しています。例えばTwitterのようなアプリケーションでもツイートを送信すると、画面を閉じてもそのツイートを見ることができますよね。

データベースと連携してデータを保存したり取得したりするのはサーバーサイドの役割です。

HTML/CSS/JavaScriptで作った画面だけだとこういったことはできないので、こういったデータを扱うものはデータベースと連携するプログラムが必要になってくる。

大体アプリケーションっていうイメージのものはサーバーサイドでデータベースと連携しているはずです。じゃないとデータの保存場所がないですからね。

JavaScriptでもサーバーサイド開発は可能

JavaScriptは画面をいじるイメージだけど、node.jsを使えばサーバーサイドの処理を書いてデータベースにデータを保存するといったことが可能です。フレームワークを使えば、データベースとのデータ処理と画面表示をやってくれる機構が備わっている場合が多いので、簡単にやりたい時におすすめ

JavaScriptのフレームワーク
  • Express
  • Meteor
  • NestJs
  • AngularJS
  • ・・・

フレームワークの中でフロントエンドもサーバーサイドも実装することができる場合が多い。画面以外の部分も作るからもちろん大変だけど、データの保存をしないといけないアプリケーションならサーバーサイドとDBは必須。逆に画面だけで完結するのはさっき紹介した電卓やタイマーなどといったアプリケーションのイメージ

サーバーサイドも書いてデータベースも使うようにすれば入力したものを保存して表示したりといったアプリケーションを作ることができますね。

JavaScript開発をする際の事前準備

すでに開発環境は整っていると思うけど、もしまだ開発の準備ができていないなら整えておこう。

開発の準備
  • エディタ・・・VisualStudioCodeがおすすめ
  • ターミナル・・・iTerm2がおすすめ

最低限エディタとターミナルがあれば大丈夫。以下の記事であれば良さそうなアプリは紹介しているからよかったら見てみてください。

それとJavaScriptはブラウザを頻繁に使いますよね。開発者向けの拡張機能で便利なものがいくつかあるから、便利そうなのは入れておくといいです。CSSを手軽に見ることができたりキャッシュをクリアしてくれたりしてくれるプラグインなどがありますよ。

JavascriptでWebアプリ開発をする手順

JavaScriptでWebアプリを開発するということは画面があるものを作りたいはずですよね。画面にあるボタンをクリックして何かをしたり、文字を入力して何かをしたりとそういったことをJavaScriptを使ってやりたいんじゃないだろうか。

そういったものを作るには予想通り以下のことが必要になってくる。

Webアプリ開発に必要な知識
  1. HTML・CSS
  2. JavaScript

HTML・CSSで作成した画面にJavaScriptを使えば、ボタンをクリックした時やテキストを入力した時などに動きをつけることができる

さっき紹介した以下のようなものを作れますね。

画面だけで完結するWebアプリ
  • 電卓
  • カウントダウンタイマー
  • 通貨変換アプリ
  • キーボードアプリ

JavaScriptに限ったことじゃないけど、プログラミング学習には以下の記事で書いたので参考にしてみてください。スクールに通わずにやるならUdemyがおすすめです。

ちなみにReactとかVueといったライブラリを使って画面を作ることもできます。

フレームワークを学ぼう

Expressなどのフレームワークを使えばフレームワークの流れに沿って開発していくことができます。画面だけじゃなくて画面から入力したデータをデータベースに保存したり取得したりといったこともしやすい。

JavaScriptのフレームワーク
  • Express
  • Meteor
  • NestJs
  • AngularJS
  • ・・・

フレームワークはここにこういう処理書いてここに画面を構成するHTML書いてっていうのが大体決まっているからやりやすいです。

HTML・CSSを学ぶ

画面がないと画面があるアプリケーションを作ることはできないですよね。画面を作るのはHTML、そしてその画面を装飾するのはCSSです。

HTMLやCSSがよく分からない場合はProgateのHTML&CSSなどをやってみるといいでしょう。HTMLとCSSがどんなものであるか分かります。

HTMLとCSSについてより学びたいならUdemyから「html css」などで検索してみるといいでしょう。検索してみるといくつかヒットします。

Udemy

動画講座だから動画を見ながら自分で手を動かして学習していくことになります。講座を買う際にはどんな内容の講座なのかプレビューを見てから買うことをお勧めします。

JavaScriptを学ぶ

HTML・CSSの学習をしたらJavaScriptを学ぼう。JavaScriptで画面をいじる際にはHTML構造やCSSのセレクタを知っておかないと画面を操作するっていうことは難しいから、それらは最初に学んでおくのがおすすめです。

ProgateのJavaScriptレッスンだといくつかありますね。

Udemyでも「JavaScript」を検索してみるといろいろな講座が出てきます。

Udemy

JavaScriptといっても素のJavaScriptやjQuery、React、Vueなど様々なものがあるから自分の学びたいものがある講座を選んでみるといいです。それぞれの講座を買う前にどんな内容なのかは画面からある程度知ることができます。

サーバーサイドの処理を学ぶ・フレームワークを学ぶ

HTML・CSS・JavaScriptを学べば画面だけで完結するアプリケーションは作ることができます。だけどデータを保持してほしい場合はデータベースに保存するサーバーサイドの処理が必要になってくる。

そのためにサーバーサイドのプログラムを作らないといけないんだけど、画面とは別で作ると労力がかかるのでフレームワークを使って開発することをおすすめします。

ただその前に、サーバーサイドはNode.jsっていうやつを使うからそれを軽く学んでおくのがいいと思います。ProgateにもNode.jsのレッスンありますね。(もちろんNode.jsじゃなくてPythonやPHP、Rubyなんかでも良きです)

Progate

ちなみにこのレッスンではExpressを使った開発をしていきます。さらに学びたかったらこれもUdemyでnode.jsを検索してみるといくつか講座が出てきますね。

Udemy

Node.jsのことを少し学んでUdemyで講座を一つやって理解すれば、それを元に自分でWebアプリを作ることができると思います。最初から理解してやっていくのは大変だから何回か通してやってみるといいですよ。

JavaScriptでどんなWebアプリ開発をすればいいのか

HTMLもCSSもJavaScriptも学習してある程度できそうだなと思ったらWebアプリ開発に挑戦できるはずです。作りたいWebアプリがあるならそれを作ってみるのもいいでしょう。

もし作りたいものがパッと浮かばないなら初心者向けに何が作りやすいWebアプリなのか?を紹介するので参考にしてみてください。

TODOアプリ

TODOアプリはチュートリアルなんかでも検索してみるとあったりしますよね。何か入力するとそれをTODOとして追加できるというもの。

シンプルだけど作りこめば結構忙しいです。最初はTODOを追加できるようにして編集や削除機能も入れてみるといいです。

  • TODOの新規作成
  • TODOの編集
  • TODOの削除

作っていくと意外と苦戦する場面も出てくると思います。新規作成・編集・削除は他のアプリケーションでも良く使う機能だからやっておくといいですよ。

画面は自分の好きなようにデザインしてしまいましょう。

メモアプリ

メモアプリもTODOと同じような機能が必要になってきます。

  • メモの新規作成
  • メモの編集
  • メモの削除

もっと機能を追加したかったらタグをつけることができるようにしてみたり、メモの装飾機能を追加してみたりするといいです。凝ったものを作ろうとするとけっこうな勉強になると思います。

ただ新規作成・編集・削除機能を作ってみるだけでも最初はきついはずだからそこまでやってみるといいです。その際にはデータベースに入力したメモを保存して、見る際にはそれを取得するっていう処理をいれてみてください。

Instagramのような画像投稿アプリ

画像投稿アプリは画像の扱いがちょっと難しいけど、そこさえ突破すれば作ることができると思います。機能としては最低限以下の機能が欲しいですよね。

  • 投稿した画像の保存
  • 投稿した画像の削除

ちなみに画像の保存先はAWSのS3なんかを検討したりしてみるといいと思います。

プログラミングで分からないところを聞ける環境を作る

今回JavaScriptでWebアプリ開発を行うっていうことで記事を書いたけど、独学だと分からないところが何回も出てきて壁にぶち当たることも多いと思います。その時に質問できる人や環境があれば学習の進み方も違うはず。

普通周りに聞ける人はいないから、そういう環境は用意しようとしないと手に入りません。分からないところをすぐに解決できる環境が欲しい人は検討しよう。

プログラミングスクール

プログラミングスクールはやっぱり効率を求めるならいいと思います。自分も通ったことがあるけど、分からないところはいろいろ聞いて学習を進めていました。ずっと1人で悩んでいる問題も聞けばすぐに解決できるっていうことは多いですからね。

プログラミングスクールはいろいろあるけど、以下の記事により安く受講できるサブスク型のプログラミングスクールを紹介しているから参考にしてみてください。

個別に教えてもらう

詳しい人から個別に教えてもらうっていう方法もあります、例えばココナラなら以下のような募集が結構ある

  • プログラミングの手助けをします
  • プログラミング講師として初学者をサポートします
  • あなたのプログラミングサポートします

料金もスクールに通うより安く済む場合が多いから、誰か教えてくれる人が安く欲しいっていう場合にココナラ見てみるといいです。