Doorkeeper

Coder's High 2022 (Part 2)

2022-10-14(金)21:00 - 23:00 JST
オンライン リンクは参加者だけに表示されます。
申し込む

申し込み受付は終了しました

今後イベント情報を受け取る

経費で参加 5,000円 前払い
自腹で参加 3,000円 前払い
協賛企業枠 無料
出演者、スタッフ 無料

詳細

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サイトの制作を担当。
また、焼き菓子を販売する「あしかクッキー」の運営も行なっている。

【快適】フロントエンド開発環境を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完全に終了

後日の視聴

当日見られなかった方、および、改めて見返したい方には、5日後(翌月曜日)に発行するフォローアップメールにて視聴URLをお知らせします。

お振込の方

会社から複数名にて参加される場合には、まとめてお振込いただき、振り込み後にご一報ください。

FAQ(よく聞かれる質問と、その回答)

スマホでも見られますか?

もちろん可能ですが、スライドなどの画面の細かいところが見えにくいと思います。

参加資格はありますか?

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

Twitter/note/YouTubeをフォローください!

セミナー前後に関連情報をお出しすることがありますので、Twitter/note/YouTube/LINEをフォローくださいますと幸いです。

CSS Nite(シーエスエス・ナイト)は、ウェブ制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2021年10月で丸16年。

これまでに、800回を超える関連イベントを通して、のべ75,000名を超える方にご参加いただいています(2021年10月現在)。

協賛

CSS Niteは下記の企業に協賛、協力をいただいています。

また、多くの制作会社に協賛いただいています。

株式会社ヘルツ有限会社アップルップルともすた株式会社トゥーアール(to-R)株式会社Gear8Qiita株式会社株式会社エイチーム

コミュニティについて

CSS Nite

CSS Nite

CSS Nite(シーエスエス・ナイト)は、ウェブ制作に関わる方のためのセミナーイベント。2005年にスタートし、2021年10月で丸16年。 仙台、大阪、岡山、札幌、甲府、神戸、福岡、長野、青森、名古屋、沖縄、福島など首都圏以外での“地方版”なども開催しています。地方版は、現地の有志などにより主催・運営されています。 これまでに、800回を超える関連イベントを通して、のべ75,000名...

メンバーになる