Web アプリ開発を効率よく学ぶには
こんにちは、おかきょーです。今回は、今からWeb アプリを始めたいと考えている学生へ向けて、個人的に効率よくWeb アプリ開発を学ぶ方法について書いて行きたいと考えてこの記事を書きました。
Web アプリの現状
現在、多くの企業がプログラミングエンジニアを募集していますが、その理由のひとつにWeb 技術の多様化にあると思います。これまではサーバーサイドの言語はJava, PHP, フロントエンドはHTML, CSS といったもので十分でした。
しかし、JQuery を通してWeb アプリを動的化したり、スマートフォンやタブレットなどのデバイスの多様化も挙げられます。そのため、Web アプリ開発者初心者は、「フロントエンド」、「バックエンド」に分けてアプリ開発を学ぶ方が効率的です。どちらを先に学ぶにしても、どのようにすればより効率的に学べるかについて書いて行きます。
フロントエンドから始める場合
フロントエンドの役割は、Web 画面の設計です。ボタンがクリックされたときの挙動や、画面遷移時のアニメーションの設計を行います。フロントエンドは主にHTML, CSS, JavaScript(以下JS) で構成されています。HTML, CSS はどちらもマークアップ言語と呼ばれ、プログラミング言語ではありません。
現在では、純粋なHTMLやCSSを書く機会は減り、フロントエンド・フレームワークを介して実装するようにはなりましたが、これらを実装するためにはHTML やCSS の最低限の知識が必要です。
アプリを構築するにあたって次のような点を注意してフロントエンド開発学びましょう。
HTML,CSS は最低限の使い方を理解しておけば問題ない
HTML,CSS には多くのタグが存在しますが、僕でさえもそれらを全て把握は全くしていません。
どのようにすればより最適なUIになるかどうか、どの文字のフォントが最適かどうかを考えるのはデザイナーであって、エンジニアの仕事ではありません。
エンジニアであれば、むしろアプリの処理手順を優先して考えて行きましょう。HTML やCSSで実装方法が分からないればその度に検索すれば問題ないです。
コンポーネントのデザインは、既存のフレームワークを使おう
先ほど言った通り、プログラマーはあくまでも、アプリの処理を実装することがメインになります。しかし、人にアプリを評価されるためにはUI がしっかりしていなければアプリの評価は得られません。
そこで役立てられるのは既存のUI が用意されているフレームワークです。それは、BootStrap やMaterialize といったものです。画面の幅に応じてデザインが変化するGrid コンポーネントやカード、カルーセルといった高度なデザインも初心者でも扱えるようになるのでどんどん使って行きましょう。
フロントエンドフレームワークを使って無料静的サイトで公開しよう
JQuery はこれまで多くのサイトで動的な動作を扱うために使われたフレームワークです。しかし、公式側が、そのサポートを終了するとのアナウンスもあり、JQuery のコードを書き換えてサイトが悪用される事件も発生しました。今後はこれらを使わずに、フロントエンドフレームワークを使いましょう。
現在、それらのフレームワークで有名なものは、Angular, Vue, React があります。Web初心者であればVue から始めた方がフロントエンドの概念を把握しやすいのでおすすめです。しかし、現在多くの企業ではReact を利用して開発が行われていますので、React から始めてもいいかもしれません。
これらのフレームワークは、GitHub Pages やNetlify、Firebase を通して無料で公開することができます。どんどん作って公開して行きましょう。
さらに、認証やCMS といった仕組みを実装するなら、LIFF(LINE Frontend Framework) や microCMS といった無料で利用できるサービスもありますので、これらも積極的に活用して行きましょう。
バックエンドから始める場合
バックエンドは、主にMySQL やRedis といった データベースの設計、API を通してそれらのデータをやり取りするための仕組みをつくることが主な役割です。プログラミング言語と呼ばれるほとんどの言語であれば構築が可能です。始めるにあたってのアドバイスとして、次のようなものが挙げられます。
その１： バックエンドは目的に応じて選ぶ
バックエンドはどの言語でも実装できますが、初心者であれば、現在使えるプログラミング言語を利用して実装して行きます。使用するフレームワークは,次のように考えていくといいかもしれません。
-
手早くアプリを公開したい
- Gin, Echo (Golang)
- Express (Node.js)
- Flask (Python)
-
使用するライブラリを考えずに開発できるもの
- Ruby on Rails (Ruby)
- Django(Python)
-
機械学習サービスを公開したい
- Python で使用できるフレームワーク
初心者であれば、Flask やExpress といった手早くアプリを公開することのできるフレームワークがおすすめです。
その２： まずは Bot 作りからはじめよう
初心者がバックエンドを始めるならボット(以下 Bot) 作りから始めましょう。Bot とは、ロボット(Robot)を語源とするものですが、おもに SNS からの指示や入力に応じて動作、自動化を行うものを言います。
現在、LINE やSlack 、Discord といったありとあらゆる SNSにはBot を構築するためのAPIが公開されています。これらのBot の開発の利点は次の通りです。
- 既存のサービスに沿って設計することができるので、Webデザインを考える必要が全くありません。
- すでに多くのひとがSNS を使用しているので多くの利用者が見込めます。
- Bot の構築を通じて、バックエンドの知識を身につけることができます。
その３： Heroku や Firebase で無料で公開する
SQL といったDBを 最大限利用するには Amazon Web Service(AWS) や Google App Engine (GAE) などの有料サーバーを借りて制作しないといけません。
現在、これらのバックエンドの仕組みをある程度利用できて無料で公開できるサービスは、herokuやFirebaseなど があります。これらを利用して公開しましょう。
最後に
以上が、初心者でもWeb アプリを制作する上で効率よく学ぶ方法を紹介しました。フロントエンド、あるいはバックエンドのどちらか一方を先に学び終えたら今度はもう片方を進めていったり、外部のAPIを利用してさらに複雑なアプリを構築したりして、より多くの作品を作って行きましょう。