プロジェクト企画書 勢いで作ったのでクオリティとか終わっているかと思いますがまぁプライベートの一ヘタレ技術者の戯言なので 許してくださいｗ というわけで早速、let's環境構築 前提環境 PC環境は↓ 環境構築 といっても、先人の大先輩方の手順をなぞるだけ。というわけで参考になったURLを記載 [Windows 10 Home で WSL 2 + Docker を使う] https://qiita.com/KoKeCross/items/a6365af2594a102a817b ※ちなみにwsl2入れたらもういきなりlinuxコマンド使えて本当に感動した。macいらんっぽい。ここまではdockerが使える準備が完了 続いてlaravelの環境構築を行う [【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン] https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4 ※この記事書いてる方からTwitterでいいね貰ってたな…すげー人だったんだ(；ﾟдﾟ)ｺﾞｸﾘ…あざます＾＾ ただ記事を進める中でgit hubのssh設定があったが以下の設定は要らなかった様子。 UseKeychain yes あと、パーミッションの問題もあったので以下を追加した Users git そんなこんなであっという間にLaravel環境構築が完了してしまった。 あとでルートユーザーのパスワードとか変えておこう＾＾ ※Windows Terminalも入れておくとより便利 https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab 次回は DB設計周りとログインとか何がサクッとできそうか当たり付けをするところをやっていこうと思います。＾＾ ランクマもしよ＾＾

SPAで作るタスク管理アプリのチュートリアル - 一覧テーブル編 今回は第③弾でReactで一覧テーブル作成する部分をやっていくで ①環境構築(Docker/Laravel/React.js/Material-UI) ②React側でルーティング設定 ③Reactで一覧テーブル作成 ④seederで作ったDBのデータをReactに渡して一覧に表示 ⑤新規登録機能 ⑥編集・削除機能 map()とコンポーネント分割の話が中心やで こんな感じで一覧表示するものを作っていくわな。 まず表示できるものをコピペしてから、 現場でよく使われる書き方として再利用しやすいコンポーネント分割や データの受け渡しを意識した記述にリファクタリングしながら知識習得していくな。 React.jsで一覧テーブルを表示する まず表示させてから追って解説してく感じにするな。 今あるjs/Home.jsを下記のようにそっくり入れ替えてOKやで。 Home.js import React　from 'react'; import { Button, Card } from '@material-ui/core'; import { makeStyles, createStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import purple from '@material-ui/core/colors/purple'; //スタイルの定義 const useStyles = makeStyles((theme) => createStyles({ card: { margin: theme.spacing(5), padding: theme.spacing(3), }, table: { minWidth: 650, }, tableHead: { backgroundColor: purple['A100'], }, })); //ヘッダーのコンテンツ用の配列定義 const headerList = ['名前', 'タスク内容', '編集', '完了']; function Home() { //定義したスタイルを利用するための設定 const classes = useStyles(); return ( <div className="container"> <div className="row justify-content-center"> <div className="col-md-10"> <div className="card"> <h1>タスク管理</h1> <Card className={classes.card}> {/* テーブル部分の定義 */} <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple table"> {/* ヘッダー部分 */} <TableHead className={classes.tableHead}> <TableRow> {headerList.map((item, index) => ( <TableCell align="center" key={index}>{item}</TableCell> ))} </TableRow> </TableHead> {/* ボディ部分 */} <TableBody> <TableRow> <TableCell align="center">モーリー</TableCell> <TableCell align="center">肩トレ</TableCell> <TableCell align="center"><Button color="secondary" variant="contained">編集</Button></TableCell> <TableCell align="center"><Button color="primary" variant="contained">完了</Button></TableCell> </TableRow> <TableRow> <TableCell align="center">ドンキーコング</TableCell> <TableCell align="center">バナナ補給</TableCell> <TableCell align="center"><Button color="secondary" variant="contained">編集</Button></TableCell> <TableCell align="center"><Button color="primary" variant="contained">完了</Button></TableCell> </TableRow> </TableBody> </Table> </TableContainer> </Card> </div> </div> </div> </div> ); } export default Home; ビルド $ make npm-dev これで一旦localhostにアクセスしたら表示はできるようになったと思うわ いきなり貼っつけてなんやんねんって感じやろうから上のコードについてこれから説明行くで makeStylesとcreateStylest Home.js import { makeStyles, createStyles } from '@material-ui/core/styles'; @material-uiを使うためにimportしてるね。 makeStylesとcreateStylesはReactで使えるcssをいい感じに当てるために使うもんやと思っといていいと思う。 importする → useStylesを定義 → コンポーネント内でuseStyles()する → classNameに指定する って感じで使えるで。 cardって定義したやつに注目すると下記みたいになってるで //cardに関係ある部分だけ抜粋 import { makeStyles, createStyles } from '@material-ui/core/styles'; //import ↓ const useStyles = makeStyles((theme) => createStyles({ card: { //useStylesとして定義 margin: theme.spacing(5), padding: theme.spacing(3), }, ↓ function Home() { const classes = useStyles(); //Homeコンポーネント内でclassesとして定義 ↓ <Card className={classes.card}> //classNameに指定 理屈が知りたい人はMaterial-UIの公式ドキュメントをしっかり読めばいいと思うけど、 使っていくうちになれるから、このへんはなんとなくこんなふうに定義して呼び出すんやなーと思っといたら大丈夫やと思うわ。 適当に別のスタイル定義してコンポーネントに当てたりしてUI変えてみると理解深まると思うで TableのStyleについて これもmaterial-UIのコンポーネントを呼び出して使ってる感じ屋根 import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; これも公式ドキュメントにそれぞれのコンポーネントについてわかりやすく解説してあるから、 コンポーネントごとの詳細な仕様とかはそっち見てもらったらいいと思うわ https://material-ui.com/ja/components/tables/ Home.js ---------------------------- <Table className={classes.table} aria-label="simple table"> {/* ヘッダー部分 */} <TableHead className={classes.tableHead}> <TableRow> {headerList.map((item, index) => ( <TableCell align="center" key={index}>{item}</TableCell> ))} </TableRow> </TableHead> {/* ボディ部分 */} <TableBody> <TableRow> <TableCell align="center">モーリー</TableCell> <TableCell align="center">肩トレ</TableCell> <TableCell align="center"><Button color="secondary" variant="contained">編集</Button></TableCell> <TableCell align="center"><Button color="primary" variant="contained">完了</Button></TableCell> </TableRow> <TableRow> <TableCell align="center">ドンキーコング</TableCell> <TableCell align="center">バナナ補給</TableCell> <TableCell align="center"><Button color="secondary" variant="contained">編集</Button></TableCell> <TableCell align="center"><Button color="primary" variant="contained">完了</Button></TableCell> </TableRow> </TableBody> </Table> -------------- 構成を抜き出すと下記の構成になってるね。 Home.js <Table className={classes.table} aria-label="simple table"> <TableHead> </TableHead> <TableBody> </TableBody> </Table> その他style Home.js import Paper from '@material-ui/core/Paper'; import purple from '@material-ui/core/colors/purple'; 色とかデザイン関連のものも呼び出して使える感じやね。 ヘッダーに使用しているmapメソッドについて理解する mapはReact使ってると理解必須やし頻繁に出てくるから理解しいくで ヘッダーに関係あるところだけ抜き出すと下記の様になるな Home.js //ヘッダーのコンテンツ用の配列定義 const headerList = ['名前', 'タスク内容', '編集', '完了']; ↓ {/* ヘッダー部分 */} <TableHead className={classes.tableHead}> <TableRow> {headerList.map((item, index) => ( <TableCell align="center" key={index}>{item}</TableCell> ))} </TableRow> </TableHead> 配列で渡ってくるコンテンツをmap()で回しながら、TableRowのなかで 存在する数だけをつくっているな mapで生成される結果については以下やな(上のコードと見比べてみてや) Home.js <TableRow> <TableCell align="center" key="0">名前</TableCell> <TableCell align="center" key="1">タスク内容</TableCell> <TableCell align="center" key="2">編集</TableCell> <TableCell align="center" key="3">完了</TableCell> </TableRow> map()で書くとコードがスッキリするし、数が不確定データが渡ってくることを想定すると よく使うからmap()が分からん人はしっかり理解しとくといいで。 その上で何やけどテーブルのボディ部分についても現状TableCellを手続き的に書いていってるねんけど、ここも、Laravelからデータを受け取る想定のカタチにするためにリファクタリングしていくな。 つぎの部分からHome.jsのコードを変えてていくから差分をわかりやすくするためにコミットしておくで $ git add . $ git commit -m "一覧テーブルの表示" テーブルのボディ部分をデータがバックエンドから渡ってくることを想定した定義にリファクタリング 現状のTableRowの中身は下記の通りやね Home.js <TableBody> <TableRow> <TableCell align="center">モーリー</TableCell> <TableCell align="center">肩トレ</TableCell> <TableCell align="center"><Button color="secondary" variant="contained">編集</Button></TableCell> <TableCell align="center"><Button color="primary" variant="contained">完了</Button></TableCell> </TableRow> <TableRow> <TableCell align="center">ドンキーコング</TableCell> <TableCell align="center">バナナ補給</TableCell> <TableCell align="center"><Button color="secondary" variant="contained">編集</Button></TableCell> <TableCell align="center"><Button color="primary" variant="contained">完了</Button></TableCell> </TableRow> </TableBody> TableBodyの中でTableRowが渡ってくる数だけ繰り返されることになるから、rowをまとめる変数としてrowsを定義して 画像で見るとこんなイメージ 丸した部分のTableCellの中身をオブジェクトにして変数rowsの要素の一つとして扱う感じやね。 じゃあrowsを定義するわ Home.js const headerList = ['名前', 'タスク内容', '編集', '完了']; //headrListの下あたりにrowsを定義する let rows = [ { name: "モーリー", content: "肩トレ", editBtn: <Button color="secondary" variant="contained">編集</Button>, deleteBtn: <Button color="primary" variant="contained">完了</Button>, },{ name: "ドンキーコング", content: "バナナ補給", editBtn: <Button color="secondary" variant="contained">編集</Button>, deleteBtn: <Button color="primary" variant="contained">完了</Button>, }, ]; ボタンは固定やし渡ってくるデータじゃないから切り出す必要あるのかって思うかもしれんけど、後々テーブル部分をコンポーネントとして切り出したときに、外から渡してあげるほうが再利用性が高いから今回は切り出すことにしてるで。 作った配列をTableBodyで展開(map)していくで 旧コードの部分を下記のように変更してや Home.jｓ (旧コード) ----------------------------------------------- </TableHead> {/* ボディ部分 */} <TableBody> <TableRow> <TableCell align="center">モーリー</TableCell> <TableCell align="center">肩トレ</TableCell> <TableCell align="center"><Button color="secondary" variant="contained">編集</Button></TableCell> <TableCell align="center"><Button color="primary" variant="contained">完了</Button></TableCell> </TableRow> <TableRow> <TableCell align="center">ドンキーコング</TableCell> <TableCell align="center">バナナ補給</TableCell> <TableCell align="center"><Button color="secondary" variant="contained">編集</Button></TableCell> <TableCell align="center"><Button color="primary" variant="contained">完了</Button></TableCell> </TableRow> </TableBody> </Table> ↓ Home.js (リファクタリング後コード) ----------------------------------------------- </TableHead> {/* ボディ部分 */} <TableBody> {rows.map((row, index) => ( <TableRow key={index}> //mapで回すときはkeyが必要 <TableCell align="center">{row.name}</TableCell> <TableCell align="center">{row.content}</TableCell> <TableCell align="center">{row.editBtn}</TableCell> <TableCell align="center">{row.deleteBtn}</TableCell> </TableRow> ))} </TableBody> </Table> mapで使う形になったな。 ビルドする $ make npm-dev 表示確認できたな。 rowの中で更にmapする rowの中でも繰り返しが行われている箇所があるね。 それはTableRowの中で列を見たときにTableCellが繰り返されていることがわかると思う。 これはさっき定義したオブジェクトの部分なんやけど、このオブジェクトもmapしていくことにするな。 TableRowの中身を下記のように変更するで Home.js <TableBody> {rows.map((row, index) => ( <TableRow key={index}> {Object.keys(row).map(function(key, i) { return( <TableCell align="center" key={i}>{row[key]}</TableCell> ); })} </TableRow> ))} </TableBody> ちょっとわかりにくいかもしれへんけど rowに対してmapして{name, content, editBtn, deleteBtn}をkeyとして利用している感じやね。 それでもよく分からん人は下記の記事参照すればいいと思うわ map()使ってテーブルの中に展開する記述は現場でよく見るからここで理解しておくことを強くおすすめするね。 ビルドする $ make npm-dev リファクタリングしても表示できることが確認出来たらコミットしておこう $ git add . $ git commit -m "テーブル部分をmap利用するようにリファクタリング" コミットまで出来たらおさらいで、リファクタリング前のコードと見比べてみると復習になると思うで。 データが２つやから恩恵がわからんかもしれんけど、バックエンドからデータが大量に渡される想定で考えたらmapで書いてるほうが扱いやすいはずやわ。 でさらに自分のエディタで変更後のテーブルブブンのソースに着目してほしいねんけど、表示コンテンツが全部変数化されてて固定値が一つもないな。 こーゆー風に表示コンテンツを外からもらう形にすることでテーブル部分だけをコンポーネント化して切り出すことができるねん。 切り出すことで、アプリケーション内の他のページで一覧表を表示したいときに再利用できて 見た目的にも統一感のあるアプリーケーションが作れるようになるで テーブル部分をコンポーネントとして切り出す /conponents/MainTable.jsを作成する componentsディレクトリは現状空ディレクトリとして存在するはずやからそこに作っていくで 切り出すのはの中からで Home.jsから切り取って以下のように設定するで MainTable.js function MainTable() { return ( <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple table"> {/* ヘッダー部分 */} <TableHead className={classes.tableHead}> <TableRow> {headerList.map((item, index) => ( <TableCell align="center" key={index}>{item}</TableCell> ))} </TableRow> </TableHead> {/* ボディ部分 */} <TableBody> {rows.map((row, index) => ( <TableRow key={index}> {Object.keys(row).map(function(key, i) { return( <TableCell align="center" key={i}>{row[key]}</TableCell> ); })} </TableRow> ))} </TableBody> </Table> </TableContainer> ); } export default MainTable; コンポーネントの中身が移動出来たらimport部分とスタイル部分をHome.jsから移してくるで。 HomeとMainTable両方で使ってるものはコピーしてHomeでは使わなくなったものは切り取って来る。 それぞれ↓みたいになるで MainTable.js import React　from 'react'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import purple from '@material-ui/core/colors/purple'; import { makeStyles, createStyles } from '@material-ui/core/styles'; const useStyles = makeStyles((theme) => createStyles({ card: { margin: theme.spacing(5), padding: theme.spacing(3), }, table: { minWidth: 650, }, tableHead: { backgroundColor: purple['A100'], }, })); function MainTable(props) { //定義したスタイルを利用するための設定 const classes = useStyles(); // --------以下は既に移してきているところ return ( <TableContainer component={Paper}> Home.jsに残った部分は以下のようになるで Home.js import React　from 'react'; import { Button, Card } from '@material-ui/core'; import { makeStyles, createStyles } from '@material-ui/core/styles'; import MainTable from '../components/MainTable'; //スタイルの定義 const useStyles = makeStyles((theme) => createStyles({ card: { margin: theme.spacing(5), padding: theme.spacing(3), }, })); // ------------- 以下の部分は変更無し //ヘッダーのコンテンツ用の配列定義 const headerList = ['名前', 'タスク内容', '編集', '完了']; これでコンポーネントの切り出しは出来たで。 ただこれでは動かないから、Home.jsの中でMainTable.jsを使う設定をして MainTable.jsに変数を渡してあげる必要があるで Home.js import React　from 'react'; import { Button, Card } from '@material-ui/core'; import { makeStyles, createStyles } from '@material-ui/core/styles'; import MainTable from '../components/MainTable'; // 追記する ------------------------------------ 　　　　　　　　　　　　　　//テーブルを切り出した部分でMainTableコンポーネントを利用し変数を渡す <h1>タスク管理</h1> <Card className={classes.card}> {/* テーブル部分の定義 */} <MainTable headerList={headerList} rows={rows} /> //追記する </Card> </div> MainTable.js function MainTable(props) { //定義したスタイルを利用するための設定 const classes = useStyles(); //親コンポーネントからpropsで受け取る const {headerList, rows} = props; //追記する部分 return ( <TableContainer component={Paper}> Home.jsにMainTableコンポーネントを呼び出す記述を追加してを呼び出す。 その際にheaderList, rowsを渡して上げる必要がある MainTable.js側では親コンポーネント(Home.js)で渡した変数をpropsとして受け取るで。 この辺の知識が浅い人はReactそのものの基礎知識やから、React単体のチュートリアルとかで知識補っといてな。 ビルドする $ make npm-dev localhostにアクセスして、表示確認できたOKやで コミットしておこう $ git add . $ git commit -m "MainTableコンポーネントとして切り出す" 今回出てきたmap()やコンポーネント間のデータの受け渡しは、React案件では基礎知識になるからわからんかった人はReact単体の学習教材等で知識補ったらええと思うわ。 Material-UIの使い方もマスターしておきたいところやね。 じゃあ次はいよいよ今回の一覧表にLaravel側からデータを渡して表示する部分をやっていくで。 ほなLGTMよろしゅーやで。

0. 概要 この記事は、Laravel8で新しくプロジェクトを作る際の手順や初期設定を記したものである。Auth機能を使用しない場合は「2. Auth機能のインストール」は読み飛ばしてよい。 1. プロジェクトの作成 コマンドプロンプトでディレクトリを移動する。ここではデスクトップに作成する。 cd desktop 移動したディレクトリ上で以下のコマンドを入力し、プロジェクトを作成する。 laravel new プロジェクト名 2. Auth機能のインストール 2.1. jetstreamのインストール コマンドプロンプトで、1で作成したプロジェクト上にディレクトリを移動する。 cd プロジェクト名 移動したディレクトリ上で以下のコマンドを入力し、jetstreamをインストールする。 composer require laravel/jetstream 2.2. livewireのインストール 以下のコマンドでlivewireをインストールする。livewireではなくinertiaをインストールする場合は、該当箇所を書き換えればよい。team機能を利用する場合は、後ろに --teamsを書き加えればよい。 php artisan jetstream:install livewire 2.3. パッケージのビルド 以下のコマンドでパッケージをビルドする。なお、npmコマンドエラーが出る場合は事前にNode.jsをインストールしておく必要がある。 npm install && npm run dev 3. データベースの準備 3.1. データベースの作成 コマンドプロンプトで以下のコマンドを実行する。 mysql -u root -p 以下のようにパスワードを求められるので、入力する。 Enter password: ************* ログインできたら、以下のコマンドでデータベースを作成する。 create database データベース名 character set utf8; 3.2. ユーザーへの権限の付与 root権限で常にアクセスするのはセキュリティの観点から望ましくないので、新しいユーザーを作成してアクセス権限を付与するか、既にあるユーザーにアクセス権限を与えるかするためにroot権限でログインした状態から以下のコマンドを実行する。 grant all privileges on データベース名.* to ユーザー名@localhost identified by 'パスワード'; 後者の場合、identified ~以降は不要である。 3.3. .envとconfig/database.phpの修正 プロジェクト内の.envファイルをテキストエディタで開き、該当箇所を以下のように修正する。 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=データベース名 DB_USERNAME=ユーザー名 DB_PASSWORD=パスワード 同様に、config/database.phpを開いて該当箇所を以下のように修正する。 'mysql' => [ 'driver' => 'mysql', 'url' => env('DATABASE_URL'), 'host' => env('DB_HOST', '127.0.0.1'), 'port' => env('DB_PORT', '3306'), 'database' => env('DB_DATABASE', 'データベース名'), 'username' => env('DB_USERNAME', 'ユーザー名'), 'password' => env('DB_PASSWORD', 'パスワード'), 'unix_socket' => env('DB_SOCKET', ''), 'charset' => 'utf8mb4', 'collation' => 'utf8mb4_unicode_ci', 'prefix' => '', 'prefix_indexes' => true, 'strict' => true, 'engine' => null, 'options' => extension_loaded('pdo_mysql') ? array_filter([ PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'), ]) : [], ], 特に、host, database, username, passwordの4つが正しいことを確認する。 3.4. マイグレーションの実行 カレントディレクトリがプロジェクト上にあることを確認し、以下のコマンドでマイグレーションを実行する。 php artisan migrate 成功すれば、usersテーブルを含む6つのテーブルが作成されていることが確認できる。 4. その他の設定 このままだと「Target class [〇〇] does not exist.」というエラーが出てしまうので、app/Providers/RouteServiceProvider.phpを開き、該当箇所を以下のように修正する。具体的には、「public function boot()」の上に、「protected $namespace = 'App\Http\Controllers';」を追加する。 protected $namespace = 'App\Http\Controllers'; public function boot() { $this->configureRateLimiting(); $this->routes(function () { Route::prefix('api') ->middleware('api') ->namespace($this->namespace) ->group(base_path('routes/api.php')); Route::middleware('web') ->namespace($this->namespace) ->group(base_path('routes/web.php')); }); }

Laraelでアプリケーションを作成したときに一気にできるフォルダについて、何をどこに記載すればいいかわからなくなることがあるため、参考程度にフォルダやファイルの役割を記載しておきます。 動作環境 macOS Big Sur MacBook Air (M1, 2020) Laravelで新規プロジェクトを作成する terminalからコマンドを打つことでlaravelを使った新規プロジェクトを自動で作成することができます。 プロジェクトを作成したいディレクトリに移動し、以下のコマンドを打ちます。 新規プロジェクト作成 compsoer create-project laravel/laravel sampleapp --prefer-dist Laraelのフォルダ構成 作成したプロジェクトの直下のファイル群 ファイル名 ファイルの内容 [.editorconfig] テキストファイルを編集・保存する際にインデントや改行コードを設定したものに統一するための設定情報 [.env] [.env.example] 動作環境に関する設定情報 [.styleci.yml] PHPやJS、CSSのフォーマットをチェックし、自動で整形可能なサービスの設定情報 [.gitattributes] [.gitignore] git利用に関する情報 [artisan] artisanコマンド(php artisan serveで使ったもの) [composer.json] [composer.lock] composerの利用に関するもの [package.json] JavaScriptのパッケージ管理ツール(npm)で利用するもの [phpunit.xml] PHPUnit(ユニットテストプログラム)に関するもの [server.php] サーバー起動時に利用されるプログラム [webpack.mix.js] webpackというJavaScriptパッケージツールで使うもの 作成したプロジェクトの直下のフォルダ群 フォルダ名 フォルダの内容 app アプリケーションのプログラム部分がまとめられるところ。アプリケーションの開発時には、ここに必要なスクリプトファイルを追加していきます。 bootstrap アプリケーション実行時に最初に行われる処理がまとめられています。 config 設定関係のファイルがまとめられています。 database データベース関連のファイルがまとめられています。 public 公開フォルダです。JavaScriptやスタイルシートなど、外部にそのまま公開されるファイルはここにまとめられています。 resources リソース関係の配置場所です。プログラムが利用するリソースファイルが用意されます。プログラムのテンプレートファイルなどが用意されます。 routes ルート情報の保存場所です。アクセスするアドレスに割り当てられるプログラムの情報などがが記されています。 storage ファイルの保存場所です。アプリケーションのプログラムが保存するファイルなどが置かれます。ログファイルなどはここに保存されます。 tests ユニットテスト関係のファイルが用意されます。 vendor フレームワーク本体のプログラムがまとめられています。 appフォルダ直下のフォルダについて 主に作業することになるappフォルダについてはさらに詳しく記載しておきます。 フォルダ名 フォルダの内容 [Console] コンソールプログラムを配置するところです。 [Exceptions] 例外に関する処理を配置するところです。 [Http] これが、Webアプリケーションにアクセスしたときの処理をまとめておくところです。アプリケーションの基本的なプログラムはここに作成します。 [Providors] プロバイダと呼ばれるプログラムを配置します。 [Models] モデルと呼ばれるプログラムを配置します。 作成したプロジェクト直下のroutesフォルダについて apiを作るにあたって重要になるルーティングという機能についての設定情報はこちらにまとめます。 バックエンドの開発では頻繁に作業することになるので詳しく記載しておきます。 ファイル名 ファイルの内容 [api.php] APIのルーティングです。例えばユーザー認証などのように、プログラムないから利用するAPIの機能を特定のアドレスに割り当てるの利用されます。 [channels.php] ブロードキャストチャンネルのためのルーティングです。 [console.php] コンソールプログラムのためのルーティングです。 [web.php] これが、一般的なWebページとしてアクセスするためのルーティングです。

はじめに LaravelでCSVインポートし、DB登録する処理を実装するために、Goodby CSVライブラリを インストールし、いざ実装したところ、以下のようなエラーが出てしまった。 Column size should be 7, but 6 columns given エラー解決方法 CSVファイルの中身を確認したところ、列数が通常だと7列あるべきところ、6列となっている ところがあったため、エラーが返ってきたようだ。 githubにもしっかり書かれていました。英語読めるようになりたい、、、 解決方法① unstrict()を追加すると厳密な列数のチェックが行われないようになる。 $interpreter = new Interpreter(); $interpreter->unstrict(); //追加 解決方法② 例外を投げる。こちらの方法のほうがより現実的？ use Goodby\CSV\Import\Standard\Exception\StrictViolationException ~省略~ try { $lexer->parse($tmpPath, $interpreter); } catch (StrictViolationException $e) { // 例外処理を書く } 参考 https://github.com/goodby/csv