- 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の勉強やご自身のユーティリティツールを作るきっかけにしてください！
【快適】フロントエンド開発環境をwebpackで便利にしてみよう
便利で効率的なWebサイトの開発環境を構築するためにはビルドツールが必要になります。ビルドツールの中でもwebpackはThe State of JS 2021にて最も利用率が高く、人気のあるビルドツールとして紹介されています。
一方で、設定が複雑であり、慣れるまでは、どう設定してよいのかわからない…という状況に陥ることの多いツールでもあります。本セッションではwebpackの設定に毎回悩んでいるという方に向けて、開発時に便利な設定やプラグインを紹介します。
次のような方に聞いていただけると嬉しいです。
- Web上の記事を参考にして、なんとかSCSSをCSSに変換してWebサイトに適用できるようになったけど、なぜか<style>タグで出力されてしまう…。本当は、いつものように<link>タグで読み込みたいのに…
- 何人かのチームでWebサイトのコーディングをしているが、人それぞれコードの書き方が異なっているため、チームメンバーが書いたコードをメンテナンスするときに時間がかかってしまう。どうにかチーム内でコードの書き方を統一したいんだけど…
- webpackを活用した開発には少しなれてきて、今度はwebpackを活用したパフォーマンス・チューニングにも挑戦してみたいと思っている
その他、ソースコードの品質や、パフォーマンスの向上などに効果のあるものなど、便利な設定をモリモリ紹介します。
webpackを理解してより快適なコーディングライフを目指してみませんか？
Ionic × Capacitor × React / Web技術で作るスマホネイティブアプリ
スマホアプリを自作したり、「スマホアプリ作れませんか？」と聞かれたことはありませんか。 スマホアプリを作るためには、iOSならSwift、AndroidならKotlinなどのプログラミング言語を新しく習得する必要があります。つまり、iOSとAndroidの両ストアで配信したい場合には2つの言語を覚えなければなりません。
このセッションでは、HTML、CSS、JavaScriptをベースにネイティブアプリを作る流れやポイントを紹介します。
あなたのスキルをスマホアプリの世界で活かしてみませんか？ どんなアプリを作れるの？と思われた方は、Ionic x Capacitor を利用して制作したアプリ『つくる人』のための計算メモ帳 kanauをご覧ください。
相関関係から見るGoogleに理解されやすいコーディング
SNS上では、日々「正しいマークアップ」について侃々諤々と意見が飛び交っています。h1はロゴか見出しか複数使用するのかという話題などを見たことがないでしょうか。
Google検索では2021年8月のアップデートから、検索結果に表示されるタイトルの書き換えが非常に多く見られるようになり、この対策として「titleタグとh1タグの内容を揃える」という手法が広まりました。
少し視点を変えると、コーディングで優先する項目が変わってくるというわかりやすい事例です。
このセッションでは、コンテンツをGoogleにより正しく理解してもらうためのコーディングについてご紹介します。
例えばdescriptionについて、Googleはランキング要素ではないと明言していますが、適切なdescriptionの設定は有意な結果を示すケースが多く見られます。
ここでは直接のランキング要素ではないdescriptionなどを相関関係と定義して、事例とデータから紐解いていきます。
「検索エンジンがページの内容をより適切に認識できるように」とGoogleが明言している構造化データについても、VSCode用のスニペットをご用意していますので、ぜひ実践してみてください！
