近況
僕がこれから挑戦してみたい実験について共有したいと思う。僕がソフトウェア開発やフロントエンドの世界に入ってから、もうすぐ最初の10年を迎えようとしている。フロントエンド百花繚乱の戦国時代を経験したことは、その後のフロントエンドの変化や気づきを理解する上で大いに役立っている。ブログではすでに多くの記事をシェアしてきたけれど、実のところ、まだ書ききれていない共有したいことがたくさんある。
Frontend Recharged
ここで「フロントエンド充電ステーション(Frontend Recharged)」プロジェクトを紹介したい。これは数週間にわたる(具体的に何週間になるかは僕にもまだわからない)プロジェクトで、ライブ配信や記事の執筆を通じて、ネットワークの仕組みからUIの細部、モダンなブラウザAPIやCSS、デバッグ、パフォーマンス最適化、さらにはChatGPTやLLMの活用法までを紹介していく予定だ。最終的にはオンライン講座になるかもしれない。
一般的な講座と少し異なるのは、特定のフレームワーク(例えばReactやVueなど)に過度に重きを置かないという点だ。もちろん実際の開発では例として使うけれど、フレームワーク自体がメインコンテンツになるわけではない。
フロントエンドのキャリアに関する相談を時々受けることがある。僕自身、フロントエンドの領域にはそこそこ長く携わってきたので、記事だけでなく動画などのコンテンツも増やして、これからこの業界を目指す開発者の力になれればと思っている。
扱わないこと
このプロジェクトは主に技術的な交流にフォーカスしており、ソフトウェア開発論、マネジメント、コラボレーション、またはひとつのプロジェクトを最初から最後まで完遂することなどには触れない。
対象者
実務で働いているエンジニア、またはすでにウェブ開発の経験がある独学者(JS、HTML、CSSがおおよそどのように書けるかを理解している人)。
進行方法
毎週YouTubeでライブ配信を行い、週ごとにひとつのテーマを選んで進めていく。配信内では達成すべき明確な目標を設定し、Discordを通じてディスカッションを行う。
応募方法
現在このプロジェクトは準備段階にあるため、まずは少人数のメンバーと詳細を詰め、本当にみんなの役に立つ形を作り上げた上で本格的に実施したいと考えている。
現時点では縁のある人6名ほどを募集する予定だ。以下の条件に当てはまる人に参加してほしい:
- プログラミングに興味があり、すでにウェブ開発の経験があること(少なくともJS、HTML、CSSが何であるかを理解し、完成したウェブページを作った経験があること)
- シェアすることが好きであること:例えばブログを運営している、GitHubでメンテナンスしているコードや個人プロジェクトがあるなど
- 積極的に意見を出せること
僕と一緒にこのプロジェクトの方向性を議論し、実際にプロジェクトが始動した際には、すべてのコンテンツを優先的かつ無料で視聴できる。もし偶然この記事を見かけて興味を持ったなら、ぜひ me@kalan.dev 宛てにメールを送ってほしい。自己紹介や、このプロジェクトに対する考え、期待などを書いて送ってもらえればと思う。状況に応じて人数は調整する予定だ。
「とりあえず応募してみよう」という気持ちでの応募は控えてほしい。まずは僕のブログ記事や YouTube 動画 を確認し、僕のスタイルが自分に合っている、役に立ちそうだと確信できてから応募することをおすすめする。
もしあなたが完全な初心者で、他の講座では役に立たずどうしても応募したいという場合は、メールを送ってもらっても構わない。ただ、初心者の場合は他の講座を受講するか独学で基礎を固めるほうが、間違いなく大きな助けになるはずだ。
僕について
僕は愷開(Kalan)。2016年頃にフロントエンド開発の世界に入り、フロントエンド開発に関する記事をたくさん書いてきたほか、様々な個人プロジェクトを作ったり、多種多様な企業のプロジェクト開発に参画したりと、それなりに豊富な経験を積んできた。ここ数年は他の領域も積極的に模索している。より詳しい自己紹介はこちらで見ることができる。
関連記事
- Three.js で僕の部屋を表現する 僕が React Three Fiber を使って実際の自分の部屋をブラウザ上に再現し、実世界のオブジェクトを目録に見立て、空間の記憶を通してここ数年の生活と仕事について語った話。
- フロントエンドで画像を扱う際に注意すべきこと Jake Archibaldの記事を起点に、現代のレスポンシブ画像の書き方を整理する。なぜwidth/heightを付ける必要があるのか、CSSのaspect-ratioはいつ使うべきか、AVIFとWebPの選び方、そしてpicture/source/srcsetを使ったモバイル向け画像の切り替えについて。
- CSS field-sizing — たった1行のCSSでフォーム要素を自動リサイズする かつてtextareaの自動高さ調整は、JavaScriptでscrollHeightを監視するしかなかった。しかしCSSのfield-sizing: contentなら、わずか1行で代替でき、textarea、input、selectに対応している。本記事では従来のやり方のペインポイントと、field-sizingの使い方をまとめる。
- リンクの下線をもっと見栄え良くする:text-underline-offset デフォルトでは下線と文字が近すぎて、このスタイルを好まないデザイナーもいるし、僕自身もあまり綺麗ではないと感じていた。