【Loco新人エンジニア育成企画】CakePHP2でオリジナルWebアプリケーションを開発するまで


この記事はRelux Advent Calendar 2017 8日目の記事です。

初めまして、おぬきち(@onukichi_jp)です。Reluxを運営するLoco Partnersにてエンジニアインターンをしております。

紆余曲折を経てエンジニアになった僕は、まだまだ技術的に新人エンジニアです。そんな僕のために先輩エンジニアの方々の計らいで「Loco新人エンジニア育成企画」がスタートしました。

今回は、「Loco新人エンジニア育成企画のご紹介」と企画のメインである「CakePHP2を用いたオリジナルWebアプリケーションの作成」についてお伝えしたいと思います。

Loco新人エンジニア育成企画とは

独学とプログラミングスクールを経て、ついにエンジニアとなった僕の成長のために、先輩エンジニアの方々に提案していただいたのがこの「Loco新人エンジニア育成企画」です。エンジニアとして必要な技術を身につけるために、学習すべき内容をロードマップで作成していただき、それを僕が業務時間外で遂行していきます。

企画の目標と目的は以下の通りです。

目標:1ヶ月後にはひとりでCakePHPでWebアプリケーションを公開できる
目的:Webアプリケーションの基本構成を理解する(インフラ〜フロントエンドまで)
   業務で使うCakePHPの基礎づくり
   業務で使うSQLの基礎づくり
   チーム開発フローの基礎づくり

具体的な学習内容は以下の通りで、週に1度先輩エンジニアの方々と進捗確認のミーティングを行っていました。

項目 アクション 備考
CakePHP CakePHP2でWebアプリケーションを作成 【旧版】CakePHP2入門
CakePHP2でオリジナルWebアプリケーションを作成 社内勉強会支援サービスの開発(本記事で紹介)
MySQL mysqlを一通り学ぶ MySQL入門
文法について記事を読み込む MySQLの使い方
サーバー構築 Vagrantでローカル開発環境構築 ローカル開発環境の構築 [macOS編]
コーディング PHPコーディング規約を読み込む 社内ドキュメントのため非公開
CakePHPコーディング規約を読み込む 社内ドキュメントのため非公開
可読性の高いコードを学ぶ リーダブルコード
共同開発 Gitを学ぶ(サルでもシリーズ読破) サルでもわかるGit入門 入門編
プルリクエストを学ぶ サルでもわかるGit入門 プルリクエスト編

今回はなかでも、「CakePHP2でオリジナルアプリケーションを作成」についてご紹介したいと思います。

何を作ったのか

社内勉強会の開催をサポートするWebアプリケーション「Luncher」を作成しました。現在、社内勉強会を開催する際には、全社のSlackで告知し、参加者をGoogleカレンダーに招待するという形を取っていますが、社内向けのconnpassみたいなサービスががあったらいいなと思い、今回作ることにしました。

要件定義

まずは要件定義から着手し、先輩エンジニアからレビューをいただきながらサイトマップ設計、DB設計、ワイヤーフレーム設計を行いました。

DB設計に関して、当初僕の考案では8つあったテーブルが先輩エンジニアの手によって、3つぶった切られて最終的に5つにまで減りました。どれだけ無駄があったか...。

実装

無事に要件定義を終えた後は、早速実装に入りました。完成までの実装期間は約1ヶ月と決めていまして、この1ヶ月は起きてる時間はほぼプログラミングをしているという生活でした。

そしてなんとか1ヶ月後には、先輩エンジニアの力を借りながら、Webアプリケーションを完成させることができました。ただAWSへのデプロイに少々時間がかかっていまして、公開まではもう少しかかりそうです(社内向けなので外部へは非公開)。

つまづいた点

PHPのフレームワークではLaravelを使ったことがあったのですが、CakePHPは初めてでしたのでいくつかつまづいた点がありました。CakePHPを使ったことがある方にとっては当たり前な点かもしれませんが、僕みたいな新人エンジニアはつまづく点かと思ったので、つまづいた点の共有とその解決法を書いていきます。

ユーザーのログイン時に要求する情報を変えたい

Laravelではコマンド1つで登録、ログイン、ログアウトに必要なモデル、ビュー、コントローラを作成してくれますが、CakePHPではある程度自分で書く必要があります。

今回はAuthComponentを用いて、ユーザーの登録、ログイン機能を作成しました。

CakePHP2のドキュメントでは、以下のようにログイン時にusernameとpasswordを要求する仕様になっています。

login.ctp
<div class="users form">
<?php echo $this->Flash->render('auth'); ?>
<?php echo $this->Form->create('User'); ?>
    <fieldset>
        <legend>
            <?php echo __('Please enter your username and password'); ?>
        </legend>
        <?php echo $this->Form->input('username');
        echo $this->Form->input('password');
    ?>
    </fieldset>
<?php echo $this->Form->end(__('Login')); ?>
</div>

このログイン時に要求する値をusernameからemailに変更したかったのですが、inputの値をemailに変更するだけだと正常にログインができませんでした。

対処法としては、以下のようにAppController.phpの$componentsにも、usernameからemailへの変更を設定する必要があります。

AppController.php
public $components = array(
    'Auth' => array(
        'authenticate' => array(
            'Form' => array(
                'fields' => array('username' => 'email')
            )
        )
    )
);

AuthComponentをあまり理解できていなかった僕は、まずここでつまづきました(かなり序盤)。

ヘッダーにログイン中のユーザー名を表示したい

ヘッダーにログイン中のユーザー名を表示させるために、コントローラに$this->set('user', $this->Auth->user());を記述し、ビューにて$user['User']['name']でユーザー名を呼び出そうとしたのですができませんでした。

これも調べてわかったことは、対処法としてAuthComponent::user('name')で記述すると呼び出すことができます。AuthComponent::user()は現在ログインしているユーザーにアクセスすることができ、どこからでも利用することが可能です。

まとめ

今回の「Loco新人エンジニア育成企画」を経て、Webアプリケーションを開発するための基礎的な知識は身についたと感じています。

今回良かった点としては「要件定義から実装までレビューをもらいながら経験できた」ことです。これまで自分で何個かWebアプリケーションを作成したことはありましたが、今回のように要件定義を作り込んだことはなかったですし、それに対してレビューをいただき改善できたことが良い経験になりました。

またこういった短期間の企画はエンジニアだけでなく、マーケティングやデザイナーなど他の職種でもあってよいかと感じました。特にインターンは経験がほぼない状態での入社が多いですし、業務でどんな知識が必要か正しく認識できていない場合があるので、学習すべき内容のロードマップがあると成長速度が上がってくると思います。

参考

最後に

よく分からない点や間違っている点がありましたら、コメント欄で教えていただければと思いますm(_ _)m