PythonでWebアプリ開発

PythonでWebアプリを開発したい人が何を学べばよいか初心者向けに解説してみた

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

こんにちは、DAIです。

PythonでWebアプリを作ってみたい方も多いと思います。しかし、「そもそもWebアプリって何?」ということがわからなかったり、「どうしたらアプリって作れるの?」ってレベルでよくわからない方もいらっしゃると思います。こういう「何を学べばちゃんとWeb上にアプリケーションをアップロード(ディプロイ)できるか」という情報は、ネット上で探すのは難しいですね。

そこで今回は、PythonでWebアプリ開発を行う上での学習ルートと、おすすめの学習教材についてまとめてみたいと思います。

そもそもWebアプリとは?

Webアプリとはそもそもなんでしょうか。Wikipediaによると、以下のように解説されています。

ウェブアプリケーション(Web application)は、インターネット(もしくはイントラネット)などのネットワークを介して使用するアプリケーションソフトウェアである。多くの場合、これらのアプリケーションは、Webブラウザ上で動作するプログラミング言語(たとえばJavaScript)によるプログラムとWebサーバ側のプログラムが協調することによって動作し、ユーザはそれをWebブラウザ上で使用する。

これだけだと、よくわかりません。そこで、簡単にWebアプリの構造を見てみたいと思います。

Webアプリの見た目を表す「フロントエンド」とは

フロントエンドとは、ユーザーから見たときのWebページの見た目の部分を指します。

フロントエンド(front-end)とは、ユーザーと直接データのやり取りを行う要素のことで、Web制作ではWebブラウザ側(クライアント側)を指します。

https://www.internetacademy.jp/it/programming/javascript.html

フロントエンドの部分を学ぶだけで、企業のホームページのようなものを作ることができるようになります。

フロントエンドの部分は、

  • HTML
  • CSS
  • JavaScript

という言語によって書かれています。

順におって説明してみましょう。

 

Webアプリの文字を記述するHTMLとは

HTMLとは、Webページの文章や、リンクなどを設定する言語となります。たとえば、僕がこのページに「Googleへアクセス」というリンクを張る場合、HTMLで書くとこのようになります。

<a href="https://www.google.com">Googleへアクセス</a>

ほかにもただの文章を書く場合は、このようになります。

<p>たたの文章を書く場合は、このようにpタグで書こうとHTML上で書くことができます</p>

つまり、HTMLとは簡単にいうと、Webページの内容を直接記入する言語なのです。

例えば、グーグルのホームページにアクセスして、右クリック→要素の検証 をクリックすると、実際にGoogleのページがHTMLで記述されていることがわかります。

HTMLの配置や色を決定するCSSとは

CSSは、HTMLを装飾する言語です。例えば、さきほどHTMLで以下のような文を作成しました。

<p>たたの文章を書く場合は、このようにpタグで書こうとHTML上で書くことができます</p>

この文章を、赤色に変えたいという場合は、CSSで書くとこのようになります。

p {color:red;}

また、背景色を黒にしたい場合は、CSSで書くとこのようになります。

p {color:red; background-color:black}

このように、CSSはHTMLを修飾する言語になるわけですね。

Webアプリの見た目に動きを付けるJavaScriptとは

JavaScriptは、HTMLやCSSに動きを付ける言語となります(※本当はもっといろいろなことができます)

たとえば、先ほど書いた分をクリックしたときに、その文書を赤色にするみたいなこともすることができます。

また、JavaScriptのフレームワークである、jQueryを利用すると、JavaScriptで普段書くようなまとまったことを簡単に書くことができます。

Webアプリの裏側のロジックを動かすバックエンドとは

バックエンドとは、フロントエンドから送られてきた情報をもとに、データベースやAPIなどの情報と連携して、フロントエンドに情報を返す部分を指します。
ユーザーから見えない後ろの部分だから、バックエンドです。ちなみに、サーバーサイドとも呼ばれます。今回紹介しているPythonも、このサーバーサイド言語のひとつとなります。

例えば、フロントエンドのHTMLで書かれた、Webアプリでログインをするフォームを見たことがあると思います。

フロントエンドで作られたHTMLのページから、こんな感じのフォームを入力したとしましょう。

送信をクリックすると、サーバーサイドではフロントエンドのUIの部分から、名前やパスワードをPythonで受け取ります。そしてバックエンドであるPythonでアルゴリズムをもちいて、そのデータをどうするのか決定します。よくあるログインの認証の部分であれば、その名前とパスワードをデータベースに送って、その名前がすでにあるかどうかチェックするわけです。それであるようであれば、データを返し、ログインを許可するわけですね。

Webアプリの裏側、バックエンド(サーバーサイド)の言語とは

それでは、バックエンドの言語とは何かを見ていきましょう。

Ruby, PHP

今回は特にPythonについて説明したいので、ほかの言語については一気に説明します。

RubyPHPも、サーバーサイドの言語です。どちらもログインしたときの処理などを書いたりすることができます。

また、ログインするときの処理をゼロから書こうとするとかなり時間がかかります。そういう場合は、各言語でフレームワークを利用することになります。

たとえば、RubyであればRuby on RailsPHPであればLaravelなどの言語もおすすめなどがあります。

基本的に、Webアプリケーションを開発する場合は、どの言語でもWebフレームワークを利用して開発することになります。

Python

さて、Pythonも同様にサーバーサイドの言語です。フレームワークとして有名なのは、DjangoFlaskです。

Django

DjangoはInstagramも利用している、ウェブフレームワークとなります。Djangoについてはこちらのスライドショーが非常に詳しいので参考になりそうです。

 

Flask

FlaskもPythonのWebフレームワークです。こちらもスライドを見るとわかりやすいと思います。

 

各サーバーサイドの言語と、それぞれのフレームワークを比較するとこうなります。

言語 フレームワーク
Python Django, Flask
Ruby Ruby on Rails
PHP Laravel

なぜPythonでWebアプリを開発するべきなのか?

さてさて、各言語ごとに見た目の部分のフロントエンドと、内部のロジックのバックエンドがあることがわかりました。そして、どの言語でもWebアプリを作れることがわかりました。
さて、その場合はなぜPythonでWebアプリを作るべきなのでしょうか。

一つは、Pythonは、いま機械学習やブロックチェーン等の最先端技術のライブラリの開発が進んでいるので、Pythonでは存在する便利なライブラリを使ってWebアプリを作れるのが、PythonでWebアプリを作る一つの理由になるかと思います。例えば、ディープラーニングを利用したWebアプリケーションを作ってみたい!という場合、PHPやRubyなどのコードを利用するのは少し難しいです。しかし、Pythonを利用すればそのような心配は一切ありません。

もう一つは、Pythonが初学者にも非常に書きやすいコードだからです。ほかのJavaやC#などと比べると、型を意識しなくてもサクッと書きやすいので、初学者が挫折しないでアプリを作るには非常に適したプログラミング言語であるといえます。

PythonでWebアプリケーションを作るためのおすすめの学習ルート

さてさて、長くなりましたが、ここまででWebアプリがどんな技術で創られているのかを学べたかと思います。

PythonでWebアプリを作るための学習ルートをまとめてみようかと思います。

言語 どこで学ぶか
HTML Progate , ドットインストール
CSS Progate, ドットインストール
JavaScript Progate, ドットインストール
Python Progate/Aidemy
Python > Flask Udemy / Aidemy Premium

HTML & CSS

まず、HTML、CSSに関しては間違いなくProgateで学ぶとよいと思います。Progateは初心者に圧倒的に優しいサイトです。

ProgateのHTML & CSSのコースで、

  • HTML & CSS 初級編
  • HTML & CSS 中級編
  • HTML & CSS 上級編
  • 道場コース X 2

は必ずクリアしておきましょう!

 >Progateで学ぶ

もしProgateでも物足りない場合は、ドットインストールもよいと思いますが、まずは自分の頭で書いて覚えることが大事です。Progate一つで十分かと思いますが、動画のほうが合う!という場合はドットインストールでもよいと思います。

> ドットインストールで学ぶ

JavaScript

JavaScriptに関しても同様にProgate一択でよいと思います。

ProgateのES6版を学べば、一通り学習できるはずです。

> ProgateでJavaScriptを学ぶ

Python

Pythonの基礎に関してはも同様にProgateで学習するのがよいと思います。

Progateの以下のすべてのPythonコースをクリアしておくと、Pythonの基礎がわかるかと思います。

  • Python 1
  • Python 2
  • Python 3
  • Python 4
  • Python 5

また、Webアプリを作るうえでどうしてもクラスなどの概念がわかっておく必要があるので、その場合はAidemyを利用して、学習するのがよいでしょう。

> AidemyでPythonの応用を学ぶ

また、AIを利用したWebアプリを作ってみたいという場合は、同じようにAidemyで学ぶことができます。例えば、機械学習の概論、教師あり学習、教師なし学習等を勉強することができるようになっています。

Python > Flask

Flaskを学ぶには、Flaskの公式が出している、Flaskチュートリアルを利用してみるのがよいと思います。

http://study-flask.readthedocs.io/ja/latest/02.html

他にも、無料で学べるものであれば、英語にはなりますが、Flaskを利用したチュートリアルがYoutubeにあります。これをまねながら、アプリ開発の流れを進めていくのもよいともいます。

日本語のものがよければ、Udemyのコースがよいかと思います。Flaskを利用したWebアプリケーション開発で、実際にAIを利用した機械学習アプリが創れるものになっています。値段もお手軽なので、ぜひお試しください!

> 【画像判定AI自作にチャレンジ!】TensorFlow・Keras・Python・Flaskで作る機械学習アプリ開発入門

最後に

最後にPythonでWebアプリを作るときの学習内容のまとめです。以下の言語を、ProgateやAidemy, Udemyなどで勉強するのがよいかとおもいます。

言語 内容 どこで学ぶか
HTML Progate , ドットインストール
CSS Progate, ドットインストール
JavaScript Progate, ドットインストール
Python Progate/Aidemy
Python > Flask Udemy / Aidemy Premium

 

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

就職で市場価値の高いエンジニアになりたい大学生の君へ!

就職で市場価値に高いエンジニアになりたい大学生が、何から学んでいけばいいのか6つの学習ステップに分けて解説してみました。

学習方法を見てみる!

人気の記事

コメント

  1. 188bet より:

    Hey! Quick question that’s completely off topic. Do you know how to make
    your site mobile friendly? My site looks weird when viewing from my iphone 4.

    I’m trying to find a theme or plugin that
    might be able to correct this issue. If you have any suggestions, please share.
    Thanks! http://www.mbet88vn.com

  2. 匿名 より:

    バッグエンド -> バックエンド

コメントを残す