【初心者向け】プログラミングの学習方法

概要

プログラミングを学習しようと思っている人は、多かれ少なかれ、アプリケーションを開発し、自分を含む世の人々に貢献しようと考えている人だと思います。

しかし、いざアプリケーションを開発しようとすると、もしそれがWebアプリケーションの場合、おそらく下記の技術の知識が必要になります。

• サーバサイドの言語
• サーバサイドのWebフレームワーク
• HTML
• CSS
• JavaScript
• RDBMS
• ツール(DBクライアント, Gitリポジトリ, エディタ)
• セキュリティ
• アプリケーションのアーキテクチャ
• 開発/本番環境構築(OS, ミドルウェア, ネットワーク)

Webアプリケーションを開発したいと思っている人の中に、どのサーバサイドの言語(RubyかPythonかPHPかJavaか)、どのWebフレームワーク(Ruby on RailsかDjangoかLaravelかSpring Bootか)とった話をする人ががいますが、上記の必要な技術の中でもそれらは一部にすぎません。

もちろん、開発の大部分を占めるのは事実ですが、ろくにGitやSQLを使えないのにそのような会話をしても意味はないでしょう。

まず、重要なのはWebアプリケーションの開発の全体象を理解することであり、個々の技術の理解はそのあとで問題ありません。

そのため、本稿では、一旦下記の技術を使用して、サンプルのWebアプリケーションのリリースをします。その後は、一通りの開発サイクルを共に体験してみます。

• サーバサイドの言語: PHP
• サーバサイドのWebフレームワーク: Laravel
• デザイン: HTML5/CSS3
• RDBMS: MySQL
• DBクライアント: Sequel Pro
• Gitリポジトリ: GitHub
• エディタ: VSCode
• 開発環境構築: Docker
• 本番環境構築: Heroku

繰り返しになりますが、まずは全体の概要を理解することを優先します。しかし、知識不足により、PHP、Laravel、CSS3、MySQLなどの技術の壁にぶつかると思いますが、そこで始めてそれら個々の技術を深掘りすれば良いのです。

また、個々の技術の知識が増えていき、開発サイクルにもなれてきたころには、さらにWebアプリケーションの全体象が理解できてるはずですので、MySQLではなくPostgreSQLに変更したい場合や、HerokuからAWSに移行したい場合でも、すぐに対応できることでしょう。

Python+DjangoやJava+Spring bootに変更するといった大きな変更の場合は、Gitリポジトリの段階から作り直すことになると思いますが、それまでに培ったWebアプリケーションの全体像の理解、HTML5/CSS3、RDBMS、各種ツール、開発サイクルの知識が無駄になることはないでしょう。

本稿の対象とする読者

Webアプリケーションの開発をしたいが、身近に詳しい人がいないため、どのように開発を進めれば良いかわからない人や、一度プログラミング言語の学習をしてみたものの、何の成果も出ず辞めてしまった人を対象にしています。また、Mac OSの使用を前提としています。

なぜWebアプリケーションなのか

自分個人だけの使用であれば、Webアプリケーションではなく、CUIアプリケーションやJavaやC#などを使用したPCで起動するGUIアプリケーションを開発しても問題ありませんが、本稿では、他人によるアプリケーションの使用も視野に入れるため、アプリケーションの配布の点を考慮し、Webアプリケーションとしています。

iOSやAndroidのアプリ開発の選択肢もあるかもしれませんが、結局これらについても、サーバサイドの言語/フレームワーク、DB、各種ツールについては共通項が多いため、まずWebアプリケーションの開発を進めても、無駄になることは少ないです。

さらに、Webアプリケーションの開発に慣れ、Vue.jsやReact.jsなどのREST APIでのサーバ通信に慣れていけば、Vue NativeやReact NativeやFlutter等を使うことで、既存の知識を活かして、iOSやAndroidのアプリを開発することができるようになります。また、先ほど触れたPCで起動するGUIアプリケーションについてもElectronを使えば、Webアプリケーション開発の知識を使って開発可能です。

アーキテクチャ

本番環境

本番環境は、WebサーバとDBサーバをHerokuを使って構築します。後述しますが、Herokuは容易に本番環境の構築を可能にするPaaSです。

開発環境

開発環境は、MacOS上に構築します。

MacOS上にPHPとDockerをインストールし、さらにDocker上にDBサーバ(MySQL)を構築します。

下記の図では、あたかも物理的なサーバがあるかのうようですが、あくまでこれはソフトウェアです。

各種インストール・アカウント発行

PHP

HomebrewでインストールできるPHPにはLaravelで必要なPHP拡張がインストールされているため、HomebrewでPHPをインストールします。

$ brew install php

Homebrewがインストールされていない場合は、Homebrew公式でインストールしてから、PHPをインストールします。

Docker

Dockerをインストールします。 https://hub.docker.com/editions/community/docker-ce-desktop-mac/

下記コマンドを実行して、dockerとdocker-composeがインストールされていることを確認します。 エラーが発生せず、バージョン情報が表示されれば大丈夫です。

$ docker -v

$ docker-compose -v

Sequel Pro

Sequel ProはMySQLを操作するGUIツールであり、テーブルの中身の確認やテストデータを追加するときに使用するものです。

https://sequelpro.com/

Git

コードのバージョン管理をするものです。Gitを使えば、前回の保存しておいた状況に戻したりすることやその時の差分を参照することができます。継続的にアプリケーションを開発していく場合は、必須となるツールです。

Gitを使わず開発するのは非常に効率が悪くなるので、絶対に使い方を学んだ方が良いです。

macにはgitが事前にインストールされていますが、念のため、インストールされていることを確認しておきます。

$ git --version

GitHub

Gitのリポジトリサービス。ローカルで管理しているコードをGitHubをつかってリモートでも管理することができるので、ローカルのコードが削除されていても、Githubに送信されていれば問題ありません。他人とサービスを協働で開発する際にも有効です。

また、コードの管理だけでなく、開発支援ツールとしての側面もあるので、GitHubの使い方に慣れておくと良いでしょう。

とりあえず、アカウントを作成しておきましょう。 GitHub

Heroku

HerokuとはPaaSであり、OSやプログラムの実行環境、DBなどのセットアップを代わりに用意してくれます。

そのため、利用者は、自分が作成したコードをHerokuに送信するだけで大丈夫です。(もちろん、どのDBを使うかといった決定に関しては、利用者がする必要がありますが、Herokuの管理画面で設定するだけ完結します。)

サーバは用意してもらって(IaaS)、ミドルウェアのインストールを自分で行ったり、サーバさえも自分で用意(オンプレ)したりすることもできますが、初学者がそこの世界に行ってしまうと、開発したいアプリケーションの機能をいつまで経ってもリリースできなくなってしまうので、これらについては、お勧めできません。

まずはHerokuのアカウントを作成しましょう。

Heroku CLI

Herokuを使うためのコマンド。

$ brew tap heroku/brew && brew install heroku

※https://devcenter.heroku.com/articles/heroku-cli 参照

Heroku CLIが正常に動作することを確認します。

$ heroku -v

VSCode

無料で使用できるエディタです。 https://code.visualstudio.com/

本稿では、VSCodeの使用を前提に進めるので、是非こちらをインストールしてください。

IntelliJ IDEAやPhpStormをお勧めしたいところですが、学生以外の方は有料であるため、無料のVSCodeを使用します。有料でも問題ない方や学生の方は是非IntelliJ IDEAやPhpStormの使用を検討ください。

composer

PHPのライブラリをインストールするためのツールであるcomposer.pharをインストールします。

$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
$ php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
$ php composer-setup.php
$ php -r "unlink('composer-setup.php');"

composer.pharがカレントディレクトリに存在することを確認してください。

$ ls composer.phar

pathの通っている箇所にファイルを移動します。

$ mv composer.phar /usr/local/bin/composer

この手順の意味: echo $PATHを実行すると、おそらく複数のディレクトリが表示されると思いますが、ここで表示されたディレクトリに存在するコマンドは、カレントディレクトがどこであっても実行できます。(たとえば、lsコマンドはカレントディレクトが/だろうが、/usrだろうが、どこでも実行できます)。つまり、このmvコマンドはcomposer.pharをcomposerコマンドとして、どのカレントディレクトリでも実行できるようにしたということです。

https://getcomposer.org/doc/00-intro.md

Laravelインストーラ

このインストーラをインストールすると、Laravelプロジェクトが作成できるようになります。

composer global require laravel/installer

ここにインストールされるようです。

ls .composer/vendor/bin 

もちろん、こんなところにpathは通っていないので、次にpathを通しておきます。

私はzshを使っているので、.zprofileにexport PATH=$HOME/.composer/vendor/bin:$PATHの行を追加しました。

cat .zprofile 
export PATH=$HOME/.composer/vendor/bin:$PATH

※このあたりを理解できない場合は、[mac pathの通り方]で調べてみてください。bashを使っていたりすると方法は異なります。

ターミナルを開きおなして、echo $PATHをすると、export PATH=$HOME/.composer/vendor/bin:$PATHが追加されていることが確認できました。

※先ほどは、pathに登録されているディレクトリに実行ファイルをmvしましたが、どのカレントディレクトリでも実行できるようにする、という観点としては一緒です。公式サイトに書いている方法に素直に則っただけです。

https://readouble.com/laravel/7.x/ja/installation.html

プロジェクト作成

インストールすべきものを全てインストールできたので、さっそくプロジェクトの作成をします。

$ laravel new myproject  

※必ずしもmyprojectという名前である必要はありません。

プロジェクトの作成に成功しました。

Package manifest generated successfully.
Application ready! Build something amazing.

VSCodeで開く

macのfinderは使い辛いですが、myprojectと検索すれば、表示されると思います。

VSCodeでmyprojectを開けました。

Laravelをローカルで起動してみる。

先ほどと同じように、VSCodeのterminalを開いてみて、php artisan serveと入力してみましょう。

こちらが表示されれば成功です。http://127.0.0.1:8000 をブラウザでみてみましょう。

Laravel development server started: http://127.0.0.1:8000
[Sun May 10 23:51:05 2020] PHP 7.4.5 Development Server (http://127.0.0.1:8000) started

GitHubにpush

Laravelを正常に起動できたので、GitHubにpushします。

gitコマンドを使ってもいいですが、VSCodeではGUIでgitを操作できるみたいなので、これを使います。

git初期化

initialize repositoryをクリック

Untrackedのファイルが81あるようです。[+]をクリックして、git addします。

上部のチェックマークをクリックするとgit commitできます。

[initial commit]とでも入力してcommitします。

VSCodeのterminalを開いて、$ git logを実行すると、先ほどの[initial commit]のコミットが成功していることが確認できます。

これで、ローカルのgitへのcommitは成功しました。 今度はGitHubにpushしてみましょう。

GitHubにpush

まず、repositoryを作りましょう。

repository名をmyproject、privateに設定して[Create repository]をクリック

すでに、ローカルリポジトリは存在してるので、こちらの方法を実施します。

リモートリポジトリして、https://github.com/ale51/myproject.git を登録(このURLは人によって異なります。) ※ワーキングディレクトリはmyprojectである必要があります。

git remote add origin https://github.com/ale51/myproject.git

これは、VSCodeのGUIでもできます。

git push -u origin master

もしくは

GitHubのwebページに遷移して、認証をクリアすればpushに成功します。

GitHubのmyprojectのrepositoryをみてみると、pushが成功していて、ローカルリポジトリでのcommitがリモートリポジトリにも反映されていることがわかります。(さきほどのinitial commitのことです。)

本番リリース

まだ、DBにすら接続しておらず、Laravelのデフォルトのコードですが、先に述べた方針通り、まずリリースを実施します。

Herokuにログイン

$ heroku login

heroku: Press any key to open up the browser to login or q to exit:

と表示されるので、何らかのキーを押下。すると、HerokuのWebページが表示されるので、ログインします。

ログインに成功したので、terminal上からHerokuを操作することができるようになりました。

Logged in as [email protected]

Herokuにアプリケーションを作成する

$ heroku create

このコマンドを実行すると、私の場合は、https://serene-bayou-38020.herokuapp.com/ が割り当てられました。デフォルトでは、Herokuが用意したページが表示されますが、herokuにpushすると、今まで開発してきたページが表示されます。

また、$ git remove -vを実行してみると、下記が表示されます。

heroku  https://git.heroku.com/serene-bayou-38020.git (fetch)
heroku  https://git.heroku.com/serene-bayou-38020.git (push)
origin  https://github.com/ale51/myproject.git (fetch)
origin  https://github.com/ale51/myproject.git (push)

herokuにpushできる準備が整っていることを意味しています。

Herokuにpush

それでは、Herokuにpushしてリリースしましょう。

$  git push heroku master

herokuのリモートリポジトリに、ローカルのmasterをpushするという意味です。

その後、ブラウザでアクセスしてみると、下記のページが表示されてしまいました。

ブラウザのディベロッパーツールで、何が起きているか、まず現状を把握します。(ブラウザはGoogle Chromeを使っています。)

[Network]でHTTP通信の中身をみてみると、HTTPステータスコード: 403が返却されていることが確認できます。403とは、認可されていないことです。しかし、403が返却されるということは少なくともHerokuのサーバは正常に起動していることがわかります。

次に、Herokuは正常に動作しているはずですので、Herokuのログをみてみます。

$ heroku logs -t

こんなログを確認できました。

AH01276: Cannot serve directory /app/: No matching DirectoryIndex (index.php,index.html,index.htm) found, and server-generated directory index forbidden by Options directive

Issue作成

ここで、コードを修正して、localのmasterにcommitして、herokuにpushしても良いのですが、せっかくGitHubのアカウントがあるので、issueを作成し、コードを修正し、そしてpull requestを作成してgithub上でマージするという、実際のプロジェクトで行っている方法を採ってみましょう。

まず、Issueを作成します。

右にある、[New issue]をクリックします。

こんな感じで、issueを作成し、[Submit new issue]をクリック。

ローカルでブランチを作成

VSCodeにて、[Checkout to...]をクリックし、ローカルからブランチを作成しましょう。

ローカルのブランチ名は何でもいいですが、403_bugfixとでもしておきます。[Create new branch...]をクリックします。

修正

サーバからレスポンスは正常にきているのに、403が返ってきていることから、Herokuの設定に問題がありそうです。

実は、先ほど$ git push heroku masterをして、デプロイした際、remote: NOTICE: No Procfile, using 'web: heroku-php-apache2'.というログが出力されていました。

これは、[Procfileが存在しない。web: heroku-php-apache2を使用します。]という意味です。

Laravelの場合は、ドキュメントルートをpublicディレクト直下にする必要があるため、下記のようにProcfileを用意して、publicディレクトリ直下を指定する必要があります。

Heroku公式に記載があります。

web: vendor/bin/heroku-php-apache2 public/

という内容のProcfileを作ってみます。

普通の修正であれば、開発環境で動作確認を行うところですが、この修正は本番デプロイにしか関係ない修正なので、動作確認のしようがありません。このままaddしてcommitして、Githubにpushします。

Procfile作成

Procfileを作成して、上記内容をコピペします。

git add

+をクリックして、git add

git commit

チェックボタンをクリックして、git commit

commitメッセージは、add procfileとでもしておきます。

git push

pushをクリックして、git push

そのままokをクリック

origin(github)を選択

Pull Request作成

Pull requestsタブをクリックすると、403_bugfixブランチがgithubで確認できます。[Compare & pull request]をクリックしましょう。

対応するissueの番号や対応内容を記載しておきます。基本的には、issueには問題や課題を記載し、pull requestには、それらに対応して、何を行ったか(どのような変更を加えたか)を記載すると良いでしょう。

[Create pull request]をクリックします。

pull requestができたら、CommitsタブやFiles changedタブをクリックして、それぞれの中身をみてみましょう。自分の自分の想定通りの変更が加えられているでしょうか。

Files changedタブをクリックしてみると、さきほどのProfileの追加の差分が表示されています。

リモートのmasterにpull requestをマージ

想定通りに変更であることを確認できたので、リモートのmasterにpull requestをマージします。 [Merge pull request]をクリックして、そのまま[Confirm merge]をクリックします。

すると、Procfileを作成したという変更がリモートのmasterに反映されました。

本番リリース

git push heroku master

をして、本番リリースする前に、リモート(Github)のmasterからローカルのmasterに先ほどの変更を取り込むためにVCSでmasterにcheckoutして、git pullします。

masterにcheckout

git pull

まず、terminalで$ git logをしてみると、最初のコミットしか存在しません。また、もちろん、ローカルのmasterには、Procfileもありません。

次に、git pullをしてみます。

再度、terminalで$ git logをしてみると、Procfile作成のコミットメッセージと、pull requestをマージしたコミットメッセージが表示されることを確認できます。

Merge pull request #2 from ale51/403_bugfix
    
add procfile

また、Procfileも存在します。リモート(Github)のmasterの変更がローカルのmasterに取り込まれたからです。

それでは、本番リリースを実施します。

$ git push heroku master

再度ブラウザを確認

今度こそ、上手くいくと思いきや、今度はHTTPステータスコード: 500が返却されました。

しかし、この500エラーはLaravelが返却した500エラーです。つまり、問題はLaravelにあるのです。

ただ、ローカル開発環境では正常に動いて、なぜ本番環境では上手く行かないのでしょうか。

その原因は、.envファイルにあります。VSCodeのプロジェクト直下に.envファイルがありますが、このファイルはGit管理されておらず(.gitignoreに記載されているため)、git push heroku masterを実行しても、Heroku側はこのファイルを認識することはできません。

実は.envファイルに記載されているAPP_KEYという項目が、Laravelを実行するためには必要になるデータなのですが、Herokuはそのデータを取得できないために、エラーが発生しているのです。

そこで、このコマンドを実行すると、正常に動作するようになります。APP_KEYを生成する処理とその生成したデータをHerokuに登録する処理の2つを同時に行うコマンドです。

$ heroku config:set APP_KEY=$(php artisan --no-ansi key:generate --show)

この件も、Heroku公式で説明されています。

上記コマンドを実行してから、ブラウザで確認すると、ローカル開発環境と同様に、Laravelデフォルトの画面が表示されることを確認できます。

.envファイルとは何なのか。なぜGit管理しないのか。

.envファイルは環境によって、異なる値を設定する場合に使用されるファイルです。例えば、DBへの接続の情報は、環境によって異なります。ローカル開発環境では、127.0.0.1: 3306で動作しているDBに接続し、本番環境では、106.154.136.7: 3306で動作しているDBに接続する、といったことがあります。ローカル環境で開発する際に、本番のDBにアクセスできたら、非常に困ったことが起きてしまいます。(開発していたつもりが、実は本番環境のDBのデータを削除していたなど。)

また、このように環境ごとに異なる値を持つファイルは、一般的にGit管理しません。Git管理してしまうと、環境によって値を変えることができなくなってしまいます。(この辺の考え方はWebフレームワークによっても異なります。Laravelではこのような方針をとっているというだけです。)

DockerでMySQLを起動

一通りの開発サイクルを一緒に体験できましたが、まだDBと接続していません。DBと接続していないWebサービスは、基本的に考えられないので、ここからはDBの接続をしていきます。ローカル開発環境では、Dockerで起動したMySQLを接続し、本番環境ではHerokuのaddonのClearDBと接続します。

下記のコマンドを実行すれば、user: root、password: password、port: 3306のMySQL(5.7)をDockerで起動できますが、このコマンドを覚えるのは大変なので、この情報をリポジトリ管理できたら便利です。そこで、docker-compose.ymlファイルを作成し、docker-composeコマンドで、MySQLをDockerで起動できるようにしましょう。

$ docker run --name mysql -e MYSQL_ROOT_PASSWORD=password -p 3306:3306 -d mysql:5.7

3ファイルの修正

docker-compose.ymlの作成

version: '3'
services:
  mysql:
    image: mysql:5.7
    container_name: myproject-mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: myproject
      TZ: Japan
    ports:
      - 3306:3306
    volumes:
    - ./docker/db/data:/var/lib/mysql
    - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
    

my.cnfの作成

[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

[client]
default-character-set=utf8mb4

.gitignoreの修正(追加)

/docker/db/data

上記3ファイルを作成/修正したのち、terminalで

docker-compose up

を実行すると、MySQLが起動します。

なお、docker-compose.ymlには、rootユーザのパスワード、DB名、ポート等が記載されています。この情報を元にMySQLサーバを作成するということであり、これらの情報が、後述するSequel Proやローカル開発環境のLaravelからこのMySQLに接続するために必要となります。

また、docker-compose upを実行すると、MySQLの実体となるファイルが無数に作成されますが、Git管理する必要がないので、.gitignoreファイルを修正して、無視します。

pull requestを作ってますので、参考にしてください。 https://github.com/ale51/myproject/pull/5

既に、GitとGithubの使い方の説明はしてあるので、自分自身でissueやpull requestを作って開発サイクルを慣れていきましょう。

Sequel Proで接続確認

[接続をテスト]をクリックして、成功したら、[お気に入りに追加]をクリックして、[接続]をクリックします。

接続に成功しました。

Sequel ProからMySQLを操作

左下の+ボタンからテーブルを作成しておきます。ここでは、testテーブルとしておきます。エンコーディングやテーブル照合順序は、my.cnfに設定したものが、デフォルトとなっていることが確認できます。

testテーブルは、深く考えず、ここでは、idカラムとnameカラムとします。

testテーブルの作成が完了したら、[内容]の箇所で、適当にデータを挿入してみましょう。insert文を実行せずとも、GUIで簡単に挿入できます。

次に、[クエリ]の箇所で、簡単なselect文を実行してみましょう。

select文を書いて、[前を実行]をクリックすると、記述したselect文が実行され、結果が表示されます。

LaravelからMySQLにアクセスする

ローカル開発環境で、testテーブルの中身を返却する処理をコーディングします。ここでは、http://localhost:8000/sample/1 をブラウザに入力すると、testテーブルのid:1の情報を返却するといった機能を作成します。

web.phpに追加

/sample/{id}のgetリクエストを受け付ける処理を作成。

Route::get('/sample/{id}', 'SampleController@index');

SampleController作成

上記のエンドポイントがコールされた時に実行される処理を作成。 ここでは、Controllerから直接DBに対してアクセスしている。

<?php

namespace App\Http\Controllers;

use App\Service\SampleService;
use Illuminate\Routing\Controller;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\DB;

class SampleController extends Controller
{
    /**
     * @param int $id
     * @return Collection
     */
    public function index(int $id)
    {
        $collection = DB::table('test')->where('id', $id)->get();
        return $collection;
    }
}

詳細はこのpull requestを参照ください。 https://github.com/ale51/myproject/pull/7/files#diff-f903fe3e2fa9481711aba969db0da586R9

このように、開発環境でアクセスしてみると、指定したIDの情報が返却されます。

なお、現状のtestテーブルの中身は下記の通りです。

本番リリース

先ほどの手順に則って、pull requestをマージしたら、ローカルブランチをmasterにチェックアウトして、git pullして、git push heroku masterをしてリリースをします。

リリース後、https://serene-bayou-38020.herokuapp.com/sample/1 をブラウザで開いてみましたが、HTTPステータスコード500が返却されてしまいました。

本番環境のDBをセットアップしていないのが原因です。

HerokuのSettingsのConfig Varsにて、APP_DEBUGの項目をtrueに設定し、再度、https://serene-bayou-38020.herokuapp.com/sample/1 を開いてみると、エラーの内容が明白になります。(一般的に、アーキテクチャの情報をユーザに漏らさないようにするため、本番環境ではエラーの詳細を表示させないようにする設定しますので、この設定は飽くまで特別です。普段はfalseに設定しておきましょう。)

ClearDB

HerokuにMySQLを構築します。ここでは、MySQL互換のあるClearDBを使用します。

HerokuのResourcesにて、ClearDBのadd-onを追加します。

追加したら、SettingsのConfig Varsにて、CLEARDB_DATABASE_URLの項目が追加されていることを確認します。

このmysql://から始まる文字列は本番DB(ClearDB)のアクセス情報です。

例えば、mysql://abcde:fghij@klmno/pqrst の場合、
ホスト: klmno
ユーザ名: abcde
パスワード: fghij
データベース名: pqrst
に対応しています。

試しに、Sequel Proで接続できることを確認しましょう。

イメージとしては、こんな感じです。

アクセスに成功したら、testテーブルのcreate文を実行して、testテーブルを作成しましょう。

CREATE TABLE `test` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

※このcreate文はローカル開発環境のDBのtestテーブルの情報から取得できます。(AUTO_INCREMENTの情報は引き継ぐ必要がないので削除しておきましょう。)

最後に、LaravelからこのDBに接続できるよう、設定する必要があります。 .envのDBの接続情報と同じ項目を、HerokuのSettingsのConfig Varsに設定する必要があります。

完成形は下記の通りです。

対応関係としては、下記のようになっています。 DB_DATABASE: データベース名
DB_HOST: ホスト
DB_USERNAME: ユーザ名
DB_PASSWORD: パスワード

再度、ブラウザを更新してみると、エラーがでないことを確認できます。Sequel Proを使って、データを入れた後に、そのデータを取得できることが確認できるでしょう。

今後の学習方針

開発環境、本番環境がすでに構築できているので、あとは自分の実装したい機能を開発していけば行きましょう。

LaravelやPHPの書籍・記事を読んでいけば、ほとんどの機能が実現できるはずです。