菅野亜実

PixelGrid Inc. / フロントエンド・エンジニア

高校在学中からフリーランスとしてWeb開発に携わり、卒業後は都内のIT企業にてフロントエンド・バックエンドともに設計・実装の主力となる傍らで、HTML・CSS・VBA・Laravelなどの勉強会講師も経験した。次第にアクセシビリティやグラフィック表現に携わりたいという思いが強くなり、フロントエンドの道を選ぶ。Webクリエイティブに対して幅広い関心を抱くが、CGや画像処理の領域にも関心があり、SVG、WebGL、GLSLを使ったグラフィック表現を探求している。2022年にピクセルグリッドに入社。

シリーズ

デバッグ
DevToolsを使ったJavaScriptのデバッグ
1. 第1回2025年01月30日
  無料公開中ブレークポイントの基本
2. 第2回2025年02月13日
  無料公開中ブレークポイントを使った変数や関数の追跡
3. 第3回2025年02月20日
  無料公開中ブレークポイントのさまざまな設定方法
4. 第4回2025年03月06日
  無料公開中 DOMのデバッグ：前編
5. 第5回2025年03月21日
  無料公開中 DOMのデバッグ：後編
6. 最終回2025年04月10日
  無料公開中イベントのデバッグ
菅野亜実フロントエンド・エンジニア
働き方座談会
メンター・メンティー座談会
1. 2025年03月21日
  無料公開中フルリモート環境で自走できる若手を育てる工夫
CSS設計会社サイトの設計
会社サイトリニューアルの検討と実際：実装編
1. 第1回2023年08月31日
  無料公開中データ・コンテンツ・レイアウトの分離
2. 第2回2023年12月21日
  無料公開中コンテンツの構造化とコンポーネント
3. 第3回2024年09月26日
  無料公開中 OGP画像を自動生成する仕組み：前編
4. 第4回2024年10月10日
  無料公開中 OGP画像を自動生成する仕組み：後編
テキスト処理
Rehype Pretty Codeを使いこなす
1. 第1回2024年05月30日
  無料公開中導入とコードブロックのスタイリング
2. 第2回2024年06月13日
  無料公開中インラインコードとテーマの変更
3. 第3回2024年06月20日
  無料公開中行番号と行の強調ハイライト
4. 第4回2024年07月04日
  無料公開中コードブロックで使えるレシピ集
5. 第5回2024年07月18日
  無料公開中 Visitor Hooksで実現する色プレビュー前編
6. 最終回2024年08月01日
  無料公開中 Visitor Hooksで実現するインライン色プレビュー後編
菅野亜実フロントエンド・エンジニア
Astro Webフォント／アイコンフォント
astro-iconを使ったアイコンの実装と管理
1. 第1回2023年02月24日
  無料公開中 astro-iconのメリットと基本的な使い方
2. 第2回2023年03月09日
  無料公開中アイコンのスタイリングとスプライト化
3. 第3回2024年03月21日
  無料公開中 astro-icon v1の変更点と進化（前編）
4. 最終回2024年03月28日
  無料公開中 astro-icon v1の変更点と進化（後編）
菅野亜実フロントエンド・エンジニア
キャリアパスインタビュー
エンジニアに聞く、仕事の行方
1. 第1回2013年03月21日
  無料公開中山田・德田編
2. 第2回2013年03月28日
  無料公開中外村・高津戸編
3. 第3回2013年04月04日
  無料公開中小山田・中村編
4. 第4回2013年05月16日
  無料公開中山田敬美編
5. 第5回2013年06月20日
  無料公開中小原司編
6. 第6回2013年11月21日
  無料公開中坂巻翔大郎編
7. 第7回2014年04月10日
  無料公開中中島直博編
8. 第8回2015年05月14日
  無料公開中宇野陽太編
9. 第9回2016年03月24日
  無料公開中杉浦有右嗣編
10. 第10回2016年05月19日
  無料公開中大杉充編
11. 第11回2016年07月28日
  無料公開中森大典編
12. 第12回2017年05月04日
  無料公開中矢倉眞隆編
13. 第13回2017年08月24日
  無料公開中奥野賢太郎編
14. 第14回2018年03月15日
  無料公開中藤田智朗編
15. 第15回2018年09月27日
  無料公開中國仲義則編
16. 第16回2020年11月12日
  無料公開中中野祐人編
17. 第17回2022年02月17日
  無料公開中渡辺由編
18. 第18回2023年11月09日
  無料公開中近藤彩編
19. 第19回2023年12月14日
  無料公開中菅野亜実編
機能拡張
VS Code拡張機能開発
1. 第1回2023年08月03日
  無料公開中拡張機能プロジェクトのコード構造と処理の流れ
2. 第2回2023年08月10日
  無料公開中拡張機能の設計とハイライト表示の実装
3. 第3回2023年09月07日
  無料公開中ステータスバーのカスタマイズ
4. 第4回2023年09月21日
  無料公開中ハイライトへスクロールするコマンドの実装
5. 第5回2023年10月05日
  無料公開中 UI経由でのコマンドの呼び出し
6. 最終回2023年10月19日
  無料公開中 settings.jsonとの連携によるカスタマイズ
菅野亜実フロントエンド・エンジニア
キャリアパスインタビュー
根掘り葉掘り、先輩に聞いてみた
1. 第1回2023年07月20日
  無料公開中どうすれば、自分の強みが見つかりますか
2. 第2回2023年08月31日
  無料公開中どうやって知識を獲得したのですか？：前編
3. 第3回2023年10月05日
  無料公開中方向性が見えました：後編
バリデーション
データ形式の検証ライブラリ、Zodを使う
1. 第1回2023年04月13日
  無料公開中 Zodの特徴と基本的な使い方
2. 第2回2023年04月27日
  無料公開中エラーメッセージのカスタマイズ
3. 第3回2023年05月11日
  無料公開中「いずれかにマッチすればよい」を表現する
4. 最終回2023年05月25日
  無料公開中データの変換と遅延評価
菅野亜実フロントエンド・エンジニア