Zenn
📑

Webエンジニアへの道130日経過 - MVPアプリ作成

2024/09/01に公開
Laravel
個人開発
未経験エンジニア
Laravel Sail
idea

現在の学習状況

こんにちは、Someです！
まずは現在の学習状況をシェアしていきます。
※右にある数字は終了予定月と（）内が完了実績月です。

  1. html・css 4月（4）
  2. Javascript 4月（4）
  3. Python 4月（4）
  4. Django 5月（5）
  5. git・github 5月（5）
  6. Linux 5月（5）
  7. DB・SQL 6月 (6)
  8. モダンJavaScript 6月(6)
  9. 業界研究、企業研究 7月(7)
  10. ポートフォリオアイデア 7月(7)
  11. PHP・Laravel基礎学習 7月(8)
  12. 安全なアプリケーション 8月(8)
  13. API 8月(8)
  14. ポートフォリオ作成開始 8月←イマココ
  15. ポートフォリオ完成 10月
  16. 転職活動開始 10月
  17. 転職成功 12月

今週の学び・気付き

今週はこれまで学んできたことをもとに、MVPアプリ（Minimum Viable Product）を作成していきました！
ひとまず完成したアプリの画面はこんな感じ！


githubリポジトリ：https://github.com/Some558/kondate-mvp

献立表示アプリです！
私の妻がいつも献立に困っているのを見て、簡易的に献立を考えられるアプリがあればな〜と思い作成してみました！
現時点では月曜日の献立を手動で打ち込むだけなので実用性はほぼありませんが、今後これをベースにアプリを作っていきたいと思っています。

Laravelのフォント変更やアイコン変更方法を新たに習得したので、備忘録的に記載しておきます。

フォント変更

/Users/some/プログラム/kondate/kondate-mvp/resources/css/app.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Noto Sans JP', 'M1 Puls', 'ZEN角ゴシック', sans-serif;
}

/Users/some/プログラム/kondate/kondate-mvp/tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                mplus: ['"M PLUS 1p"', ...defaultTheme.fontFamily.sans],
                zen: ['"Zen Kaku Gothic New"', ...defaultTheme.fontFamily.sans],
                sans: ['"Zen Kaku Gothic New"','Noto Sans JP', 'Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

アイコン

material design iconeを使用する場合

/Users/some/プログラム/kondate/kondate-mvp/resources/views/menus/index.blade.php

    <link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/6.9.96/css/materialdesignicons.min.css" rel="stylesheet">

上記CDNリンクを入れておく

<i class="mdi mdi-rice text-2xl text-indigo-600 mr-2"></i>

上記によってライスの画像が表示される

以下全体コード

<div class="bg-indigo-50 p-6 rounded-lg shadow-md transition duration-300 ease-in-out hover:shadow-lg">
<div class="flex items-center mb-3">
<i class="mdi mdi-rice text-2xl text-indigo-600 mr-2"></i>
<h4 class="font-bold text-indigo-900">メインメニュー</h4>
</div>
<p class="text-gray-800 text-lg">{{ $menu->dishes->where('type', 'main')->first()->name }}</p>
</div>

ここからしっかりとしたアプリにするのはかなり大変だと思いますが、ラストスパートだと思って駆け抜けていきます！

来週からの学習予定

来週からはMVPアプリを正規アプリに昇華させていくべく、詳細の設計からやっていきます！

設計は全くと言って良いほどやってきていない内容なので苦戦するとは思いますが、一つ一つ身になっていく楽しさを感じていきたいと思います！

それでは今週はこの辺で！
ありがとうございました！

今週使用した学習教材

1.Laravelの教科書（Kindle）

Discussion