$ 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

2024-03-05

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

イベントレポートキャリア

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

に参加しました🙌

findy.connpass.com

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

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

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

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

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

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

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

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

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

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

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

参加して良かった〜✨

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

findy-code.io

追記

参加後のアンケート書いたら技術本が当たりました〜〜🎉
Findyさんありがとうございます🙏✨#career_findy #findyさんに感謝 pic.twitter.com/SXmCGpCsla
— hitoooomi (@rk__tani) 2024年3月29日

2024-02-27

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

PHP 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の暗号化・復号化の紹介でした。

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

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

2024-02-20

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

イベントレポートエンジニアリング心理的安全性

Findyさんが主催された

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

に参加しました〜！

findy.connpass.com

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

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

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

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

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

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

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

また、システムコーチング興味ある、受けてみたい！という方は以下のフォームからご応募ください！！
#コーチング_findy https://t.co/NEnjqXOA6c pic.twitter.com/y65aLMgKNX
— 松岡@ログラス/DDD,アジャイル (@little_hand_s) 2024年2月20日

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

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

自己否定→自己受容のためのカウンセリング
自己受容→自己実現のためのティーチング
自己実現→自己効力のためのコーチング

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

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

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

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

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

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

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

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

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

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

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

developer-productivity-engineering.connpass.com

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

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

2024-02-19

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

イベントレポート PHP

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

2024.kphpug.jp

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

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

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

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

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

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

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

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

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

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

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

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

レイアウトシフトとは？

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

SEOに悪影響を及ぼすCLS（Cumulative Layout Shift）スコアとは？

CLSスコアの計測ツール

解決策は？

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

はじめに

Reactとは？

Next.jsとは？

Next.jsの特徴

Creating a new project