この投稿はmediba Advent Calendar2021の23日目の記事です。 早速ですがみなさま、APIのレスポンスからViewを構築していくのが主流なこの時代のフロントエンド開発において、クライアント側のコードが複雑になり辛い思いをした経験がありませんか？私はあります。 例を見ていきましょう。 まずmicroCMSでBE層（データ+API）を作成します。 microCMSのコンテンツ内容 - コンテンツ（/v1/contents）: コンテンツ一覧 - おすす
Reactでコンポーネントを書くとき、 type Props = { title: string }const App: React.FC<Props> = ({ children, ...props }) => { return ( <> <p>{props.title}</p> {children} </> )} 上記のようにFunction Componentで型はReact.FC、ジェネリクスで別途定義したPropsの型を渡す〜っていうのがよく
リリースされてから大分経つので&最近ようやく使い始めたのでまとめる。 チョットシラベタ状態なのでふわふわしてる部分あり。間違ってたらツッコミください。 PnPを使用したパッケージ管理PnPとはPlug'n'Playの略。 node_modulesのようにパッケージや依存関係全体をインストールせずに、.pnp.cjsという単一のファイルにパッケージやバージョン、依存関係のマップを生成。.yarn/cacheにzipファイルでパッケージ管理し、モジュールを読み込む。（物理的
最近何度かハマってしまったので自戒の念を込めて書き残しておく。 あくまで個人の感想であり実際の人物、団体とは関係ありません。 自分たちの書いたコードから特定できるものでもないのでレビューで潰しにくい上に検証後でも運用方法次第では余裕で出てくる、しかも影響範囲が広くて最悪。。。 なぜ検出しづらいかパッケージ運用による理解度の低さ。 Next、Nuxtタイプのフレームワークに慣れすぎてパッケージの初期構築等も結構おざなりになりがち。 バージョン範囲指定に関してもあまり注
この投稿は mediba Advent Calendar 2020 の9日目の記事です。 最初にタイトルに関してなのですが、今年はSSG関連で特に「爆速〜」という見出しの良い記事を多く見かけるのであやかってみた次第です。 さてみさなま、今年は働き方において大きい変化があったかと思います。 もうすっかりリモート環境で仕事をすることも日常になり、Zoomでミーティングする機会も増えたを越えてもはや当たり前になってきたかなと感じています。 そんなZoomが実はAPIを提供し
タイトルの通り。 弊社は基本webやappの会社なので当然それに応じた技術スタックの方が多い。 が、その中でゲーム作って発表しあって社内のUnity知見を深めようという会があり、以前Vtuber好きこじらせて3Dで Unity学んでいた自分も参加した。 自分の作品の内容 - シーンはタイトル→メイン→リザルトの3つ - 難易度によって内容が変わる - 金髪が主人公、騎士みたいなのに捕まったらアウト - 上下のリリックを見て、韻を踏んでいる言葉を取得する ちなみ
社内外でLTした。 Composition APIがもちろん目玉なんだけどそれ以外にも普通に使いやすくなった機能が多くて（v-modelとか）素晴らしい。 振る舞いの切り出し方をもっと使いこなせるようになれば有り難さをさらに実感できそう。 あと、template内でtypeが効くようになるのが楽しみ。 LTとしては5分で収まりきらない内容で作ってしまったので反省…
前回はこちら 今度はちゃんと実用的なキーボード作成した。 作成したのはこちら！ 分離型でお洒落なキーキャップ3種類から選べるスターターキット、もちろんキースイッチも選べて、なんとファームウェアはすでに流し込んである。 失敗したら2万のクソでかキーボード型文鎮が出来上がってしまうわけなので初挑戦でこれ！ってなると抵抗がある。 一応自分ははんだごてすら初めて触る人間だったのでキー4つのやつ（前回参照）から入門している。ガチ初心者！って方は同じ手順を踏むことをお勧めするか
人生初の4DXを体験してた。 ちなみにタイトルは 「劇場版 機動戦士ガンダム00 A wakening of the Trailblazer」 10年前に公開されて10回近く見てる映画。 小説版も出ててそっちも読んだ。それくらい好き。 機動戦士ガンダム40周年プロジェクトの一環みたいで、4DX専用の映画というわけではない。 ガンダム00の良さについてはオタク全開になってしまうので今回は割愛。 ちなみにお値段 2600円！！ 安いか高いかはわからん。 ちなみにこ
自己紹介以外ではじめて技術以外のことを書きます。 テレワークで生活リズムがとんでもないことになった。 どうにかしようと考えた結果 群馬の山奥の断食道場に行ってきました。 ガチの体質改善と、ほんのちょっとの好奇心。 ちなみに3泊4日で○万円。 丁度お国から10万ほどもらったことだし経済回しとくか〜っていう気持ち。なんとなく使わないといけない使命感があったので。 1日目仕事を早めに切り上げて特急で群馬に向かう。特急乗ってるときって無性にお弁当食べたくなる。この辺です
AWSでAPIを配信してみたい、しかしAWSに関する知識があまりにも足りない。 そんなときにみつけた便利なパッケージ。なんとAWS公式。 参考にさせていただいた記事。 aws-cliさえ叩けるようになっていればあとはREADME.md通りにコマンドを叩くだけであれよあれよとLambdaやらAPI Gatewayやらにデプロイされていく。感動。 ちなみにcloneしてきた状態のままで使用するとCloudFormationにデプロイする際にNode.jsの使用バージョンで
チームでレベルアップ！みたいなのに最近少し憧れてる節がある。 社内の別PJで導入済み&この前オンラインでやってたkintone開発チーム様のLTとか見てモブプロいいなーって思ってた。そんなときに中規模くらいの案件をFE2人でやることになったのでペアプロ導入してみた。 ちなみに弊社は絶賛テレワーク期間中なので作業環境はオンライン。 参考にした記事様の一例 やったこと- ドライバ/ナビゲータで1時間交代制 - 時間はあくまで目安で実際のはキリがいいとこまで作業 - タ
自粛中のGW工作？第二弾。 静的サイトジェネレーターをSSGって呼ぶのつい最近知った。知った翌日からSSGって呼ぶようにしてる。かっこいいので… その日のコロナ感染者をスクレイピングして表示するだけの静的サイト作った。 技術スタック# バックエンド - Firebase Cloud Functions - Firebase Firestore - Puppeteer + TypeScript # フロントエンド - Next.js + TypeScript
自粛期間中のGW工作第一弾。 何か新しいことをしたいと思った結果キーボード制作に手を出してみた。 今回作ったのはコレ。 はんだごてとか触ったことないし、最初から1万以上出して失敗するのはあまりにダメージがデカすぎるので、ちゃんと作れなくても使い道ないからいいやの精神で取り組めるタイプのものにした。 ちな購入したはんだごて。 Youtubeでひたすらはんだごてマスターたちの説明動画をみた後、下記のガイドを見ながらチャレンジ。 パーツの名前覚えると頭が良くなった気がす
# 自己紹介 - 年齢: ギリ20代前半 - 職業: フロントエンドエンジニア - 趣味: ゲーム/野球観戦 フロントエンドエンジニアです。3年くらいやってる。 贔屓球団は千葉ロッテマリーンズ。涌井選手（移籍したけど…）と石川歩選手が好き。 ゲームは据え置きだとモンハンIBやスマブラをオンラインで断続的にやってる。ガンダムVSシリーズ好きなのでマキブON買います。 ソシャゲだとシャニマスとFGO。杜野凛世担当。 日頃やったことのアウトプットをしたくてはじめまし
