こんちには！インストラクターの佐野です。

最近ではニュースや新聞でも、Webアプリ開発に関する話題が取り上げられるようになってきました。

僕（私）もWebアプリ開発やってみようかなあ...

と思っても、まったく知らない人からすると

• そもそもWebって何？
• 何から学習すればいいの？
• 開発って何をするの？

など、わからないことだらけですよね。

Webアプリ開発はものすごくハードルが高いものだと感じてしまいます。そこで、入門者がWebアプリ開発をゼロから作れるようになるために必要な知識と学習手順をご紹介します。

この記事を読むことによって、Webの基礎知識やWeb開発の手順を知ることができるので、Webアプリ開発に対する苦手意識をなくすことができるでしょう！

Webアプリの基礎知識

プログラミングで作れるものの全体像って？

そもそも、プログラミングではどんなモノが作れるのか、全体像をイメージしやすいように図を用意しました。上の図を見て、「こんなモノが作れるんだ」となんとなく理解していただければ大丈夫です。

「プログラミングでできること」とは？入門者に必要な基礎知識

更新日 : 2020年6月30日

そもそもWebアプリとは何か？

Webアプリとは、インターネット（ウェブ）などのネットワークから利用できるアプリケーションソフトウェアのことを指します。

Webアプリは、Webサーバー上で動作します。GoogleやYahooなど普段よく使っているWebブラウザでそのWebアプリを操作することができます。

例えば、ランチに出かけるときなど「食べログ」を使う機会があると思います。食べログはインターネット上でレストランの情報をまとめているWebアプリで、回線さえあればどこでも見ることができますよね。

このようにインターネット上で動作するアプリがWebアプリに分類されます。

ネイティブアプリとは？

ネイティブアプリとは、アプリ自体をスマートフォンやタブレットにインストールし、端末上のみで作動するアプリのことです。

現在スマートフォン向けアプリと言えば、ネイティブアプリのことを指すケースがほとんどで、iTunesStoreやGoogle Playからインストールして、スマートフォンやタブレット上で使用するアプリは全て、ネイティブアプリケーションに分類されます。

端末へインストールするので、写真アプリやゲームはオフラインでも動き（アプリによってはオフラインで利用できない）、動作が速いのも特徴の一つです。

また、デバイス自体が持つプッシュ通知や位置情報などを使った機能を簡単に実装できるのもネイティブアプリのメリットです。

ハイブリットアプリとは？

ハイブリッドアプリは、今までに紹介したWEBアプリとネイティブアプリの特徴を兼ね備えたアプリです。ブラウザでも端末にインストールしても使用することができます。

例えば、GmailやGoogle Mapsなどはインターネット上でもアプリとしても使用できますよね。食べログやAmazonもアプリとインターネット上どちらでも使用可能です。

最近では、そういったハイブリッドアプリの開発が一般的になっています。

そもそも「Webアプリ」とは何か？

更新日 : 2019年11月13日

Webアプリ開発の手順・おすすめ言語・スキルは？

Webアプリを開発するためのスキルセット

ステップを見る前に、どのようなスキルを学べばWebアプリ開発ができるのか全体像を見てみましょう。

全体像はつかめましたか？

これから①〜⑤までのステップを詳しくご紹介していきます。他にもまだまだスキルはありますが、今回はWebアプリ開発を行う上で抑えておきたい基本をご紹介します。

ステップ①：Webとは何かを知る

まず最初に、上のスキルセット①の土台となるWebについて学んでいきます。

ゼロから学ぶときは、前提や土台となっている一番大きいモノの概念や仕組みを理解することが大事です。それによって、あとで出てくる様々な用語も理解しやすくなります。

Webアプリ開発であれば『Web』が前提となっていているので、最初にWebについて学びましょう！

Webって何？

Webとは、インターネット上で情報を公開・閲覧するための仕組みのことです。公開・閲覧できる情報には、文字や画像、音声、動画などたくさんあります。

これらの情報は『リンク』というもので繋がっていて、リンクをクリックすることで次々と違う情報を閲覧することができます。

Webページで文章やテキストに下線が付いているものや、画像をクリックした時にページが切り替わったことはないでしょうか？それが『リンク』です。

実は、Webとは本来『蜘蛛の巣』の意味で使われるもので、ものすごい数のリンクによって様々な情報が繋がっている様子が、複雑な蜘蛛の巣のように見えることからこのように呼ばれています。

インターネットとどう違うの？

これは一番よくある質問です。この質問は、『電話回線網とFAXはどう違うの？』という質問によく似ています。電話回線網を応用したものが、電話でありFAXだということです。

同じように、Webはインターネットを応用したものです。

インターネットは『世界中のコンピューターをお互いに通信できるようにする技術』なので、Webはそのインターネットを応用して、『誰でも』『いつでも』『どこでも』情報を取得して閲覧できるようにしたり、情報を他の人に公開できるようにした仕組みなのです。

プログラミング入門者が絶対に知っておきたい基礎｜25の関連用語

更新日 : 2019年9月11日

ステップ②：Webに関する知識や技術を知る

次のステップとして、スキルセット②のWebアプリ開発で必須となる

• フロントエンド
• バックエンド
• データベース

の知識について学びます。

これがなくてはWebは成り立たない土台となる技術です。もちろんWebアプリ開発においても基本となる技術なので、知っておいた方がいいでしょう。

この段階ではよく理解できなくても大丈夫なので、土台となる技術は何なのかを知っておくことが大事です。

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

まずは、Webアプリケーションの簡単な仕組みから紹介します。Webアプリケーションの種類は大きく分ける

• フロントエンド
• バックエンド

この2種類に分類されます。

それぞれ開発に必要な言語も違います。なので、フロントエンドとバックエンドについて詳しく解説していきます。

フロントエンド

フロントエンドは「前側の」という意味のfrontという英語からもわかるように、工程の一番最初という意味のある言葉です。

WebサイトやWebサービスでユーザーが実際に使用する側の、たとえばインターネットブラウザでアクセスできるWebページの見た目のことを指します。実際にその画面で見える部分を作っているのは「HTML」や「CSS」といったコンピューター言語です。

これらの言語を駆使して作られるWebページ・Webサービスの見た目や、場合によってはそれを扱う業務のことを「フロントエンド」と呼びます。

フロントエンドエンジニアとは？ 仕事内容、スキル、年収について

更新日 : 2020年7月15日

バックエンド

フロントエンドとしばしば一緒に使われる言葉が「バックエンド」です。

こちらは前側という意味のフロントに対して「後ろ側」を意味する単語ですが、Web業界においては、ユーザーが操作することのない部分、たとえばサーバーやデータベースなどを指す言葉です。

また、そのサーバーやデータベースの設計や開発、運用などの業務も含めて「バックエンド」と呼称されます。Webサイトにおけるバックエンド業務はサーバーに触れる多いことから「サーバーサイド」等とも呼ばれることもあります。

フロントエンドとサーバーサイドの違い。仕事内容・年収・需要を比較

更新日 : 2020年7月28日

データベース

Wikipediaによると

データベース（英: database, DB）とは、検索や蓄積が容易にできるよう整理された情報の集まり。 通常はコンピュータによって実現されたものを指すが、紙の住所録などをデータベースと呼ぶ場合もある。 狭義には、データベース管理システム (Database Management System, DBMS) またはそれが扱う対象のことをいう。

引用元：Wikipedia

つまり、データベースを簡単に言うと「一定の形式で整理されたデータの集まり」のことです。厳密にいうと、一定の形式で、「複数で共有、利用すること」と「検索、加工すること」を目的に整理されたデータの集まりを指します。

いまさら聞けないデータベースとは？〜基礎の基礎を学ぼう〜

更新日 : 2020年8月18日

ステップ③：プログラミング言語を選定する

基本的な知識を身につけたら、次のステップはWeb開発で使うプログラミング言語を決めます。

プログラミング言語は200種類以上あるので、どう違うのか、何を選べばいいのかさっぱりわかりません。プログラミング言語の学習にはある程度の時間がかかるため、選ぶ言語を間違えると多くの時間が無駄になってしまいます。

ですから、どのような言語があるのか、それぞれの言語がどう違うのかをあらかじめ知ることからはじめるといいでしょう。

各プログラミング言語の特徴をつかむことによって、言語選びに迷う必要がなくスムーズに学習に入ることができます。

プログラミング言語の種類

プログラミング言語は「フロントエンド言語」と「サーバーサイド言語」の2種類に大きく別けることができます。

またプログラミング言語とは別に「マークアップ言語」「スタイルシート言語」があります。これらの言語も組み合わせてWebサイトやアプリは作られています。

プログラミング言語の違い

プログラミング言語には、Webアプリを開発をするための言語、スマホアプリを開発するための言語、データを解析するための言語など様々です。

Webアプリ開発を行うのであれば、Webアプリが開発できるプログラミング言語を選ばないといけません。

こちらの記事で各言語の違いを知って、間違ったプログラミング言語を選ばないようにしましょう！

初心者向けプログラミング言語おすすめランキング【2020年最新】

更新日 : 2020年11月16日

プログラミング言語の選び方

Webアプリ開発ができるプログラミング言語の中でも、作るモノによって向き不向きがあります。200種類以上もの言語があると聞くと、どの言語を学ぶべきか迷ってしまいますよね。

何を作りたいかによって、選ぶべきプログラミング言語は変わってくるので、言語選定はしっかり行いましょう。

こちらの「学習診断アプリ」を使えば、作りたいものや今後の働き方からあなたにぴったりなプログラミング言語や学習プランを知ることができます。

1分程度でサクッと診断は終わるので、気軽に使ってみてください。

ステップ④：Webフレームワークを学習する

プログラミング言語が決まったら、続いてスキルセット③のWebフレームワークを学習します。

実際にWebアプリを作るためには、プログラミング言語よりWebフレームワークの学習の方が重要になります。なぜならプログラミング言語を覚えただけでは、Webアプリを作ることはできないからです。

入門者からするとフレームワークはイメージが湧きづらいものですので、まずはフレームワークとは何かを知るところかはじめましょう！

フレームワークって何？

フレームワークってものすごくイメージが湧きづらいですよね。フレームワークとは、主にアプリ開発を効率良く行うための開発専用ツールのことを指します。

Webアプリの機能を0からコードを書くとものすごく大変です。通常、システムの基盤となる骨組みからプログラミングして作成しなければいけません。

しかしフレームワークならば、骨組みに機能を追加するだけでアプリやシステムが開発できるようになります。開発の手間を省くために、機能の元となる部品をある程度用意してくれていたり、簡単に実装できるようにしてくれたりしています。

フレームワークの比較

フレームワークは1つとは限りません。

その場合はどれを使うか決めないといけないのですが、英語の情報がほとんどだったり細かい違いが多くて、入門者からすると比較が難しいです。

こちらの記事で、Webプログラミング言語で利用されている有名なフレームワークを比較しているので、フレームワークの特徴や違いをつかんでおきましょう！

おすすめフレームワークを言語別に解説！Webアプリを開発しよう

更新日 : 2020年5月8日

ステップ⑤：Webアプリを開発する

フレームワークの学習が終わって、ある程度使い方がわかってきたら、いよいよ開発をはじめます。開発を行う際に必要なモノや、開発の注意点を知っておくとスムーズに開発をすすめていくことができます。

こちらの記事を参考にして、開発の流れや必要なものについて学び実際に開発をはじめてみましょう！

初心者がWebサービスを開発するために必要な3つのこと

更新日 : 2020年8月18日

Webアプリ開発を最短で叶える方法は？

Webアプリを開発する方法は、以下の通りとなっています。

• お金をかけず自力でやる
• お金をかけて自分でやる
• お金を払って個人にお願いする

一つずつ、詳しく解説していきますね。

お金をかけず自力でやる

まず、お金をかけず自力でWebアプリを開発する方法です。独学で無料学習サイトなどを利用してWebアプリ開発を学んでいきます。

独学でやる場合は、どのようなサイトで学習するかによって理解度が変わってきます。いきなり難しい学習サイトからやってしまうと、理解できずに挫折してしまう可能性があります。

独学でおすすめしたい学習サイトは、以下の2つになります。

• ドットインストール
• Progate

こちらの2つは、初心者にも理解がしやすい学習サイトになっていて、とても有名なサービスです。以下の記事に、2つのサービスを詳しく解説した記事があるので、参考に覗いてみてください。

Progateを活用すれば転職できる？特徴・魅力・学習手順全まとめ！

更新日 : 2020年6月11日

ドットインストールで挫折せず2ヶ月で未経験からエンジニアになった話

更新日 : 2020年5月11日

お金をかけて自分でやる

次に、お金をかけて自分でWebアプリを開発する方法をご紹介します。お金をかけて学ぶ方法はいくつかありますが、一番分かりやすいのがプログラミングスクールに通い、Webアプリを開発する方法です。

独学とは違い、講師の先生にサポートをしてもらいながら、自分でWebアプリ開発を行うことができます。サポートがあれば、自分だけのオリジナルWebアプリを開発することができ、転職や仕事獲得の時にも有利になります。

弊社でもオリジナルWebアプリ開発のサポートを行っています。気になる方はまず、無料体験レッスンで話を聞いてみましょう。

話を聞いた上で、自分の目的を達成するためにはどのような学び方がいいのかを決めましょう。

無料体験レッスンを予約する

お金を払って個人にお願いする

お金を払って、Webアプリ開発を依頼する方法もあります。

• 今すぐWebアプリが必要で開発したいけど、知識も時間もない

このような人におすすめの方法です。

まずは、周りの友達にWebアプリ開発ができる人がいないか探してみましょう。コミュニティーなどに参加すれば、そういったエンジニアの人と知り合う機会が増えるので、Webアプリ開発を依頼しやすくなります。

もっと手っ取り早くWebアプリ開発を依頼したい人は、クラウドソーシングを活用してエンジニアに依頼しましょう。クラウドソーシングで依頼する場合は、どのくらいの予算でどんなWebアプリを開発したいのかを予め決めておくと話がスムーズに進みます。

エンジニアに外注する時の注意点とおすすめしたいサービス厳選6つ

更新日 : 2019年11月1日

Webアプリ開発を独学でやれるのか？

結論から言うと、独学でもWebアプリを開発することはできます。ですがその分、時間はかかります。時間がかかればかかるほど、リスクが増えていってしまいます。

そのリスクというのが、挫折してしまう可能性があるということです。

独学で学習する298名の人に侍エンジニア塾では、アンケートを実施いたしました。その結果、独学での学習に挫折や行き詰まりを感じると答えた人は87.5％もいることがわかりました。

なので、大半の人は挫折してしまうという現実があります。挫折してしまう理由としは、

• エラーが解決できない
• モチベーションが保てない
• 不明点を聞けない

この3つが主な原因となっています。

できるだけ早くWebアプリ開発をしたいと思う人は、スクールに通い転職してしまうのが近道になります。一人で悩みながら学習するのではなく、本格的にスクールで学び、転職して実績を積んで行きましょう。

Webアプリ開発を独学で学ぶためのおすすめ書籍

最近では、Webアプリを開発するための本が多くあります。数多くの本の中から、どの本で学習をすればよいのか選べずに迷ってしまいますよね。

本は、初心者向けから上級者向けと、その人のレベルによって読むべき本が違います。これから入門するという人は、初心者にも理解しやすい本を選んで学習をする必要があります。

下記の記事で、「Webアプリ開発入門者」におすすめの本を紹介しています。本で学習を進めたいと思う人は参考に覗いてみてください。

WEBアプリの開発を学ぶ入門者におすすめしたい本厳選5選

更新日 : 2020年7月30日