Programming

Next.jsではいろんなCSSフレームワークが使えます。CSS ModuleやTailwindCSSやcss-in-jsなど。この中で一番おすすめはCSS Moduleです。使いやすく、保守性も高く、コンポーネントと相性がいいものになってます。

Javascript Programming

Reactでスクロール量に応じたアニメーションを実装する場合、react-intersection-observerライブラリを使います。これを使うと「要素が見えた時にフェードインする」などの機能を実装できます。

Programming

ホームページ制作するときに使うプログラミング言語は2パターンあります。PHP、WordPressを使うか、React.js、Next.jsを使うかです。HTML, CSS, Javascriptは必須ですが、残りは好きな方で大丈夫です。

css Javascript Programming

スクロールで背景や文字が動くパララックスをJavascript (jQuery)で実装するのは意外と簡単です。スクロール量に応じてtransformプロパティを変更して要素を動かすだけです。こうすると、奥行きが生まれ、カッコいいwebページができます。

Blog Wordress

WordpressをNext.jsと組み合わせてヘッドレス化させました。1.スターターキットを導入, 2.プラグインを導入&設定 3.Vercelデプロイする。ヘッドレス化は表示速度が爆速になるのでかなりおすすめです。

Blog

Laravel + ReactでSPAのSNS認証を解説します!Socialiteを使えば特に難しいことはなく、だれでも簡単に実装可能です。

Blog

SPAだとリロードがないため、ユーザーが認証済みかどうかでアクセスを分けるのが少し難しくなります。初回ローディングで認証情報を取得し、それをフックで取得し、ログインなどの処理と同時に認証情報を更新することで解決できます。

Blog

React jsはjavascriptのフレームワークです。これだけでWebページ・サービスを作ることができます。コンポーネント指向、高速でwebページを作成するためのライブラリが揃っている、パフォーマンスが良いというメリットがあり、使い勝手抜群です。

css Programming

Bootstrapは初心者には少しややこしいですが、2つの使い方を覚えるだけで問題ないです。Bootstrapの2つの使い方は、余白(padding,margin)とグリッドレイアウトです。

css Programming

FLOCSSはCSS設計の1つです。FLOCSSはComponent, Layout, Projectの3つに機能を分割していきます。FLOCSSの使い方を学ぶと読みやすく修正しやすいコードを書くことができます。