Laravel Bootcamp始め

Laravel Bootcamp

Bootcampを始めていきます。
https://bootcamp.laravel.com/
 

記述は英語のみのようです。日本語版を探しましたが見つかりませんでした。
英語と言っても難しくないのでGoogle翻訳を使いながら進めていきます。

01. Introduction
Chirper と呼ばれるマイクロブログ プラットフォームを構築します。
だそうです。

マイクロブログ？
聞いたことがないです、ググると
「ユーザーが短いテキスト（通常200字以下）を書いて、それを公開することを可能にし、誰にでも見られるようにするか限られたグループにだけ見られるようにするかをユーザーが設定できる形態のブログ」
https://en.wikipedia.org/wiki/Microblogging
ん？それってTwitterじゃないのかと思ったら

「もっとも目立っているのがTwitterだ。それに加えて、FacebookとBeboなど多くのソーシャルネットワークが、ステータスを更新できる似たようなサービスを取り入れている。この市場は活気があり、これからもその熱は上がりそうだ。」
ああ、そういう言い方をするんですね。
SNSとはまた違うのかな？

Choose your own adventure:

Blade or JavaScript

フロントエンドとしてBladeかJavaScriptかを選べるようです。
 

1. Blade

Bladeは、Laravelでビューを作るために用意されたテンプレートエンジン です。
中身はほぼ、HTMLです、それに加えてHTMLの中で変数を使用したりif文やfor文を埋め込むことができます。
MVCモデルでModel層で処理したデータをBladeに渡して処理して最終的にクライアントに返すHTMLレスポンスを生成します。
ファイルの拡張子は".blade.php"になります。

またTailwind CSS が使えるようです。
名前を聞いたことはありますが詳細は不明なので、この機会にチェックしておきます。
https://udemy.benesse.co.jp/development/system/tailwind-css.html

『Tailwind CSS』とは、Utility First（ユーティリティファースト）をコンセプトに設計されたCSSフレームワークのことです。
Tailwindは“テールウィンド”と読み、CSSフレームワークです。

ユーティリティファーストというのは良くわかりませんが、カスタマイズ性が高いようです。実際のコードサンプルを見てみると、お、これはいいかも

  <p class="bg-white">文字</p>

少しWebアプリのコーディングしたことがありますが、HTMLファイルとCSSファイルが分かれていて規模が大きくなってくると、CSSのプロパティがどのHTMLのどこに当てているのか段々混乱してきます。
HTMLソースに直接かけるのは良いですね。

Tailwind CSSが私には合わなかった理由
https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html
という意見も見つけましたが気にせず、まず使ってみることにします。

ユーティリティファーストとは？

ユーティリティファーストとは、CSSは使わずにTailwind CSSが提供しているクラスのみを使用してスタイリングする考え方のことです。rounded-fullやtext-transparentなど、クラスを追加するだけで定義できるため、コードの量が少なくなります。

ああ、CSSを使わないスタイルをユーティリティファーストと呼ぶのですね。

Tailwind CSS vs Bootstrap

Bootstrapは名前くらいは聞いたことがありますが、CSSフレームワークだったんですね(^^;)

Bootstrapは、動きをつけたい場合でもJavaScriptの知識が不要です。一方、Tailwind CSSはユーティリティクラスが準備されているだけなので、動きを加える際はJavaScriptで一から実装しなければなりません。

また、BootstrapはCSSの知識が必要なく、触れる機会も少ないです。一方、Tailwind CSSは、このクラスはどのようなCSSプロパティに該当するのか調べたりすることが多いため、自然にCSSの知識を身につけられます。

なるほど、CSSの知識はあった方が良いですし、Tailwind CSSの方が良さげな気がします。

2. JavaScript & Inertia

JavaScript を使用したい場合は、Vue と React の両方のコード サンプルを提供します。 また、Inertia を使用してすべてを接続し、Tailwind CSS を使用して見栄えを良くします。

だそうです。

実はReactは以前入門をやって挫折した経験があります。
大分前ですが、Reactの独特の実装方法が分からなかったのと他のライブラリとの接続が最後までわからなかった。
Vueは直接触ったことはないですがプロジェクトで使ってましたね。

どっちも私にとってはわかりずらい（と感じる）のでまずはBladeを使った方のフローに進むことにします。