開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

今回は、Laravelアプリケーションに必要不可欠なCRUD操作を、LivewireとJetstreamのパッケージを使って簡単に作成する方法を紹介します。

プロジェクトの設定

新しいlaravelアプリをインストールするので、ターミナルに向かい、コマンドを入力し、新しいlaravelアプリを作成します。

composer create-project --prefer-dist laravel/laravel laravel_livewire_crud

.envでデータベースの詳細を追加する

Modelファイル、Migrationファイルの作成

php artisan make:model Student -m

例え：
app/Models/Student.phpファイルに$fillable配列を追加し、名前、メール、携帯電話などのテーブルの値を追加します。

また、学生用のmigrationテーブルを設定する必要があります。

LivewireとJetstreamのパッケージのインストール

composer require laravel/jetstream

php artisan jetstream:install livewire

さらに、アセットをコンパイルする必要があるので、両方のnpmコマンドを同時に使用して、ビルドコンパイルタスクを完了させます。

npm install && npm run dev

最後に、php artisanコマンドを使用して移行を実行します。

php artisan migrate

Livewireのcrudコンポーネントを生成するため

php artisan make:livewire crud

上記のコマンドを実行すると、2つのファイルが生成されました。

ルートの作成

Route::get('students', Crud::class);

最初のページに生徒のリストを表示したいので、render関数で全生徒のデータを取得します。

生徒を作成するため、
ボタンに wire:click=”create()” というアクションを追加します。

<button wire:click="create()"
                class="my-4 inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base font-bold text-white shadow-sm hover:bg-red-700">
                Create Student
 </button>

学生の作成をモデルフォームとしてデザインしたいので、いくつか条件を追加します。True を指定するとモデルボックスが開き、False を指定するとモデルボックスが閉じます。

生徒を保存するため、
ボタンに wire:click.prevent=”store()” というアクションを追加します。

<button wire:click.prevent="store()"  type="button"
                            class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base 
                            leading-6 font-bold text-white shadow-sm hover:bg-red-700 focus:outline-none 
                            focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                            Store
</button>

updateOrCreateを使用して、保存と更新の両方の関数を作成することにします。

学生の編集を行うには
ボタンに wire:click=”edit({{ $student->id }})” というアクションを追加します。

後学生の削除を行うには
ボタンに wire:click=”delete({{ $student->id }})” というアクションを追加します。

<button wire:click="edit({{ $student->id }})"
                                class="flex px-4 py-2 bg-gray-500 text-gray-900 cursor-pointer">Edit</button>
<button wire:click="delete({{ $student->id }})"
                                class="flex px-4 py-2 bg-red-100 text-gray-900 cursor-pointer">Delete</button>

編集と削除を行うために、生徒のデータを取得して、削除機能は生徒のデータを削除します。

その結果は

学生一覧

学生を作るために

学生を編集するには

最後までお読みいただき、ありがとうございました。

By Ami

今回はUnityのUIコンポーネント[ドロップダウン]の使用方法についてシェアしたいと思います。

続きを読む

While writing technical development articles you will often show some code blocks. You can either take a screenshot of your favorite IDE while it shows the code or you can use the simple Medium code formatting by pressing ```. But instead of using any of those two approaches, I would suggest using any or all of the websites presented within this article.

1. GitHub Gists

The main website to create code blocks is GitHub Gists. You can simply go to https://gist.github.com and add your code into the Gist. Also, you can add multiple files to one single Gist and use them independently in your article.

2. carbon.now.sh

This website is really simple. You can log in with your GitHub profile and start creating snippets. Go to and insert your code. It will be automatically saved into your profile and can be accessed by the URL.

As an example,  https://carbon.now.sh/XHGvwhmthQjAZLJAWNoA

The content will look like this in Medium:

3. JSFiddle

JSFiddle is a famous javascript code playground where you can test your HTML, CSS, and JS in the browser.

Additionally, these code blocks can be imported into Medium as an embed. Within Medium you will have one block with a tab menu that can be switched.

I use this fiddle as an example: https://jsfiddle.net/paulknulst/odLg3qu1/

As you can see you can switch between JavaScript, HTML, CSS, and Result. Within Result, you can see the outcome after the three “files” are combined and run by jsfiddle.net.

4. Codepen.io

Codepen is comparable to JSFiddle. You can also add HTML, CSS, and JS and import them into Medium.

I use this as an example: https://codepen.io/paulknulst/pen/NWaXwdW

As you can see you can switch between JavaScript, HTML, CSS, and Result. It looks different from JSFiddle but contains the same information.

5. Codesandbox.io

With Codesandbox.io you are able to create complete sandboxes for your project that will run within the browser.

If you start with this website you can choose a sample sandbox from a list of predefined sandboxes

After you choose your template all needed files will be created and you can change them in the integrated IDE and see the result in an embedded browser window.

I really hope you find this article helpful and can use any of the websites in your development articles.

Tsuki

拝啓　年の瀬も押し詰まり、ご多用のことと存じ上げます。
さて、誠に勝手ながら、弊社の年末年始の営業は、下記のとおりとさせていただきます。
皆様にはご迷惑をお掛けしますが、何卒ご容赦願います。
今年一年ご愛顧を賜りまして大変感謝申し上げますと伴に、皆様のご多幸をお祈りいたします 。

敬具

記

年内営業　　　令和3年12月28日　13：00まで
年始営業　　　令和4年1月5日　10：00より

Today I would like to share about useful packages of Nodejs. The followings are a collection of some useful packages for Nodejs. Let’s take a look.

Web Frameworks

express

Express is the most popular, fast, and minimalist web framework for node.js backends.

socket.io

Socket.IO enabled real-time bidirectional event-based communication using long-polling or webSockets with disconnection detection and auto-reconnection support.

Utility Functions

async

Async is a module with powerful utility functions for working with asynchronous JavaScript.

rxjs

RxJS is a modular set of libraries to compose asynchronous and event-based programs using observable collections and compositions in JavaScript.

lodash

Lodash is a utility library that makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.

underscore

Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter, etc.) without extending any core JavaScript objects.

ramda

Ramda is a practical, functional library with side-effect free functions composable with currying.

validator

Validator is a library of string validators and sanitizers.

day.js

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment-compatible API.

date-fns

Date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

jsonwebtoken

Jsonwebtoken is a library to sign, verify and decode JSON Web Tokens.

bcrypt

Bcrypt is a library to hash and verify passwords with sync, callbacks, and promise interface.

uuid

UUID is a library to create RFC4122 universally unique identifiers.

Working With File System

fs-extra

FS-extra adds file system methods that aren’t included in the native fs module and adds promise support to the fs methods.

mkdirp

Just like mkdir -p, mkdirp recursively creates the directory and all necessary subdirectories.

glob

Glob is a library to match files using multiple patterns.

Working with Emails

Nodemailler

Nodemailer is a secure framework that handles email management in your Node.js applications.

This is all for now.

Hope you enjoy that.

By Asahi