きっかけ

「アウトプットしたいけど、何作ればいいんや？」
「オレの今の技術だと、どんなものが作れるんや？」

プログラミング学習中こんな風に思って困ったこと、ありませんか？

僕はめちゃくちゃありました！

Twitterを見てるとたまーにTLに誰かのアウトプット作品が流れてきたりしますが、それもちょうど今の自分のレベルに合ったものでないとなかなか参考にしづらい。

じゃあQiitaはどうなんだ！？ということで、Qiitaでたとえば「JavaScript アプリ」とか「JavaScript ゲーム」などのキーワードで検索しても、ソースコードしか載ってないパターンがほとんどで、あってもスクショ画像が１枚だけ。
せめて動かしてるデモのgif画像くらい見てみたいですし、実際にサーバーにアップしているURLが記事内にあって、実物を触れるパターンなんて全然ないなと感じていました。

しかし、プログラミングを始めて1年半ほど経ったので今なら分かりますが、世の中には自分の成果物をネット上のどこかで公開している人がたくさんいます！

だってみなさん、ポートフォリオを持って転職活動しますでしょ？

てことは、企業に見て触ってもらうために、実際に公開する人が多いと思うんです（ローカルでしか動きません、だとなかなかアピールしづらいですしね）

でも、ネット上に公開している人がたくさんいるはずなのに、「ここにいけばみんなのポートフォリオが一度にたくさん見れる！わーい！」みたいな場所ってない気がするんです（あったら教えてください）

じゃあ、自分で作っちゃおう！というのが今回の趣旨でございます。

他人の成果物を見てみたい人 と 自分の成果物を他人に見てもらいたい人
双方にメリットがあるようなプラットフォームにしていきたいです。

１からサービス作ったことがない人にとっては、どういう手順で作っていくのかをリアルタイムで晒しているというのは多少なりとも参考になる人もいるのでは？と思い、「作ってみた」じゃなくて「これから作ります」というスタンスの記事にしてみました。

そして、作る過程を晒すことで、作っている最中からみなさんにアドバイスをいただいてよりよいサービスにしていきたいという作戦であります！（ここ重要！）

どうぞよろしく！

自己紹介

新卒で入った食品メーカーにて、チャーハン職人として製造現場でチャーハンを作りまくるみたいな仕事を6年くらいやって退職。
2019年4月よりプログラミング学習を開始。2019年10月よりフロントエンドエンジニアとして都内で働いております。今は某事業会社のいわゆる大規模開発といわれるような現場で開発をしています。

今回は、「React,Reduxでなんか作る」そして、「アクティブユーザーのいるサービスを作る」という２つの目的を達成すべく、サービス作りを進めていきます。

対象ユーザー

• 他の人の成果物を見てみたい人
• 自分の成果物を他の人に見てもらいたい人

がんばりたいポイント

このサービス、まず成果物を公開してくれるユーザーがいないと始まらないんです。

なので、 集客という点が非常に重要になってきます。

今後自分が事業を何かやるにしても必ず集客は必要になってきます。その第一歩としてこのサービスのユーザーを増やしていきたい。

「何かに役立つはず…」と思いTwitterでの発信もコツコツ続けてきました。おかげさまでフォロワーも結構増えました。何かに役立てるとしたら、今ここだろうという気がします。

今の自分が本気で集客をがんばったらどれくらいのことができるのか、そんな自分への挑戦でもあります。

使用技術

• フロントエンド・・・React, Reduxを使う（マスト）、react-routerを使ってSPA（風）にする（できれば）
• バックエンド・・・Laravel

機能

やってくうちに増減あると思いますが、今んとここんな感じの予定。
まずは機能最小限で完成優先。

• ユーザー登録（１アカウントで成果物の投稿・閲覧両方可能）
• ログイン（SNS認証あり）
• ログアウト
• プロフィール編集
• ユーザー削除
• コンテンツ（成果物）登録
• コンテンツ（成果物）編集/更新
• コンテンツ（成果物）削除
• いいね
• フォロー

工数見積

1人月（160時間）
できるかなーどうかなー

おわりに

これぞまさに 宣言駆動開発 ！！！
先にやるって言っちゃうとやるしかなくなるので、おすすめです。
今後は１週間ごとくらいで進捗報告していこうかと思います。

背景

LaravelでDynamoDB使うにあたり、ORMのlaravel-dynamodbなどもあるが、DynamoDBでORM利用するのが少し違和感あった為にSDK使ってやってみた際のメモ（そもそもPHPのWEBフレームワークでやるなという話ではあるが、せっかくSDKが提供されているので一度使ってみようという感じ）

環境

・Windows 10
・HomeStead 9.5
・PHP 7.4
・Laravel 6.0

１．準備

AWS-SDK-PHPのインストール

composer require aws/aws-sdk-php

DynamoDBの環境作成

AWS提供のローカルDynamoDBを利用。Vagrantを使っていたので、Dockerと共存が面倒なことになるのでローカルに直接インストールしました。
https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBLocal.html

※GUIツール（結構便利）
https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/workbench.settingup.html

DynamoDB起動

java -Djava.library.path=C:\localsandbox\DynamoDB\DynamoDBLocal_lib -jar C:\localsandbox\DynamoDB\DynamoDBLocal.jar -port 8001 -sharedDb

※HomesteadのVirtualBoxと初期ポート8000が被るので、8001で起動させる

テスト用テーブルの作成

テーブル名：SensorLog
パーティションキー：device_id
ソートキー：receive_dt

aws dynamodb create-table --table-name SensorLog --attribute-definitions AttributeName=device_id,AttributeType=S AttributeName=receive_dt,AttributeType=N --key-schema AttributeName=device_id,KeyType=HASH AttributeName=receive_dt,KeyType=RANGE --provisioned-throughput ReadCapacityUnits=1,WriteCapacityUnits=1 --endpoint-url http://localhost:8001 

※キーのない項目はテーブル作成時に指定できないので、テストデータ作成時に適当に作る。
※テストデータはGUIで適当に作成

.envに情報設定

DYNAMODB_REGION=ap-northeast-1
#↓vagrantのlocalhost:xxxxだとつながらないのでローカルIPを設定
DYNAMODB_LOCAL_ENDPOINT=http://192.168.11.99:8001
DYNAMODB_DEBUG=true

２．データ取得

・パーティションキーで絞ってデータ検索した結果の最新を取得する。
・パーティションキー＋ソートキー（範囲指定）による複合条件検索の結果リストを取得する

use Aws\DynamoDb\Exception\DynamoDbException;
use Aws\DynamoDb\Marshaler;
use Aws\Sdk as AwsSdk;

class SensorLog
{
    /**
     * @var DynamoDbClient
     */
    private $client;

    /**
     * @var Marshaler
     */
    private $marshaler;

    /**
     * DynamoModel constructor.
     */
    public function __construct()
    {
        // ローカルDBであっても"credentials"定義しないとエラーが吐かれるので注意
        $sdk = new AwsSdk([
            'credentials' => [
                'key' => env('DYNAMODB_KEY'),
                'secret' => env('DYNAMODB_SECRET'),
            ],
            'endpoint'   => env("DYNAMODB_LOCAL_ENDPOINT"),
            'region'   => env("DYNAMODB_REGION"),
            'version'  => 'latest'
        ]);

        $this->client = $sdk->createDynamoDb();
        $this->marshaler = new Marshaler();
    }

    /**
     * パーティションキー指定による最新データを取得する
     */
    public function getFirst($id)
    {
        $tableName = 'SensorLog';

        // 検索条件設定：device_idを検索条件にする
        $key_value = $id;
        $jsonStr = '{'.'":device_id":'.'"'.$key_value.'"'.'}';
        $eav = $this->marshaler->marshalJson($jsonStr);

        // Limit:1 取得件数を1件に制限
        // ScanIndexForward:false ソートキー(receive_dt)を降順指定
        $params = [
            'TableName' => $tableName,
            'KeyConditionExpression' => '#id = :device_id',
            'ExpressionAttributeNames'=> [ '#id' => 'device_id' ],
            'Limit' => 1,
            'ScanIndexForward' => false,
            'ExpressionAttributeValues'=> $eav,
        ];

        try {
            $result = $this->client->query($params);
            $data = array();
            foreach ($result['Items'] as $recdData) {
                $data[] =  $this->marshaler->unmarshalItem($recdData);
            }
            return $data;
        } catch (DynamoDbException $e) {
            throw $e;
        }
    }

    /**
     * パーティションキー＋対象日付のデータリストを取得する
     */
    public function getDataByDateTime(int $id, string $dt)
    {
        $tableName = 'SensorLog';

        // 対象日付の最小時間と最大時間を設定する
        // receive_dt:YYYYMMDDHHMMSSの値は数値型で格納されている
        $from_dt = $dt."000000";
        $to_dt = $dt."235959";

        // バインド変数を設定(device_id,from_dt,to_dt)
        $key_value = $id;
        $jsonStr = '{' . '":device_id":' . '"' .$key_value.'",":from_dt":'.$from_dt.',":to_dt":'.$to_dt.'}';
        $eav = $this->marshaler->marshalJson($jsonStr);

        // device_idとreceive_dtによる範囲検索を行う
        // ScanIndexForward:false ソートキー(receive_dt)を降順指定
        $params = [
            'TableName' => $tableName,
            'KeyConditionExpression' => '#id = :device_id and receive_dt between :from_dt and :to_dt',
            'ExpressionAttributeNames'=> [ '#id' => 'device_id' ],
            'ScanIndexForward' => false,
            'ExpressionAttributeValues'=> $eav,
        ];

        try {
            $result = $this->client->query($params);
            $data = array();
            foreach ($result['Items'] as $recdData) {
                $data[] =  $this->marshaler->unmarshalItem($recdData);
            }
            return $data;
        } catch (DynamoDbException $e) {
            throw $e;
        }
    }
}

呼び出し

・コントローラーで呼び出し

//１．指定IDの最新データを1件取得
$sensorLog = $sensor->getFirst($id);
//２．2020-08-06のデータを検索して結果リストを取得
$sensorLogList = $sensor->getDataByDateTime($id, "20200806");
dump($sensorLogList);

・結果

参考

https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/GettingStarted.PHP.04.html

ルート定義ファイルroutes/web.phpにレート制限をかけるミドルウェアを適応させて、セキュリティの向上を図りたいと思います。アクセスの回数制限を設定したい場合に有効です。

レート制限の書き方

Route::middlewareメソッドにthrottleミドルウェアを指定してください。このthrottleミドルウェアは「時間内に許す最大リクエスト数」と「時間」の２つを指定します。

routes/web.php

Route::middleware('auth:api', 'throttle:60,1')->group(function () {
    Route::get('/user', function () {
        //
    });
});

上記の例のコードでは、1分間に60回のアクセスを許可するルートになります。

動的レート制限の書き方

もし、認証済みのモデルの中に、最大リクエスト属性がある場合には、その値を動的に最大リクエスト数に適応することもできます。

routes/web.php

Route::middleware('auth:api', 'throttle:rate_limit,1')->group(function () {
    Route::get('/user', function () {
        //
    });
});

例えば、認証したモデルにrate_limit属性があり、値を持っている場合、その値がthrottleミドルウェアのrate_limitに渡されるという感じです。

参考文献：https://readouble.com/laravel/7.x/ja/routing.html

前提条件

php7.2（brewでインストールしています）
Laravel
Postgres12.3(こちらもbrewでインストールしています。）
Laravelのトップページが開いているところからやります。
目標は、posgresqlに接続して、php aritisan migrateでDBを作るまで

その１ .envファイルで指定したユーザーと同じユーザー（ロール）をpsql側で作る

# .env
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=sample  #その2
DB_USERNAME=default #その1 このユーザーをpsql側で作成する
DB_PASSWORD=secret

$ createuser default

その２　.envファイルで指定したDBと同じDBをpsql側で作る

$ createdb sample -O default

つくれたかチェックします。

$ psql -l

最終章、 Laravelプロジェクトのあるディレクトリに入り、php artisan migrateを実行します。

$ cd Laravelプロジェクト
$ php artisan migrate
Rolling back: 2020_05_29_072511_create_problems_table
Rolled back:  2020_05_29_072511_create_problems_table
Rolling back: 2020_05_22_023512_add_column_to_users_table
Rolled back:  2020_05_22_023512_add_column_to_users_table
Rolling back: 2020_05_07_115046_create_song_tag_table
Rolled back:  2020_05_07_115046_create_song_tag_table
Rolling back: 2020_04_19_234148_create_tags_table
Rolled back:  2020_04_19_234148_create_tags_table

目的

• 先輩方が記載したコードを読んでいて初めて知ったものだったのでまとめる

三項演算子??

• この演算子は別名null合体演算子とも呼ばれる。

• 下記に例を記載する。

  式1 ?? 式2;
  

• 式1がnullではない場合には式1が実行される。

• 式1がnullの時は式2が実行される。

具体例

• 変数$strに文字列を格納する処理を記載する。
• 変数$base_strに文字列が格納されている時は変数$base_strの文字列を変数$strに格納する。

• 変数$base_strがnullの時は文字列「base_str is null」を変数$strに格納する。

  $str = $base_str ?? 'base_str is null';