目的
どのように自作のウェブアプリを小さく作って、順に大きく最終的にはCloneアプリを作ってポートフォリオに
進化せていくべきかのアイディアです。
採択する技術が決まっている方は
直接本題にジャンプしても大丈夫です。
対象者
ウェブ アプリ入門の方向け
AI/人工知能およびブロックチェーンの話は今回しません。
技術
今回は特定の言語に限った話では無いのですが、入門の方は
下記の前提条件を参考にして選択していただければと思います。
言語
- 言語に拘らず学習目的(Javascriptは色んな活躍場面があるので学習して損はありません。)
⇨ Node.js
⇨ ⇨ Node.jsの学習方法、Java Scriptの学習方法 - 地方で入門の方
⇨ php
⇨ ⇨ PHPの学習方法 - 地方でphp学習済みの方
⇨ Java - 都内の方
⇨ Ruby、Go
⇨ ⇨ Ruby on Railsの学習方法 - フロントエンドの方
⇨ Node.js
⇨ ⇨ Node.jsの学習方法、Java Scriptの学習方法 - 機械学習・人工知能に興味がある方
⇨ Python
入門にはnode.jsかphp。都内ならばrubyをオススメしてます。
未だこの1 〜 2年のAI・人工知能バブルでpythonでのウェブアプリの情報が
増えだしていますが、まだ充分では無い時期なので入門時には
避けたほうが良いと考えています。
Goも将来有望ですが、まだ充分では無い時期と考えています。
DB
- MySQL
一番情報が多いので最初に手を付けるにはベストでしょう - Postgresql
Herokuで公開する前提だとこちらの方が都合いいですね - MongoDB
上記２つはRDBですが、こちらはドキュメント型のNOSQLです。
最近は情報量が多くドキュメント型は初心者に扱い易いと思います。
入門にはMySqlをオススメしてます。
上記の技術をカテゴライズしニッチな技術を含めて以前下記にUdemyでのオススメコースを紹介しましたので
ぜひ参考にしてください。
iOSやAI/人工知能およびブロックチェーンのオススメコースも紹介しています。
【保存版】Udemy 350コース突破記念 講師に全力 リスペクト企画 オススメ コース紹介【入門者向け】
環境
環境構築は出来るだけ時間をかけずに、コーディングする時間を多く取れるようにしましょう。
特にDB連動するCRUD ウェブアプリケーションを作れるようになるまで、そこに集中しましょう。
環境構築の自動化とはその後です。
そういう意味ではwinでもmacでも同じやり方で構築できるXAMPPは最高に入門向けです。
Linuxの知識がある人はAWSのCloud9もオススメです。
進め方
いきなりRailsチュートリアルでTwitterクローンに挑戦するのではなく、小さく作って。
テーマを意識して機能を追加しましょう。
例えば、掲示板とTwitterの違いは何だろうか？
FacebookとInstagramの似ているところと、違うとこはどこか？
前提 1
先にHTML、CSS、Java Scriptはしっかり勉強しておきましょう
よく「HTML、CSS、Java Script位は」と言われますが、重要なのでしっかりやりましょう
前提 2
もし、時間にゆとりがある場合、ExcelやAccessが使える状況ならば先にウェブではなく下記から準備運動でやってみるのもありです。
- Excel
- Excel VBA
- Access
- Access VBA
- Access VBAとExcel VBAの連動
Excel VBAだけでもやると、ウェブの要素が入らずにプログラミングってどういうものかを把握しやすいのでオススメしています。
本題
最初はXAMPPでPHPが無難です。9位まではフレームワークなしで素のPHPで書いたほうが後の理解が深まると思います。
こういうチュートリアルを参考に自分でMVCフレームワークを自作してみてから人気のフレームワークを学習しましょう
- 名前を入力すると、「こんにちは、クロサワさん」というように入力した値を含めて表示するだけのフォームを利用したアプリ(この時点ではDB連動する必要は無い)
- 1にバリデーションを加える(この時点ではDB連動する必要は無い)
- 2にセッションで入力値を記録してバリデーションでこけても残るようにする(この時点ではDB連動する必要は無い)
- 1.2.3で学んだ技術をベースにTodoリストアプリを作る。ここでDB対応してCRUDをマスターする。ついでにAjaxやModalも使えるようにしてしまう
- 5をベースに社員登録アプリを作り、ログイン機能を追加する
- 掲示板 アプリを作る。投稿に対してのコメントの関係性を意識して作る。ログインだけじゃなく動作制限・認可を意識する。
- ブログ アプリを作る。掲示板と何が違うのかを調べて整理するとこから始めよう。
- チャットアプリを作る。ソケット通信はNode.jsの方が簡単
- Twitter clone
- Facebook clone
- Instagram clone
- Amazon Clone
- Youtube Clone
cloneは一つでも充分なんだけど、やってみたら面白くて色々cloneしたくなるはず
cloneを参考するにはこちらで探してみてください。
【保存版】Udemy 350コース突破記念 講師に全力 リスペクト企画 オススメ コース紹介【海外コース版】
入門時にオススメの書籍
PHP
PHPの絵本 第2版 Webアプリ作りが楽しくなる新しい9つの扉
いきなりはじめるPHP~ワクワク・ドキドキの入門教室~
Ruby
はじめての「Ruby on Rails」5 (I・O BOOKS)
Web全般
「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか
YoutubeでもCloneを参考にできます。
再生リスト形式で検索するのがコツです。
ポイント
Windows Xammpを卒業するタイミング
5 〜 7ができた時点でWindows Xammpを卒業してLinuxを操作して環境開発を行いましょう。
その際はvagrantを利用してvirtual boxにubuntuかcentosをインストールし
Lamp環境をコマンドでインストールして作りましょう。
そして、Heroku ⇨ さくらのVPS ⇨ AWSって順でアプリを公開してみよう.
更にGit/Githubでソースのバージョン コントロール・プルリクベース開発行い
環境構築の自動化をしましょう。最初はシェルにまとめるだけいいので、次第に冪等性を意識しAnsibleを使いこなせるようになりましょう
仮想化のメインストリームであるdocker、docker-composeで環境構築の大幅な短縮化を実現しましょう。
最後にテストコード、CIにも挑戦し学習記録をQiitaに投稿しよう
また、この時点でiOS等のモバイルに挑戦するのもあり
最後に
上記をまともにやると三ヶ月では済まないので、年単位でゆっくり育ててみてください。