PythonしかできないけどFlask使ってWebアプリを作りたい人へ


対象

  • Webアプリ作ったことない人
  • pythonしかできない人

など

Flaskの入門記事は数多くあれど、それ以前に何をやればいいのかが分からないと言った人向けです。

前置き

python覚えたしWebアプリを作ってみたい、なんて思うこともあるかと思います。
私自身もそうで、チュートリアルサイトや記事を色々読んではみたものの、
動くものは作れるけど、よく分からないままコードを書いている状態になっていました。

そこでWebアプリをきちんと作れるようになるまでの学習方法を書いておきたいと思います。

結論

をやってみましょう!
ということだけです。
Flask全然関係ないじゃんって感じですよね。
しかし、これらをやることがWebアプリの基本を学べて、
FlaskでWebアプリを作れるようになる良い方法であると思っています。

もう少し詳しく解説していきます。

Progateとは

Progateにある通り
イラスト中心のスライドを見ながら、実際にコードを書いて学習できるサービスです。
メリットは
- 自分のペースで進められる
- 音を出さない環境でも学習可能
- 実際にコードをかいて動かせる
- 環境を整えなくてもWeb上で全てできる

といったことが挙げられます。
無料でできる部分もあるので、触ったことない方がいたら、見てみることをオススメします!

また、課金するなら月額980円ですが、上で挙げたものをするだけなら
(おそらく)1ヶ月もかからないと思うので、終わったら有料会員を辞めれば980円だけですむので
1000円くらいなら……と考えられるのであればオススメです。

HTML&CSS

Webアプリを作るには必須です!
全く知らない方や、ほとんど使ったことない方はまずはこれから始めることをおすすめします。

Ruby

これはpythonでWebアプリを作る分には関係ないですが、次のRuby on Rails5をスムーズにこなすためにやっておいた方がいいかと思います。
でも必須ではないので、時間がなかったら飛ばしてみるのもありかもしれません。

ただpythonに似ている部分もあるので、割と取っ付きやすいかと思います。

Ruby on Rails5

大本命のレッスンです。
ルーティングやGET、POST、データベースなどWebアプリで必要になる知識がつまっています。
実際にRailsというフレームワークを使いSNSアプリを作っていくため、
できていく過程も面白いので継続して学習しやすいと思います。
このレッスンを終わらせることで、Flaskの入門記事やチュートリアルが非常に取っ付きやすくなると思います!
ぜひ最後までやってみてください!

その後について

Flaskを使う第一歩として
ウェブアプリケーションフレームワーク Flask を使ってみる
こちらの記事がおすすめです。素晴らしい記事です!

またFlaskにおいてhtmlで変数を使うにはJinja2というテンプレートエンジンを使用するため
Jinja2の使い方がわかるとFlaskを用いた開発がよりスマートになる
こちらの記事を参考にしてみてください。分かりやすくまとまっています。
また、やりたいこと+Jinja2をキーワードを含めてググるなどをするといいかと思われます。

またWebページを動的に変えたい場合は
ProgateのJavaScriptレッスン
を学習してみることをおすすめします。
しかし、このレッスンはほとんど文法的なことがメインなため
やりたいことをその都度、検索してみるといいかもしれません。

もしくはVue.jsというフレームワークが簡単で色々できるため
動かして学ぶ!Vue.js開発入門
という書籍を読むのもいいかと。

実際にどう使うのかを交えながら解説しているため、
アイデアが浮かぶかもしれません。

またデータベースを扱いたいと言った場合は
Pythonでsqlite
こちらの記事などが分かりやすかったです。

後はHTML&CSSのデザインで
HTML5 & CSS3 デザインレシピ集
などの書籍を見たり、色々と検索してみることもオススメします。

またフラットデザインというデザインスタイル
いまさら聞けないフラットデザインの真実。Webデザインは、デザインとエンジニアがコラボして進化する。
など読んでみたり、

デザインの色のサンプルが投稿されている
ColorHunt
などを覗いてみるのもいいかもしれませんね。

何を作ったらいいのか分からない方へ

Webアプリを作って見たいけど、何を作っていいのか分からないという方は
Ruby on Rails5のレッスンで作ったSNS風アプリをFlaskとpythonで実装してみてください。

そこに独自機能を加えて見たり、カスタマイズしていくことで更に楽しく開発できるはずです!
(私はHTML5のCanvas機能を使ってお絵描き投稿SNS風を作って見ました)

そして、見よう見真似で作っていくうちにアイデアが浮んだり、
こんなものが作りたいと思うかもしれません。

実際に動かしながらつくることは非常に大事なので、
ぜひチャレンジしてみてください!

終わりに

ここまで読んでくださってありがとうございます!
肩透かしでしょうもない記事かもしれませんが、
誰かのお役に立てれば幸いです。

(間違っていたり、もっといい方法や書き方があれば教えてください!)