つよいエンジニアになるために

浅ーいフルスタックエンジニア(ほぼPHPer)が頑張ってアウトプットするブログです

レイアウトシフトについて

業務でヘッダー部分に表示エリアを追加する時にレイアウトシフトを見落として実装してしまいました。
落ち込んでもしょうがないので記事にしました🥹

レイアウトシフトとは?

Webページの要素がロード中や操作中に予期せず移動してしまう現象のこと

ロード初期

ロード初期

ロード完了

ロード完了

押したいボタンが下にずれる!!

レイアウトシフトが原因で何が起こるか?

  • ユーザー体験の悪化
    ユーザーが意図しない操作を行なってしまう可能性がある
    決済プロセスの中に起こった場合などは著しくサイトの信頼性の低下に繋がる
  • CLSスコアの悪化
    SEOに悪影響を及ぼし、検索順位の低下に繋がる

SEOに悪影響を及ぼすCLS(Cumulative Layout Shift)スコアとは?

CLSスコアの計測ツール

解決策は?

  • コンテンツのサイズを指定して表示領域を確保する
    読み込みに時間がかかる画像や動画、インラインフレームなどのwidth,heightを指定する
  • ケルトンスクリーンを使用する
    読み込み完了までに視覚的なプレースホルダーを表示しておく
  • Webフォント読み込みを最適化する
    読み込みに時間がかかるWebフォントはダウンロードし事前に読み込んでおく
  • レイアウトシフトが起こりうるアニメーションは慎重に使用する

ロード初期

ロード初期

ロード完了

ロード完了

Next.jsチュートリアルまとめ【第一章:Getting Started】

はじめに

最近ゆるっとReact/Next.jsとTypeScriptの勉強をしています。

経験者の方々に「どの学習方法がおすすめですか?」と尋ねたところ、皆さん「公式サイトのチュートリアルが一番!」ということで、公式のチュートリアルを進めていくことにします!

Reactとは?

JavaScript言語を用いたWebサイト上のUIを構築するためのライブラリ

Next.jsとは?

Reactベースのフロントエンドフレームワーク

Next.jsの特徴

  • サーバーサイドレンダリングSSR
  • サーバーサイドでHTMLを動的に生成してクライアントに送信する技術。パフォーマンスを向上出来る、SEOにも有利
  • 静的サイト生成(SSG)
  • ビルド時に各ページを静的なHTMLファイルとして事前に生成する技術。ページロードの高速化、サーバー負荷の軽減が出来る
  • ファイルベースのルーティングシステム
  • ページコンポーネントをpagesディレクトリに配置するだけで自動的にルートが設定出来る機能。開発の効率性とパフォーマンスを向上出来る
  • APIルート
  • APIのエンドポイントを簡単に作成できる機能。例:/pages/api/user.js - /api/userがエンドポイントとなる
  • イメージやフォントの最適化が容易
  • next/Imageコンポーネントやnext/fontモジュールを使うことで自動的に最適化を行なってくれる。

Creating a new project

$ npx create-next-app@latest {プロジェクト名} {ここからオプション}--use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

👉︎オプションについてはこちら

  • npx
  • Node.jsのパッケージ実行ツール npmレジストリに公開されているパッケージをインストールせずに実行できる
  • create-next-app
  • Next.jsに必要なパッケージの導入や設定が完了した状態の環境が作れるコマンド
  • @latest
  • npmパッケージの最新バージョンをインストールする際に使用されるタグ(他にもnext,beta,alpha等)

※対話形式で一つずつ選択して進めていく方法もある

$ npx create-next-app@latest
What is your project named? …
(プロジェクト名は何にする?)
Would you like to use TypeScript? … No / Yes
(TypeScriptを使用する?)
Would you like to use ESLint? … No / Yes
(ESLintを使用する?)
Would you like to use Tailwind CSS? … No / Yes
(Tailwind CSSを使用する?)
Would you like to use src/ directory? › No / Yes
(srcディレクトリを使用する?)
Would you like to use App Router? (recommended) › No / Yes
(App Routerを使用する?)
Would you like to customize the default import alias (@/*)? › No / Yes
(インポートエイリアスをカスタマイズする?)
What import alias would you like configured? ›
(設定したいインポートエイリアスは何?)
※ここで指定した文字をルートディレクトリとする、デフォルトは「@/」

※yarnを使って作ることもできる

$ yarn create next-app

開発サーバーを起動する

$ npm run dev
- Local: http://localhost:3000

Next.jsチュートリアル:第一章

「しばゆーさんに聞く!新しい環境で成長するための考え方とキャリア」参加しました

しばゆーさんに聞く!新しい環境で成長するための考え方とキャリア - connpass

に参加しました🙌

findy.connpass.com

以下、参加レポートとしてまとめてみました。

これまでの大きなキャリアの選択について

  • エンジニア、PM、EM、インフラからサーバーサイド、フロントエンドまで様々な職種を経験した
  • なぜこの意思決定(キャリアの選択)をしたのか?
    • 職務について
      • キャリアのためというよりも社内の問題解決のために重要だと思ったポジションを選択していた
      • 自分が興味がある職務なのか、やりたいのかも考慮した
    • 転職について
      • 他の事業ドメインでも自分の力が発揮出来るのか試してみたかった
      • 多様な視点を持ちたかった
  • 転職する際の軸に関して
    • まず自分の中で外せない「軸」を決めてノートに書き出してみる
    • 「軸」を元に面接の際に聞きたい内容をまとめる
    • 面接後に「軸」との比較をする
    • 大きな事業ドメインチェンジをした後に新たに見つかる「軸」もある
  • 今後のキャリアについて
    • 将来像はある、キャリア計画は立てているがそれに固執しないようにしている
    • 意識して行動するための目標

しばゆーさんの考えるキャリアの考え方

  • 新しい環境に飛び込んだ時に大事にすることは?
    • プライドを捨てて常に「新人気分」で臨む
    • 自分よりそのプロジェクトの経験が長い人に質問する
    • 質問や技術のキャッチアップ後は自分でもう少し深掘りをして、アウトプットする
  • どのように技術を学んでいくべきか?
    • 本当に理解するにはどんな形でもいいのでアウトプットする
      • アウトプットは人のためではなく自分のため
    • 「使い方を学ぶだけでは終わらない」を意識する
    • 業務時間外の勉強はやるべき
      • 自分のための勉強である
    • 学ぶことに近道はない

キャリアの選択についての考え方や転職する際の「軸」について、

新しい環境への臨み方や技術にキャッチアップについて、

すごく参考になりました。ずっと頷いてた。

そして、しばゆーさんの最後の一言がよかった。

 

やりたいことはやってみる!

 

やりたいことをやるために、やりたいことをやれるようになるために、今何が出来るのかを考えないと…!

参加して良かった〜✨

 

今回のイベントはFindyさんの「エンジニアのちょい先を考える」をテーマにしたエンジニア向けに発信するメディア Findy Engineer Lab での記事が元になっているようです。

findy-code.io

追記

 

Laravelのヘルパーを使った暗号化・復号化

目的

サービス内だけで復元可能なトークンデータを作成する

どこで使ったか?

Gmailのメール送信者のガイドライン対応のための登録解除処理実装
List-Unsubscribeヘッダーに付与するメール識別データの暗号化

参考:Gmailのメール送信者のガイドライン

使い方

アプリケーション固有のAPP_KEY作成

コマンド実行

php artisan key:generate

.envファイルにAPP_KEYが作成される

APP_KEY=base64:3d1f8e53f6d90948483dbfcaab1eafcc3c0e049e0ea9962f19797d0317c065d3

※漏洩したら暗号データが復元されてしまうため、機密情報として扱う

APP_KEYをconfigに設定する

config/app.php

    /*
    |--------------------------------------------------------------------------
    | Encryption Key
    |--------------------------------------------------------------------------
    |
    | This key is used by the Illuminate encrypter service and should be set
    | to a random, 32 character string, otherwise these encrypted strings
    | will not be safe. Please do this before deploying an application!
    |
    */

    'key' => env('APP_KEY'),

データの暗号化

今回はLaravelのヘルパー関数 encrypt() を使います

    $mailData = ['user_id'=>12345,'mail_category'=>1];
    $mailToken = encrypt($mailData);
    // $mailToken Sy6uwWme7HVARRDIh2nS0GyEy3ij2dmolHGL2FjUn1Y6r1ezAFmmokJH-0Rg-RUorqDiWsmf1UTezPFmHcC6-xzyqgzvwJZvTmDxDMRIoH3OynpO25FNfY7b

データの復号化

今回はLaravelのヘルパー関数 decrypt() を使います

    $mailData = decrypt($mailToken);
    // $mailData ['user_id'=>12345,'mail_category'=>1]

今回の実際の使用例

$request['headers']['List-Unsubscribe'] = "<https://taniyamama.test/unsubscribe?token=" . encrypt(['user_id'=12345,'mail_category'=1]) . ">";

終わり

意外と簡単に使えるLaravelの暗号化・復号化の紹介でした。

こういうものはガンガン活用したいですね〜!

間違いなどありましたらご指摘ください🙏

「エンジニアのためのコーチング!ばんくしさん・ログラス松岡さん、それぞれが実践する理由とは?」参加しました

Findyさんが主催された

エンジニアのためのコーチング!ばんくしさん・ログラス松岡さん、それぞれが実践する理由とは? - connpass

に参加しました〜!

findy.connpass.com

 

一口でコーチングと言っても目的や対象が違う様々なコーチングがある事を知りました。

  • エンジニアリングコーチン
    • エンジニアとして高い目標を目指し実行するための対話
  • キャリアコーチン
    • キャリア、人生でやりたいこと、やるべきこと、得意なことを見つけるための対話
  • システムコーチン
    • 開発チームなど複数人に向けてコーチングする
    • チームのパフォーマンスを活性化するための対話

 

特に自分の状況で考えた場合にしっくり来たのはシステムコーチングでした。

 

チームのパフォーマンスを活性化するため

 

チームのパフォーマンス、活性化させたい!!

松岡さんのシステムコーチングめちゃめちゃ興味ある…(ただ会社に話を通すのが先…)

以下のフォームから応募できるらしい✨

 

エンジニアリングコーチングもキャリアコーチングももちろん興味はあるんだけど、この二つはある程度自己実現が出来ている人向けのコーチングみたい。

自己実現が出来ていない人は、まずカウンセリング、それからティーチングの順番で受けるといいとの事。

もうちょい深ぼって、ChatGPTさんの力を借りて自己否定、自己受容、自己実現、自己効力とは?というところも書いてみる。

  • 自己否定: 自分自身の価値や能力を否定的に捉えること。自尊心の低下につながりやすい。
  • 自己受容: 自分の長所と短所を全て受け入れる態度。自尊心と幸福感が向上する。
  • 自己実現: 自分の可能性を最大限に引き出し、意味ある目標を追求する過程。個人の成長と充実感に重点を置く。
  • 自己効力: 自分の行動で望む結果を引き起こせると信じる能力。困難に直面しても挑戦を続ける動機付けになる。

私はずっと「自己否定」と「自己受容」を行ったり来たりしてる感じ…😇

これは自分の体調や忙しさ度合いだったりが原因の時もあるし、外部からのインプットによってズドーンと落ちる時もある。(重くマイナスに捉えすぎる性格…)

ただお二人も言われていたけど、自分で自分をコーチングすることも可能だしAIにカウンセリングだったり軽いコーチングのようなことをしてもらうことも出来る。

私の場合は、まずは全体的なモチベーションを落とさないようにイベント参加やアウトプットをし続けて、いかに「自己否定」に戻らずに「自己受容」に留まれるか、だなぁ。がんばろ。

あ、あと、Google re:Work 良さげ!見てみよう!

 

今回のイベント、今の自分の状況を整理する良い機会になったし、「人生をより良くする」ためにどうすれば良いのか、方法や考え方が学べてとても良かった。

短い時間のイベントでも参加すると何かしら得るものがある。

そしてランチタイムのイベント、参加しやすくて良い。

次に参加予定のイベントはこちら

developer-productivity-engineering.connpass.com

次もレポート書く、はず!

とりあえず2つ目のアウトプット、嬉しい〜🙌

\PHPカンファレンス関西2024でカンファレンス初体験してきた/

2024年2月11日(日)、PHPカンファレンス関西2024に参加してきました。

2024.kphpug.jp

初のカンファレンス参加でなんと大阪まで行くことが出来ました!(経費ありがたし🙏)

11日朝4時に起きて懇親会終わりの20時まで、1日まるっとめちゃめちゃ楽しかった!

生のトークの緊張感、懇親会でのゆるーい交流、著名な方とも交流できる貴重な時間、ほんと良い経験になったなぁ。

 

今まで、人見知りだし…勉強出来てないから参加しても話すの恥ずかしい…とくよくよして参加しなかったことを後悔しています。。

でも、今からでも遅くないはず!アラサーでも今から登壇目指して頑張ろうー!

という気持ちにさせてくれたPHPカンファレンス関西2024には感謝感謝です🙏✨

 

次はPHPカンファレンス福岡!絶対参加する。スタッフとしての参加もアリかなぁ。

 

そしてこれが初めての私のアウトプット!

なかなか時間取れない日々だけど、まずはカンファレンスや勉強会の参加レポートは必ず書く、という目標で頑張ろう!