Coder's High 2022 (Part 2)

2022/10/14(金)21:00 〜 23:00 開催

ブックマーク

#iOS, #Android, #Swift

イベント内容

noteにてアーカイブ（スライド・動画）を販売しています。
「アーカイブを見たい方」「申し込みそびれてしまった方」はご利用ください。

https://note.com/cssnite/n/n9ebcb2d8afeb

毎年開催しているコーディング特集の第2弾としてショートセッション4組にて構成します。

Tailwind CSSを参考に自分用のユーティリティCSSを作る／田村章吾（ましじめ）
【快適】フロントエンド開発環境をwebpack で便利にしてみよう／宇井陸登（アップルップル）
Ionic × Capacitor × React / Web技術で作るスマホネイティブアプリ／佐藤あゆみ（necco）
相関関係から見るGoogleに理解されやすいコーディング／長谷川喜洋（How to Use）

セッション概要

4つのショートセッションで構成します。

Tailwind CSSを参考に自分用のユーティリティCSSを作る

Tailwind CSSを使っていますか？

Tailwind CSSはマニュアルも充実しており、CSSプロパティの早見表として使うこともできます。
直接案件で使う機会がなくても、仕組みを追ってみると学びがあります。

今回は、Tailwind CSSの状態管理の「hover:」や、レスポンシブユーティリティの「sm:」などと同じような仕組みをSassのMixinで作る方法を紹介します。

Tailwind CSSの良いところを知ることで、今の案件に役立つことも多いはずです。
Mixinのサンプルコードを用意していますので、ぜひCSSの勉強やご自身のユーティリティツールを作るきっかけにしてください！

田村章吾（たむら・しょうご）

ましじめ株式会社
代表

物の構造やバックグラウンドを見ることが好きで、自動車整備士の道へ進む。その後デジタルハリウッドでweb制作を学び制作会社へ転職。
2021年にましじめ株式会社を設立。
CSS設計に関する著書の経験があり、メンテナンス・運用のしやすいwebサイトの構築を得意とする。
受託では主にHTML・CSSから、CMSを利用したwebサイトの制作を担当。
また、焼き菓子を販売する「あしかクッキー」の運営も行なっている。

Twitter：@tamshow_

【快適】フロントエンド開発環境をwebpackで便利にしてみよう

便利で効率的なWebサイトの開発環境を構築するためにはビルドツールが必要になります。ビルドツールの中でもwebpackはThe State of JS 2021にて最も利用率が高く、人気のあるビルドツールとして紹介されています。

一方で、設定が複雑であり、慣れるまでは、どう設定してよいのかわからない…という状況に陥ることの多いツールでもあります。本セッションではwebpackの設定に毎回悩んでいるという方に向けて、開発時に便利な設定やプラグインを紹介します。

次のような方に聞いていただけると嬉しいです。

Web上の記事を参考にして、なんとかSCSSをCSSに変換してWebサイトに適用できるようになったけど、なぜか<style>タグで出力されてしまう…。本当は、いつものように<link>タグで読み込みたいのに…
何人かのチームでWebサイトのコーディングをしているが、人それぞれコードの書き方が異なっているため、チームメンバーが書いたコードをメンテナンスするときに時間がかかってしまう。どうにかチーム内でコードの書き方を統一したいんだけど…
webpackを活用した開発には少しなれてきて、今度はwebpackを活用したパフォーマンス・チューニングにも挑戦してみたいと思っている

その他、ソースコードの品質や、パフォーマンスの向上などに効果のあるものなど、便利な設定をモリモリ紹介します。

webpackを理解してより快適なコーディングライフを目指してみませんか？

宇井陸登（うい・りくと）

2021年に有限会社アップルップルに入社。1年間受託制作を担当した後、現在は、自社プロダクトである a-blog cms の開発・運用に携わっている。

最近の興味は、自作のReactライブラリをnpmに公開すること。MDNの翻訳活動もしています。

Ionic × Capacitor × React / Web技術で作るスマホネイティブアプリ

スマホアプリを自作したり、「スマホアプリ作れませんか？」と聞かれたことはありませんか。スマホアプリを作るためには、iOSならSwift、AndroidならKotlinなどのプログラミング言語を新しく習得する必要があります。つまり、iOSとAndroidの両ストアで配信したい場合には2つの言語を覚えなければなりません。

このセッションでは、HTML、CSS、JavaScriptをベースにネイティブアプリを作る流れやポイントを紹介します。

ウェブ＆ネイティブアプリに対応したUIフレームワーク「Ionic」
ウェブサイトをネイティブアプリに変換する仕組み「Capacitor」

あなたのスキルをスマホアプリの世界で活かしてみませんか？どんなアプリを作れるの？と思われた方は、Ionic x Capacitor を利用して制作したアプリ『つくる人』のための計算メモ帳 kanauをご覧ください。

佐藤あゆみ（さとう・あゆみ）

株式会社necco
CTO | フロントエンドエンジニア

2014年12月より、屋号「PentaPROgram（ペンタプログラム）」にてフリーランスとして独立。ウェブ専業ではない多様な業界の実情を見ながら、中小企業で「ウェブ担／パソコン担当さん」として業務を続けてきた経験を活かし、その後の運用を見据えたECサイトやコーポレートサイトの構築、技術サポートを行う。

2018年より、ismおよびCSS Nite、Bau-yaなどにてフロントエンド技術に関するテーマで登壇。

2019年、書籍『HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門』（技術評論社）出版。

2022年4月、株式会社neccoのCTO/取締役に就任。

Twitter: @PentaPROgram

相関関係から見るGoogleに理解されやすいコーディング

SNS上では、日々「正しいマークアップ」について侃々諤々と意見が飛び交っています。h1はロゴか見出しか複数使用するのかという話題などを見たことがないでしょうか。
Google検索では2021年8月のアップデートから、検索結果に表示されるタイトルの書き換えが非常に多く見られるようになり、この対策として「titleタグとh1タグの内容を揃える」という手法が広まりました。
少し視点を変えると、コーディングで優先する項目が変わってくるというわかりやすい事例です。

このセッションでは、コンテンツをGoogleにより正しく理解してもらうためのコーディングについてご紹介します。
例えばdescriptionについて、Googleはランキング要素ではないと明言していますが、適切なdescriptionの設定は有意な結果を示すケースが多く見られます。
ここでは直接のランキング要素ではないdescriptionなどを相関関係と定義して、事例とデータから紐解いていきます。

「検索エンジンがページの内容をより適切に認識できるように」とGoogleが明言している構造化データについても、VSCode用のスニペットをご用意していますので、ぜひ実践してみてください！

長谷川喜洋（はせがわ・よしひろ）

株式会社How to Use CTO/株式会社ステラクリエイト CEO/総合webサービスタダフラ代表/デジタルハリウッドSTUDIO大阪・京都芸術デザイン専門学校講師/星のソムリエ®

知財を扱うスタートアップでシステム開発・Webサイト制作・アプリ開発を担当。フリーランスとしてWeb制作も行う。

EC時代に天体望遠鏡を販売していた経験から、星空事業を主とした法人を2020年6月に設立。

イベント概要

開催日：2022年10月14日（金）21:00 - 23:00
- （最大24:00までアフタートーク）
形式：オンライン（Zoomウェビナー）
主催：CSS Nite
共催：DTP Transit
備考：UDトークにて字幕をご用意しています。
参加費（お一人）：
- 5,000円（経費で参加）
- 3,000円（自腹で参加）
「協賛企業枠」のチケットは、CSS Niteに年間で協賛してくださっている企業向けです。

参加資格などはありません

お仕事内容にかかわらず、興味があれば、どなたでもご参加ください！
学生や休職中、求職中の方も歓迎です。

当日の進行などに関して

開演の30分前くらい前（20:30くらい）からテスト配信をスタートしますので、音声などが聞こえるかチェックされてください。
開演の15分前から「椅子ヨガ」を行います。
終演時間は若干の延長の可能性があります。
途中に5-10分程度の休憩をはさみます。

ツイートなどの発信やスクショに関して

配信URL、および、その他の案内事項は、カウントダウンメールにてお知らせするNotionのフォローアップページに記載しています（終了後、スライドやリンク集、セミナー内容の補足などを掲載します）。
ツイートされる方はハッシュタグを付けてください！
スクショ（スクリーンショット）は自由にどうぞ！（事例の部分などでNGマークがついている箇所はご遠慮ください）
スクショされるとき、講演者の顔が入ってもOKです。
ツイートされたり、ブログに掲載されてもOKです。
サンプルファイルや配布資料をそのまま再配布するのは、ご遠慮ください。

その他

開催前に「カウントダウンメール」、開催後に「フォローアップメール」をお送りします。こちらを必ずご一読ください。
本セミナーのタイトルや内容は調整されることがあります。

オンライン椅子ヨガ

今回のCSS Niteはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

20:45-20:58　開演まで
21:55-22:05　休憩時間（前後することがあります）

一緒に「ちょっとメンテ」しましょう。
https://chotto-maint.com/online-yoga

タイムテーブル

タイムテーブルはあくまでも目安で、状況に応じて調整しながら進めます。

時刻	コンテンツ
20:30	配信開始
20:45	「椅子ヨガ」
21:00	番組開始、オープニング
21:10頃	本編開始
22:00前後	休憩（椅子ヨガ）
23:00	終了予定
23:10	アフタートーク
24:00	完全に終了