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

最近新しいことを勉強したいので、REACT JSというフロントエンドJavaScriptライブラリを勉強始めました。

今回は、自分のOSにReactJSをセットアップする方法を紹介します。

MacOSにReactJSをインストールするためには、まずNodeJSとNPMがインストールされている必要がありますので、以下のようにチェックしてみます。

node --version
npm --version

こうすると、NodeJSとNPMのバージョンが返されます。

React JSとReact-domを1つのコマンドでインストールする

ことで、NodeJSとNPMがインストールされたので、プロジェクトにReactJSと React-domをインストールすることができるはずです。

npm install --save react react-dom

React JSプロジェクトの作成

ReactJSもインストール終わったところ、新しいプロジェクトを作成することができます。

npx create-react-app my-react-project

このコンマドが「my-react-project」という名で新しいプロジェクトを作成されます。ディレクトリが以下のような感じになります。

JSXの紹介

index.jsを少し変更し、JSXを適用してみました。

このJSXの構文は、HTMLに似ているように見えますが、HTMLではありません。

const navbar = (
    <nav>
      <h1>My frist React</h1>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
);

Reactはユーザーインターフェースの仮想的な表現（Virtual DOMと呼ぶ）を作成し、ReactDOMはそのVirtual DOMに基づいてDOMを効率的に更新するライブラリです。

というわけで、ReactとReact-domをインポートすることにします。

import React from 'react';
import ReactDOM from 'react-dom';

最後に、このReactをdomにrenderするために、このReactDOM.render関数を呼び出します。rootIDはindex.htmlファイルに既に記述されています。react-projectを作成したら、index.htmlも確認してみて下さい。

ReactDOM.render(element, root);
ReactDOM.render(navbar, document.querySelector('#root'));

最後に、reactプロジェクトの中に入ったら、以下のコマンドを実行して、「localhost:3000」で開発用サーバーを起動し、実行します。

npm start

そうすると結果は：

はい。今回はこれで終わりです。

By Ami

Tweet

max_allowed_packet is the maximum size of a MySQL network protocol packet that the server can create or read.

The maximum packet that can be sent and received from the MySQL8.0 server or client is 1 GB.

When the MySQL client or mysqld server receives a packet larger than max_allowed_packet bytes, it issues an ER_NET_PACKET_TOO_LARGE error and closes the connection. For some clients, if the communication packet is too large, the connection to the MySQL server may be lost during a query error.

Both the client and the server have their own max_allowed_packet variable, so if you want to handle large packets, you need to increase this variable.

Updating max_allowed_packet

You can change in the my.ini or ~/.my.cnf file depending on your OS and installation. For example

max_allowed_packet=500M

You can also update the value by running a query.

Firstly, you can check what’s the default value you have using this.

SHOW VARIABLES WHERE variable_name = 'max_allowed_packet'

You can update the value using this.

SET GLOBAL max_allowed_packet=1073741824;

These are the ways to update your max_allowed_packet config. But there is always a thing which is your code. You have to make sure your code is not doing anything wrong to exceed this value.

For example, if you are using session driver to mysql and you are adding large data to session once, there might have an exception , fatal error regarding with max_allowed_packet. Same concepts applied for the query cases.

To solve above kind of session issues, you can change your session driver or you can manage something else (Eg. tmp storage) to store your data.

I hope you get something from this article.

Yuuma

Tweet

今回は、tailwind cssという美しいUIコンポーネントライブラリを使って、laravelプロジェクト内にシンプルなカレンダーを作成する方法をご紹介します。

新規プロジェクトの作成

Laravelのプロジェクトがまだない場合は、新規に作成することから始めます。最も一般的な方法は、Laravelインストーラーを使用することです。

laravel new example-app
cd example-app

Tailwind CSSのインストール

tailwindcssをnpmでインストールしたら新しいtailwind.config.jsファイルを作成したことを確認できます。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Laravel Mixの設定にTailwindを追加する

webpack.mix.jsファイルに、tailwindcssを追加します。

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
  ]);

テンプレートパスの設定

tailwind.config.jsファイルに、すべてのテンプレートファイルへのパスを追加します。

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSSにTailwindディレクティブを追加する

./resources/css/app.cssファイルに以下のことを追加します。

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

ビルドプロセスの開始

npm run devでビルドプロセスを実行します。

npm run dev

プロジェクトでTailwindを使い始める

コンパイルされたCSSを<head>に追加します。以下はカレンダー用のシンプルなtailwindのcssです。

<div class="mt-8 flex items-center justify-center">
        <div class="datepicker relative form-floating mb-3 xl:w-96">
          <input type="text"
            class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
            placeholder="Select a date" />
          <label for="floatingInput" class="text-gray-700">Select a date</label>
        </div>
      </div>

本日は以上となります。

最後までご高覧頂きまして有難うございました。

By Ami

Tweet

今回はDataTablesを使用したテーブル生成方法とサーバーサイド連携方法をシェアしたいと思います。
前回の記事「DataTablesを使用したテーブル生成とサーバーサイド連携(2)」で作成した動作確認用のスクリプトを実行して動作確認をおこないます。

Tweet

Today I would like to share some laravel tips and tricks. Let’s take a look.

Use Carbon with Only Hours

If you want to have a current date without seconds and/or minutes, use Carbon’s methods like setSeconds(0) or setMinutes(0).

echo now();

// 2022-02-14 02:12:34

echo now()->setSeconds(0);

// 2022-02-14 02:12:00

echo now()->setSeconds(0)->setMinutes(0);

// 2022-02-14  02:00:00

// Another way – even shorter

echo now()->startOfHour();

Generate Images with Seeds/Factories

Normally, We use Faker to generate fake text values in seeds and factories. But do you know that you can generate not only text values but also Images by Faker?

For example: See image field here – it will generate 100×100 image:

$factory->define(User::class, function (Faker $faker) {

    return [

        ‘name’ => $faker->name,

        ‘email’ => $faker->unique()->safeEmail,

        ‘email_verified_at’ => now(),

        ‘password’ => bcrypt(‘password’),

        ‘remember_token’ => Str::random(10),

        ‘Image’ => $faker->image(storage_path(‘images’), 100, 100)

    ];

});

Simple Pagination

In pagination, if you need just “Previous/next” links instead of all the page numbers (and have fewer DB queries because of that), You can do this easily by changing paginate() to simplePaginate():

// Instead of

$products = Product::paginate(8);

// Now you can do this

$products = Product::simplePaginate(8);

Use @auth in Blade

Instead of an if-statement to check logged-in users, You can use the @auth directive in your blade file.

Old way:

@if(auth()->user())

    // The user is authenticated.

@endif

Latest:

@auth

    // The user is authenticated.

@endauth

The opposite is @guest directive:

@guest

    // The user is not authenticated.

@endguest

Check the view file exists

You can check if the View file exists before actually loading it.

if (view()->exists(‘admin.dashboard’)) {

 // Load the view

}

You can even load an array of views, and only the first existing will be loaded.

return view()->first([‘admin.dashboard’, ‘dashboard’], $data);

Create migration without underscore _ symbol

When you are running a make:migration command, you don’t necessarily have to write underscore _ symbol between parts, like create_users_table.

// with underscore _ symbol

php artisan make:migration create_users_table

You can enter the name into quotes and then utilize spaces instead of underscores.

// without underscore _ symbol

php artisan make:migration “create users table”

Use Auth::once()

Do you know that you c an log in with the user only for One Request? You can easily do this by utilizing the method Auth::once(). No sessions or cookies will be used, which indicates this method may be applicable when building a stateless API.

if (Auth::once($credentials)) {

    //

}

Use @canany to check multiple permissions at once

Earlier, You use the @can directive to check if a user has a certain permission. Now, you can also check multiple permissions at once with the @canany directive.

@canany([‘update’, ‘view’, ‘delete’], $blog)

    // The current user can update, view, or delete the blog post

@elsecanany([‘create’], \App\Blog::class)

    // The current user can create a blog post

@endcanany

This is all for now. Hope you enjoy that.

By Asahi

Tweet