Doorkeeper

『JavaScriptコードレシピ集』の著者に学ぶ はじめてのJavaScript

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

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

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

事前 5,000円 前払い
早割(7月末まで) 4,000円 前払い
協賛企業枠 無料
出演者、スタッフ 無料

詳細

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

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

『JavaScriptコードレシピ集』の著者である鹿野 壮さんにJavaScriptを初めて学ぶ人や、学び始めた人を対象に、JavaScriptの基本的な使い方をお話いただきます。

『JavaScriptコードレシピ集』の著者に学ぶ
はじめてのJavaScript

JavaScriptを使えば、ユーザーの操作によって動きをつけたり、時間や状態によって表示を変更したり、モーダルウィンドウを作ったりすることができます。ウェブ制作において、HTML・CSSと並んでJavaScriptは必須といえるでしょう。
しかし、HTMLやCSSと比べて、JavaScriptの学習難易度が高いと感じている方も多いのではないでしょうか?

本セミナーでは、話し手として『JavaScriptコードレシピ集(共著、技術評論社)』の著者である鹿野 壮、聞き手としてデザイナーの松下 絵梨という構成で、JavaScriptを初めて学ぶ人や、学び始めた人を対象に、JavaScriptの基本的な使い方を取り上げます。

初心者向けとは言っても侮ることなかれ!教える内容はJavaScriptの最新の仕様(ES2022)に準拠しており、開発の現場でフロントエンドエンジニアが使うレベルのコードをお教えします。

次の方が対象です。お気軽にお申し込みくださいませ。

  • 初めてJavaScriptを学ぶ人
  • これまでjQueryを使っていた人
  • どこからJavaScriptを学べばいいかわからない人
  • 自分の書くJavaScriptに不安がある人

セッション内容

目次

各Phaseは、基本文法を学ぶ基礎編と、実際に作例のコードを書いていく実践編に分かれているので、JavaScript初学者の方でも一つ一つ理解しながらご受講いただけます。

作例 1 時間に応じた背景切り替え

時間帯によってフッターのデザインを変えたい

時間時間に応じて、CSSのクラスをつけかえる

Phase 1 シンプルバージョン

  • JavaScript の処理を記述する
  • アラートダイアログを表示する
  • コンソールに内容を出力する
  • 「変数」を使ってデータを使い回す
  • 「定数」を使ってデータを使い回す
  • 文字列を結合する①
  • 文字列を結合する②
  • 条件に応じて処理を分ける( if 文)
  • HTML 要素を取得する

Phase 2 関数バージョン

  • 「関数」を使って処理をひとまとめにする
  • 「アロー関数」って何?

作例 2 モーダルウィンドウ

モーダルウィンドウを出したい

サムネイルをクリックしたら、クラスを付与

Phase 1 シンプルバージョン

  • 複数のHTML要素を取得する
  • HTML要素をクリックしたときに処理をする
  • data属性から値を取得する

Phase 2 配列バージョン

  • 「配列」を使って複数の値をひとまとめにする
  • 「配列」を使って複数の値をひとまとめにする①
  • 「配列」を使って複数の値をひとまとめにする②
  • 「オブジェクト」を使って、名前と画像パスをひとまとめにする
  • JavaScript で HTML 要素を作る
  • JavaScript で HTML 要素を画面上に追加する

Phase 3 前後ボタンつきバージョン

  • 自分の値に別の値を足す

『JavaScriptコードレシピ集』とは

株式会社ICS 池田泰延と鹿野壮が執筆したJavaScriptの書籍。ウェブ制作の現場で使えるJavaScriptの知識を、フルカラー・600ページ超で解説している。現在第4刷。

『JavaScriptコードレシピ集』をお持ちでなくても受講いただけます。

出演

  • 鹿野 壮さん:フロントエンドエンジニア
  • 松下 絵梨さん:デザイナー

鹿野 壮(かの・たけし)

株式会社マネーフォワードビジネスカンパニー 経理財務プロダクト本部会計開発部副部長 兼 UIテクノロジーグループリーダー

九州大学でメディアアートを学んだ後、ウェブ制作会社にてウェブページ制作やモバイルアプリ開発に携わる。現在は株式会社マネーフォワードで、フロントエンドチームのリーダーをしている。最新のフロントエンド技術を駆使したコンテンツづくりが好きで、暇があればコードを書いている。TechFeed公認エキスパート。

近著に『JavaScript コードレシピ集』(技術評論社)がある

松下 絵梨(まつした・えり)

松下絵梨

ツキアカリ

大阪出身大阪在住のWeb/UIデザイナー。東京理科大学理工学部卒業。

通信機器メーカーで開発・サポート業務に従事したのち、デザイン・広報秘書業務に転身。2010年よりフリーランスとして独立し、DTP/Web/アプリデザイン、ディレクションを行なっている。

講師業や、「Adobe XD ユーザーグループ大阪」、「CSS Nite in Osaka」の運営、セミナー登壇・企業研修にも力を入れている。 2020年に『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』(翔泳社)を上梓。

イベント概要

  • 開催日:2022年8月20日(土)21:00 - 23:00
    • (最大24:00までアフタートーク)
  • 形式:オンライン(Zoomウェビナー)
  • 主催:CSS Nite
  • 共催:DTP Transit
  • 参加費(お一人):
    • 5,000円
    • 4,000円(早割:7月中)

終演時間は若干の延長の可能性があります。

  • 「協賛企業枠」のチケットは、CSS Niteに年間で協賛してくださっている企業向けです。[会社名]または[その他、連絡事項など(あれば)]に、所属企業名をご記入ください。

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

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

フォローアップページ(Notion)

次の情報をまとめたフォローアップページ(Notion)を用意し、カウントダウンメールにてお送りします。

  • 事前フォローアップ(スライドやリンク集)
  • 当日の配信などに関する情報

ご一読ください!

当日の進行などに関して

  • 20:30以降にZoomにログインしてください。Zoomアプリは最新版にしておくことをオススメします。
  • 20:45から「椅子ヨガ」を予定しています。
  • 質問はSlidoに記入ください。匿名で送信できます。
  • ツイートされる場合には、ハッシュタグは「#はじめてのJavaScript」をお付けください。
  • 終演時間は若干の延長の可能性があります。また、終了後、「アフタートーク」を予定。

視聴に関して(1)

  • Zoomの視聴URLは当日に再確認をお願いします。
  • 参加される方のカメラ、マイクは自動的にOFFになっています(ONにできません)。
  • 画面共有でスライドやデモ画面を表示しますので、PCでの参加をおすすめします(スマホ/タブレットでも参加できます)。
  • 内蔵スピーカーでは聞き取りづらい場合があります。イヤホン・ヘッドホンの利用を推奨します。
  • 120分程度の接続で数百MBのデータ通信が必要です。通信制限の上限等にご注意ください。

視聴に関して(2)「音声が途切れる。画面が遅延する/カクカクする」場合

  • Zoomから退出したり、PCを再起動するなどして再度接続してみてください。
  • バックグラウンドで走っているアプリケーションを終了することで改善されることもあります。
  • 可能であればWi-Fiでなく有線で接続してみてください。
  • 改善されない場合には、後日提供する動画をご覧ください。

後日の視聴

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

お振込の方

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

その他

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

タイムテーブル

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

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

オンライン椅子ヨガ

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

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

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

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年にスタートし、2022年10月で丸17年。 仙台、大阪、岡山、札幌、甲府、神戸、福岡、長野、青森、名古屋、沖縄、福島など首都圏以外での“地方版”なども開催しています。地方版は、現地の有志などにより主催・運営されています。 これまでに、800回を超える関連イベントを通して、のべ75,000名...

メンバーになる