はてなブックマーク

SSR、SSG、ClientSideRenderingの違いについて言語化。Next.jsチュートリアルの説明が個人的に一番わかりやすい。Pre-rendering and Data Fetching Client Side Rendering 「Client Side Rendering = SPA」の文脈で使われることが多い気がする。 ブラウザ上でJavaScriptを実行してDOMを生成、マウントし、コンテンツを表示させる。SPAアプリの場合、以下のような中身が空のHTMLファイルを使うことが多い。 上記のHTMLファイルはルートディレクトリ直下に置くのが普通なため、/以外にリクエストが送られると404となる。開発時はwebpack-dev-serverがよしなに面倒を見てくれるが、ホスティング先ではそうではないので、初めてSPAでアプリを作ってホスティングしたときに戸惑うやつ。 な

LaravelのAPI開発で、複数ロールのユーザーの認証を行いたい場合があります。一般ユーザーはadminページにはアクセスできない、みたいな感じです。 上記のケースで、JWTを使う場合にどう書くのかをまとめました。1から10まで全部書くと結構な量になるので、要点だけ抜き出して書いていきます。 JWT認証の方法については、以下の記事を参考にさせていただきました。 Laravel + Jwt Auth で認証付きWebAPIを作る jwt-authのインストール まず、JWT認証の環境を整えるために、composerでjwt-authをインストールします。

モーダルを作る際に面倒なのが、スクロールしたときの背景の固定。 別に背景が動いても直接問題が起きることはないのですが、やっぱり気にはなります。ユーザーにもこのサービス大丈夫かな...と余計な不安感を与えることにもなりますし。 ただ、この背景固定、一筋縄ではいかないのが面倒なところ。とくにiOSは他のデバイスと異なる挙動を示し、AndroidやWebではちゃんと固定されるのにiOSだけ上手くいかない...と悩んでいる人も多いと思います。 何か解決方法はないかと探していたところ、非常に便利なライブラリを見つけたので、それで対応することにしました。 Body Scroll Lockを使う 名前の通り、機能を有効にすることで背景のスクロールを無効にできるライブラリです。便利なのは、ページ全てをスクロール無効にするのではなく、指定したDOM内部だけはスクロールできるように設定できること。 モーダル内

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンドに興味があって、Vueをやってみたい...!という人、きっと多いかと思います。（きっと、きっとね） ただ、どうやってVueを勉強し始めればいいのかわからない、という人もまた多いはず。Javascript自体あんまり触ったことないし...って人もいると思います。 そこで、これからVueを新たに勉強する人向けに、何を、どの順番で勉強すればいいのかの道しるべ的なものを書いていきます。 対象読者はこんな感じ。 ・RubyやPHPはよく書くけど、Javascriptあんまよくわからない ・jQueryチョット書ける ぜひ参考にしても

昨日、Wordpressで運営していたブログをGatsbyに移行させる作業を行いました。（といっても、中身を写しただけなのでデザインはデフォルトのままですが・・・） 29歳未経験からエンジニア始めました その途中、いくつかハマったポイントがあったので、移行手順と合わせて解説していきます。 Gatsbyとは GatsbyはReactベースの（静的）サイトジェネレータです。詳しくはこの記事を見てください。超わかりやすいです。 Reactベース静的サイトジェネレータGatsbyの真の力をお見せします ざっくり言うと、Wordpressで構築していたブログやLPをReactで構築できるよってことです。Wordpressの便利なダッシュボード画面はありませんが・・・ Wordpressと比較した場合のメリット・デメリットを箇条書きにすると、こんな感じです。 メリット SPAで構築できる Reactで