RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

フロントエンドエンジニアたちが語る、Tips【23選】

f:id:tech-rakus:20211202093705p:plain

こんにちは、技術広報のyayawowoです。

フロントエンドエンジニアの皆様、今のフロントエンドを楽しんでおりますでしょうか?
 
変化の多いフロントエンド領域を楽しむために・・・
ラクスが開催している 「フロントエンド LT会」で発表された資料をご紹介します!
フレームワークや開発言語別にまとめておりますので、興味があるところだけを少し摘まむのも大歓迎です。

9月に開催した「フロントエンドLT会 - vol.4」は、参加者が500名越えとなるイベントなりました。
2022/1/19(水)に「フロントエンドLT会 - vol.5」を開催しますので、ご興味ある方は是非登壇/視聴申込よろしくお願いいたします! rakus.connpass.com

では、早速見ていきたいと思います!

イベント詳細はこちらからご確認ください。
フロントエンドLT会 vol.1 -2020夏祭り-
フロントエンドLT会 vol.2 - 2020冬まつり
フロントエンドLT会 - vol.3
フロントエンドLT会 - vol.4

フレームワーク

Preact で手書き文字採点アプリを作ってみた

発表者:chooさん docs.google.com

◆ 発表のポイント
・フロントエンドの工夫3点
 ①CSSフレームワークは使わない
 ②定義ファイルなどでサイズが多きものは遅延読込み
 ③軽量版 React の Preact の導入
・Preact は、ほぼ React と同じように使えるので、React 使いの人にはPreactめっちゃオススメ!

React + Amplifyで アプリ開発

発表者:nishikichi244さん

www.slideshare.net

◆ 発表のポイント
APIが自動生成できたり管理画面の実装の手間が省ける
 →フロントのロジックの開発に集中できる!
AWSのサービスになじみがある人は特におすすめ
・GraphQLを使った気になれた
・自分のトレーニングを記録して振り返るアプリにしたい

新規開発を止めないフロントエンドReactリプレイスの進め方とTips

発表者:YuitoSatoさん
note.com

◆ 発表のポイント
・機能ごとにリプレイスしていく
 →小さくリリースすることで、新規機能開発と並行してすすめる
・変更が多い機能からリプレイスをする
 →二重の変更を避ける。早いタイミングでチームに布教できる
・副業、業務委託の方に協力してもらう
  →フロントエンド特需に耐えるため。他社から設計を学ぶため

ピュアなJSしか使ったことのない人がReactを触った後の感想

発表者:lcpjさん
docs.google.com

◆ 発表のポイント
・JSXに使われる技術について
 →トランスコンパイラ Babel
・ステートについて
コンポーネントについて
 →ガンプラを組み立てるようにコードを書く

SWRと状態管理

発表者:kokiさん
speakerdeck.com

◆ 発表のポイント
・SWRの基本知識と特徴について
・SWRの自動再検証
・ReduxからSWRを採用した理由
 →コードがとてもシンプル!
・SWRを使った実装例の紹介

ユーザーが編集中の状態管理について考えよう

発表者:りゅーそうさん
speakerdeck.com

◆ 発表のポイント
・Create⇔Update⇔Deleteの⇔の状態をどうデザインするか
・microCMSの事例紹介
・ユーザーが「編集中」の状態は重要だが、本筋ではないためそれを念頭においてデザイン・実装すべし!

Vue CLIプロジェクトにViteを導入検討してみた

発表者:hatsune_kさん
speakerdeck.com

◆ 発表のポイント
Viteを導入してみて…
・アプリ起動まではできた
・想像より設定変更が面倒、コード変更も必要
・導入には以下の3つの壁が残っている
 ①SCSSの~@のエイリアスが読めない
 ②Vuetifyの利用コンポーネントを個別読み込みする必要がある
 ③細かいデザイン崩れがあるのであたってないスタイルがありそう
・開発時ビルドは噂通り爆速
・プロジェクトによっては即導入する価値はある!

Vue.js と Chart.js でチャートを描画する

発表者:SAWさん
speakerdeck.com

◆ 発表のポイント
・Vue-chartjs の基本的な使い方を紹介
・データの変更を検知してチャートをリアクティブに描画
・実際の利用例を紹介

Vue OptionsAPIからCompositionAPIに変換するツールを作ってみた

発表者:miyaokaさん
miyaoka.dev

◆ 発表のポイント
・Vue2のOptions APIで書かれたコンポーネントをcomposition APIを使った書き方に自動変換するツールの構築
・どういう変換をしているのか?
 1.入力値として Vue の SFC コンポーネントの文字列を受け取る
 2.vue-template-compiler で SFC から script 部分を抽出する
 3.TypeScript の compiler API で AST にする
 4.export default しているところの 各 options の値を読み取り、 新しい export に変換して出力する
・変換用の CLI として作ろうとしていたが、結局ブラウザで入出力の確認画面があったほうが分かりやすい

リポジトリ
GitHub - miyaoka/vue-composition-converter: Vue composition API converter

◆デモ
Vue composition converter

VS Code Remote Containersを使った Angular開発

発表者:honma12345さん

www.slideshare.net

◆ 発表のポイント
・remote containers導入前の問題点
→フロント開発の環境構築に時間がかかる
・remote containersの良い点
→フロントの開発構築が何より早い
→ローカルマシンの構成に影響を与えない
AWS Amplityを利用したケースにも活用可能!

Nuxt.js + firebaseでハマったこと

発表者:Logyさん speakerdeck.com

◆ 発表のポイント
・ハマったこと
 ①currentUser入ってない問題
 ②コンソールエラー地獄
・慣れない技術であっても基本に立ち返ることがトラブル解消への近道!
・多少ハマったものの、認証機能はすぐに実装できた
 →Nuxt.js + firebase最高!

Blazor Web Assembly (C#) を触ってみた

発表者:nt-7さん

www.slideshare.net

◆ 発表のポイント
・Blazorとは?
→.NET(C#)を使って、SPA開発ができるフレームワーク
・どんな人に嬉しいの?
 ①ASP.NETASP.NET Coreあたりを触ることが多い方
 ②C# 割と得意な方
 ③今後 SPA 開発に興味がある方
 ④Wasm で動く .NET ランタイム上の Blazor 開発に興味がある方

開発言語

javascriptでも条件式を使いたい話

発表者:philomagiさん speakerdeck.com

◆ 発表のポイント
・条件文と条件式の違い
 →文は値を返さない、式は値を返す
 →条件式が使えると、細かいところでコードが簡略ができて便利
JavaScriptのif/switchは条件文
JavaScriptで条件式を使うために、ライブラリ化してみた
 →TypeScript対応
 →遅延評価対応
 →非同期にも対応

◆ライブラリ
ceiocs - npm

再帰関数を使ってみよう

発表者:ita_3yさん speakerdeck.com

◆ 発表のポイント
・オブジェクトの探索等、再帰的な処理をしたい時は再帰関数が使えるかも
再帰呼び出しをするときは、必ず終了条件があることを確認しよう
・等間隔の遅延を入れたい時は、setTimeout の再帰呼び出しが良いかも
JavaScript再帰呼び出しをするときスタックオーバーフローに注意しよう

iframe sandboxでユーザー入力スクリプトを実行する

発表者:syumaiさん
speakerdeck.com

◆ 発表のポイント
・ユーザー入力スクリプトの安全な実行には別OriginのWindowが使える
・別OriginのWindowは、iframe sandboxで簡単に使える
・Window Object間のmessage送受信にはpostMessageが使える

◆デモ
GitHub - syumai/sandboxed-eval: iframe-sandboxed eval working on the browser.

HTML だけで UI を作る限界、あるいは無理なくユースケースと向き合っていくためには

発表者:yamanokuさん
docs.google.com

◆ 発表のポイント
・フロントエンドとは、「すべてできる」それは本質ではなく表層の部分に責任をもつこと
・UIにまつわる責務を分解していく
 →詳細度に依存しない見た目(Utility CSS
 →Webブラウザ上の振る舞い(Web API(& JavaScript
 →UIの意味づけ(WAI-ARIA

疑似要素によるCSSセレクタ

発表者:Takao Kamenoueさん
speakerdeck.com

◆ 発表のポイント
セレクターの種類
 ①基本となるセレクター(要素・クラス・ID)
 ②属性によるセレクター(a[disabled],input[type="text"] )
 ③疑似クラスまたは疑似要素(a:hover,div::before)
・疑似要素を使用する際はブラウザでサポートされているかを確認する
・疑似要素ではそれぞれ利用できるCSSプロパティが異なる
・疑似要素を扱う際にはアクセシビリティにも気をつける。アクセシビリティに問題が発生するようならば代替案を検討する

CSS のルールセットを高速に出力する VS Code 拡張を作った

発表者:kubosho_さん
speakerdeck.com

◆ 発表のポイント
・eCCStractor for VS Codeの紹介
 →HTMLのクラス名やID名を抽出する
 →HTMLの他に、JSXとTSXも対応している

◆eCCStractor for VS Codeのインストールページ
eCSStractor - Visual Studio Marketplace

GItHub
GitHub - kubosho/vscode-ecsstractor: Extracting selectors from HTML / JSX / TSX and generate CSS file.

Lit Astro Something

発表者:takanoripさん
zenn.dev

◆ 発表のポイント
・LitでTailwind CSSを使う方法として、大きく2つの道がある
 ①Shadow DOMを使わないようにする
  ・createRenderRootを使用してすべてをShadow DOMの外に出す
 ②Shadow DOMのstyleの中にどうにかしてねじ込む
  ・windicssを使う:Windi CSS
  ・PostCSSで頑張る
  ・rollupを使う:GitHub - takanorip/lit-tailwind

その他

Firebase + Bolt で もくもく会用のSlack botを作った話

発表者:RyoKawamataさん
speakerdeck.com

◆ 発表のポイント
・Bolt + Firebase Functions でBotは手軽に作れる
・勉強会開催前にBotを温めておこう
・processBeforeResponseの設定を忘れずに!

docker-compose × Firebase Emulator でローカル環境構築

発表者:meijinさん
zenn.dev

◆ 発表のポイント
・Firebase の使いどころと課題
・Emulatorの概要とセットアップの全体的な流れ
・Dockerコンテナ作成手順
・React Native Emulator と接続する方法

SVGでボーンアニメーションできない世界に絶望しないためのLT

発表者:miyanokomiyaさん
docs.google.com

◆ 発表のポイント
SVGでボーンアニメーションを作った話
・資料作りの時間 < アニメーション作りの時間
・岡田ーマンのSVG素材+プロジェクトファイルをLT記念特別配布中
 →2021_06_30_LT_配布素材 - Google ドライブ
・主な使い方は以前zennにも書いたので参考に
 →SVG岡田ーマンに命を吹き込む9のステップ

モナコインの投げ銭機能付きQiitaみたいなサービスを作った話

発表者:石橋 龍(らいう)さん
drive.google.com

◆ 発表のポイント
・ユーザ認証でデジタル署名を利用する(パスワード不要でユーザ認証!)
 →クライアント側に必要なもの:クライアントで発行した秘密鍵
 →バックエンド側に必要なもの:ユーザの公開鍵
・フロント側のロジック + ブロックチェーン投げ銭ができる
・投機以外の用途で暗号資産を見てみると面白い応用がおもいつくかも?

GIthub
GitHub - Raiu1210/omaemona_front

フロントエンドエンジニアの採用情報

ラクスでは、フロントエンドエンジニアを募集中です!
ご興味ある方は以下内容をご確認ください。

ポジション 募集内容
マネージャー フロントエンドエンジニア/マネージャー(東京) | 株式会社ラクス
エンジニア フロントエンドエンジニア(東京) | 株式会社ラクス
※2021/12/02時点での情報です。

開発拠点は東京です。
SaaSプロダクトの技術スタックは以下ブログをご参考ください!

tech-blog.rakus.co.jp

終わりに

フロントエンド LT会で発表された内容はいかがでしたでしょうか?
少しでもフロントエンドの初学者や、現役フロントエンドエンジニアの皆様のご一助となれば幸いです。

なお、冒頭でお伝えしましたが、「フロントエンドLT会 - vol.5」は2022/1/19(水)に開催予定です!
毎度大盛況のイベントとなっておりますので、登壇/視聴されたい方は是非お申込みをお願いいたします。

イベントの詳細は以下をご確認ください!
フロントエンドLT会 - vol.5 #frontendlt - connpass

最後までお読みいただきありがとうございました!


  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    rakus.hubspotpagebuilder.com

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください!
    rakus.connpass.com

Copyright © RAKUS Co., Ltd. All rights reserved.