Hello, World!!

むずかしいことはかけません

現在日時と比較して「○分前」と表示させたい

Laravel PHP

CarbonライブラリにあるdiffForHumans()メソッドを使えばOK

$ php artisan tinker
Psy Shell v0.10.4 (PHP 7.4.10 — cli) by Justin Hileman
>>> now()->diffForHumans(now()->subDays(2)->subMinutes(2));
=> "2日後"
>>> now()->subDays(2)->subMinutes(2)->diffForHumans();
=> "2日前"
>>> now()->subMinutes(2)->diffForHumans();
=> "2分前"

now()->subDays(2)->subMinutes(2) のところをEloquentにしてあげれば
以下のような書き方でbladeファイル内で「○分前」と表示させることができます。

$notification->created_at->diffForHumans();

ちなみにこの書き方のみだと3年前、10年前とも表示されてしまうので
ある一定期間より前の投稿なら日付を表示させる処理は以下になります。

<div>
  @if ($notification->created_at->diffInDays(now()) <= 3)
    {{ $notification->created_at->diffForHumans() }}
  @else
    {{ $notification->created_at->isoFormat("YYYY/MM/DD") }}
  @endif
</div>

【Mac】Springでのプロジェクト作成

mac Spring

javaのビルドツールはMavenを使い、プロジェクトを作成する方法を紹介します

プロジェクト作成コマンド

mvn -B archetype:generate -DgroupId=edu.self -DartifactId=my_first_spring_boot -Dversion=1.0.0-SNAPSHOT -DarchetypeArtifactId=maven-archetype-quickstart

以下のコマンドでも作成できますが、そうするとグループID、アーティファクトID、バージョン、パッケージといったものを尋ねてくるので前もってコマンドで指定しておくのも手です

-DarchetypeArtifactId とは

使用するテンプレートのアーティファクトIDを指定するものです

アーティファクトIDを指定すれば、それでどのテンプレートなのか特定できます

たまたま同じアーティファクトIDのテンプレートが複数あったような場合。こういうときは、グループIDを指定する「-DarchetypeGroupId」というオプションも用意されています。これを使い、以下のように実行すれば確実です（※それぞれ改行しないで、続けて書くこと）。

参考サイト

ディレクトリ構造

my_first_spring_boot/
└ pom.xml
└ src/
   └ main/
      └ java/edu/self/
                  └ App.java
      └ test/java/edu/self/
└ target/

少し省略していますが以下のような構造になります

javaの下に、edu/selfと続くのが嫌ならDgroupidのところを以下のように指定すると

-DgroupId=com.example.prj01

javaの下の階層が

spring_boot/src/main/java/com/example/prj01

になってくれます

ポート番号の変更

application.properties ファイル作成

Spring Bootアプリケーション専用のプロパティファイル/YAMLファイル(application.propertiesまたはapplication.yml)を読み込む仕組みになっています

今回私はポート番号を変更したい場合に使いました

[my_first_spring_boot]# touch src/main/resources/application.properties

// ポート変更
server.port = 8081

これでプロジェクトは作れました

立ち上げたコミュニティが1歳になった🎂

tech美られでぃというコミュニティを立ち上げて1年ちょっとが経ちました🎉
（略して「てくちゅら」）
tech-chura-lady.connpass.com

最初は少し違和感があった略した呼び方も様になってきました笑。

tech美られでぃができた理由

このコミュニティはITに興味がある女性や女性エンジニアが集まって情報交換をしたり、参加者のステップアップを目標としてます。
プログラミングの勉強会に行くと男性が多かったりしてなかなか女性エンジニアと出会う機会も少ないので、どうせなら作っちゃおう！ということでできたコミュニティです。

最初の数回は私1人でやってたんですけど、goma(@gomaaburamax)さんとmina(@mio0_xx)さんがオーガナイザーになってくれて3人体制になってから再スタートした感じです。

初めは1人でもいけるだろうと思ってたけど全然そんなことない。
今振り返ってみると1人でやってたら絶対ネタが尽きていたし、めんどくさくなって辞めてたと思います、1人じゃ無理。

どんなイベントやってるの？

3人ともWebエンジニアなのでイベント内容がWeb寄りになってしまうけど
変わり種として前回、次のイベントについて話し合った時「デザインも気になるなー、デザイナーさんってどんな事やってるんだろう？」という思いからデザインイベントをやったりもしました。

毎回3人で集まって「次何する〜？」、「最近こんな事興味あります！」、「今この技術流行ってるからハンズオンしてみよう！」みたいな感じでわちゃわちゃ話しています。


このコミュニティの良いところは、もちろん技術の共有ができて女性エンジニアと出会えることなんですけど
イベント終わりの打ち上げや、知り合ったメンバーで飲み会を開いたりしてキャリアの悩みや技術以外の話ができるのが私的にはとても楽しいし、勉強になってます。
前回の飲み会でいろいろ励ましてもらった気がしててうれしかったです笑。

次回のイベント

次のイベントは7月です！
tech-chura-lady.connpass.com

イベントではこちらのサイトを参考にコロナ対策をしていきます。


前と同じような状態に戻ることは難しいですが、これからもゆる〜くITに興味がある女性や女性エンジニアと触れ合えるコミュニティにしていきたいと思ってます。

仮想DOM・リアルDOMとは？

ReactとjQueryのことを調べてたらリアルDOMって何？、仮想DOMって何？となったのでまとめてみました。

リアルDOM（DOM）とは？

DOMのモデルは文書を論理的なツリーで表現します。
文書の構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続することができます。
f:id:eeko-amaryllis:20200507105738j:plain:w500
ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。
f:id:eeko-amaryllis:20200507112424j:plain:w450
DOMのメソッドでプログラム的にツリーにアクセスでき、これにより文書構造やスタイルやコンテンツを変更することができます。
ノードにはイベントハンドラーを割り当てることができ、イベントが発生するとイベントハンドラーが実行されます。

簡単にいうと
DOMとは、JavaScriptからHTMLドキュメントを操作するためのAPI（インターフェイス）

例題

以下のコードで例えると 

<h1 id="title">Hello エンジニアHub</h1>

const title = document.getElementById('title');
title.innerHTML = '仮想DOM完全に理解した';

ここではDOMのgetElementByIdメソッドを用いて、HTMLドキュメントから#titleのIDを持つ要素を取得します。
さらにDOMのinnerHTMLプロパティにテキストを代入することで、HTMLドキュメントのh1#titleを書き換えることができます。

このように、DOMのおかげでJavaScriptからHTMLドキュメントを操作できます。
この他にもボタンクリック時のイベント登録や、スタイル・属性の変更、要素のサイズを取得といった処理も、全てDOMのAPIを使います。

この時のDOMを、仮想DOMと区別するため「リアルDOM」と呼ぶこともあります。

仮想DOMとレンダリングのコスト

先ほど書いたようにWebブラウザがDOMツリーを持っているのは、HTMLドキュメントをレンダリング（コンテンツをブラウザの画面に表示する処理）するためです。
リアルDOMを操作すると、その都度以下のような処理が実行されます。

1. DOMツリーを再構築する
2. DOMツリーとCSSOMツリー※を組み合わせてレンダリングツリーを構築する
3. レンダリングツリーでレイアウトを行い、各ノードの位置やスタイルを計算する
4. レイアウト結果をもとに描画する
※ CSSOM: CSS Object Modelの略で、CSS版DOMのようなものです。

レンダリングフローを見ると、レンダリングはブラウザにとってコストの高い処理になります。
レンダリングコストを減らす最も効果的な方法は、無駄なレンダリングをなくすことです。
そこで考えられたのが、仮想DOMという概念です。

仮想DOMは
ブラウザが持っていたDOMツリーを、JavaScriptのオブジェクト（仮想DOMツリー）として表現します。
そしてメモリ上の仮想DOMツリーを用いて差分検知を行い、必要最低限の差分のみをリアルDOMに反映するため、一般的にパフォーマンスが向上すると言われています。
最終的にはリアルDOMを操作しているため、DOMツリーの構造が大きくなればなるほど差分検知の計算量が増え、結果的に遅くなってしまうこともあります。

(おまけ) フレームワークで仮想DOMはどのように実装されているか

仮想DOMが実装されているフレームワークでは以下のような処理が行われます。

1. 仮想DOMツリーを2種類用意する（変更前後のツリー2種類）
2. 何らかのアクションでstate※が書き換わる
3. 仮想DOMを再構築する(更新された変更後の仮想DOMツリー)
4. 変更前後の2つの仮想DOMツリーを用いて差分検知する
5. 差分があった箇所だけリアルDOMに反映する
※ state: アプリケーションが保持している状態/データ。例えば、TODOアプリのタスクの完了状態など


f:id:eeko-amaryllis:20200507123753j:plain:w550


参考資料
ドキュメントオブジェクトモデル (DOM) - Web API | MDN
仮想DOMってすげーんだぜ！ - Qiita
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう - エンジニアHub｜若手Webエンジニアのキャリアを考える！

シングルページアプリケーション・サーバーサイドレンダリングとは

シングルページアプリケーション(SPA)とは

単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャの名称です。
SPAを用いた有名な事例は

など。

サーバーサイドレンダリング(SSR)

(元々ブラウザ上で動かしていた)JavaScriptをサーバー内部で実行して、HTMLを生成することです。

イラストでまとめると

従来の動作の流れ

f:id:eeko-amaryllis:20200501082419j:plain:w550
デメリット

  • 変更がない部分(headerやfooterなど)のHTMLも毎回サーバーから送信されるので処理に時間がかかります。

シングルページアプリケーション(SPA)

f:id:eeko-amaryllis:20200501082516j:plain:w550
メリット

  • ブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、UXを大きく向上させることができます。
  • 2回目以降は更新したい部分だけをサーバーに要求するため処理が早い。
  • ブラウザ側でできる処理はJavaScriptで終わらせることで、サーバとの通信量を最低限に抑えることができる。

（ブラウザの主な機能：ユーザーの選択したウェブリソースをサーバーに要求してブラウザウィンドウに表示することにより、ユーザーに提示すること）
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks より

デメリット

  • 画面の初期表示は最初サーバーからHTMLやCSSを受け取ります。 それ以降の画面表示はデータ（JSON）をサーバーから受け取りそのデータを使ってJavaScriptでDOM操作をし画面遷移・更新を行います。そのためこの画面遷移・更新の処理をJavaScriptで書かないといけません。

サーバーサイドレンダリング(SSR)

f:id:eeko-amaryllis:20200501082606j:plain:w550
メリット

  • サーバー側でHTMLを生成するのでページ表示が早く(SPAの欠点である初回読み込みの遅さも無い)、ユーザーの通信環境に左右されにくい。


デメリット

  • サーバー側の負担が増える。
  • Node.jsやVue.js を実行できるサーバーが必要になる。

まとめ

SPAとSSRとの違いはざっくりいうと、HTMLを生成するのがブラウザなのか、サーバーかの違いです。


参考資料
シングルページアプリケーション（SPA）の導入メリット＆デメリット｜株式会社オロ
今さら聞けない！シングルページアプリケーションとは - Qiita
SPA、SSR、プリレンダリングの違いをまとめてみた - Qiita

Cookieとセッションの違い

疑問

  • Cookieとセッションの違いって何？
  • セッションは何の役割？？

Cookieとは

HTTPの使用を拡張してWebアプリケーションとWebブラウザの間で情報を交換できるようにしたものです。
f:id:eeko-amaryllis:20200428173648j:plain:w550

HTTPレスポンスのヘッダを利用して送られた情報は　"Webブラウザ（クライアント）"　に保存されたものです。
Cookieにどのような情報を含めるかはアプリケーションが自由に決めることができます。

しかし
Cookieにはセキュリティ上覗かれてはいけない情報が入っています。
なので 安全により多くの情報を保持するための方法として、考案されたのが セッションです。

ここでセッションIDというのがあります。（セッションIDのやりとりはCookieを用います）
番号自体に特別な意味はなく、Webサーバーにリクエストを発行したWebクライアントを識別するIDです。

例えば以下のような、サーバーが管理するセッション状態の場合

セッションID ユーザーID ログイン 商品 注文完了
326 田中 ✅ テレビ
327 佐藤 ✅

このようにセッションIDさえわかれば、それに追随する色々な情報が知ることができます。


WebブラウザとWebサーバーの流れを説明すると
f:id:eeko-amaryllis:20200428181418j:plain:w550
1. Webアプリケーションでログインした場合、最初のリクエストがWebサーバーに送信されセッションIDを発行します
2. 発行したセッションIDはCookieを用いてWebブラウザへ渡します

これ以降のリクエストがあった場合
3. Webブラウザは先ほど発行されたセッションIDを格納しているCookieをWebサーバーへ送ります
4. Cookieを受け取ったWebサーバーは、その情報に含まれている「セッションID」を元にWebブラウザの状態を復元します（例：ロフイン状態が残ってる）

ポイント

  • CookieにセッションIDだけ保存していれば、セッションID（数字）が盗まれても大丈夫
  • セッションIDを元に状態を復元をするためのメモリは、Webサーバー上にあるので安全性が高い
  • Cookieに格納できる情報量の制限を気にしなくていい（確か20個だったような）
  • Cookieに情報そのものを格納するか、セッションIDだけを格納するかの違い


参考資料
Cookieとセッションをちゃんと理解する - Qiita
Cookieとセッションについてわかりやすく解説します！ | ウマロのゲームブログ

Firebaseとは

Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスで、クラウドサービスの形態では BaaS に位置付けされています。

機能としては

  • インフラ部分を任せることができる
  • プッシュ通知を簡単に送ることができる
  • メールアドレス等を一切必要としない匿名認証から、メールアドレスでの認証、各種サービス（TwitterやFacebook）を使った認証ができる
  • 静的ホスティングサービスがある（無料プランなら1GBまで）
  • サーバーレス
ここでホスティングサービスとは

レンタルサーバ、共有サーバのこと。
ホスティングとは、一言で表すと「サーバを借りること」。
自分たちが設置したサーバをネットワーク越しに他の人に使わせてあげるサービスのことです。


🤔調べてて思ったのがLaravelと似てそうだけど何が違うの？？
バックエンドを任せられるところは同じ、しかしSNSを使った認証などを使用したい場合はFirebaseが適してそうです。
チャットアプリや、通知が必要なサービスならLaravelよりもFirebaseの方が適している感じがします。

まるまるFirebase使ってサービスを作るとFirebaseが終了した際に大変なことになるので
例えばLaravelで作って、一部の機能でFirebase（SNS認証・プッシュ通知）を使った方がいいような気がしました。


↓そこらへんを説明してくれているサイト

参考資料

Laravel - laravelで作ったwebアプリをfirebaseでデプロイしたい｜teratail