フロントエンド勉強会〜Nuxt.jsを使って静的サイトを作ろう〜を開催しました！
2019年10月2日（水）に、「フロントエンド勉強会〜Nuxt.jsを使って静的サイトを作ろう〜」を開催しました。実際に Nuxt.js を使って実装したサイトのコードを参考に、軽量で快適な静的サイトの作成について学びました。
今回の講師：中村耕一朗 さん
ゼロイチCafeスタッフ
東京工芸大学 芸術学部 インタラクティブメディア学科 3年
大学ではソフトウェアデザインの研究をしている。2018年頃からプログラミングを始め、2019年8月から Web のフロントエンドエンジニアとしてインターンをはじめる。デザイナーとしても活動していて、最近では自社のコーポレートサイトを Nuxt を使ってイチからリニューアルした。
Nuxt.js の基礎
中村さんは、まず Vue.js やNuxt.js とは何かというところからはじめ 、 最近の Web フロントエンドをとりまく技術であるシングルページアプリケーションやサーバーサイドレンダリングの基礎についても解説しました。 また、初心者の方でもすぐに Nuxt.js の環境を構築できる create-nuxt-app コマンドについても説明しました。 移り変わりの早い Web の技術ですが、フロントエンドエンジニアとして知っておくべき情報をわかりやすくまとめた解説でした。
コーポレートサイトの解説
先日株式会社ライトマークスのコーポレートサイトを Nuxt.js を使ってリニューアルした中村さん。実際のコードを参考にそのサイトを解説しました。他の Web サイトでもよく目にする、スクロールに応じて要素が出現するアニメーションについては、Nuxt のカスタムディレクティブという仕組みを利用することで比較的簡単に実装することができたそうです。デザイナーの肩書も持つ中村さんは Web フォントについてもこだわりがあるそうで、適切なフォントファイルの作成方法や、Nuxt.js でのファイル配置についても熱く語ってもらいました。
参加者の声
今回の勉強会では参加者の方から以下のような感想を頂きました。Web系のプログラミング技術に興味を持ってもらえるいい内容となったようです。参加者の皆様、中村さんありがとうございました。
- web系言語をProgateで基本は学んでいて、ある程度の演出は知っていたものの、今回のNuxt.jsではhtmlcssなどのコードを共有する手段が非常に簡略化されていて手間が省けてて良いと思いました。 webで動的に表示させるための技術が意外にも単純であることがわかりました。おそらく自分自身で調べるには多くの手間がかかっていたと思います。web系プログラミング技術に対して深い関心を持てました。(学生 工学部)
- NuxtとVue、Next、Reactの関係を知って面白く思いました。Vueだとアニメーションのプロパティの設定など簡単にできると感じました(学生 理工学部)
- とても面白かったです。 フォントの話などは、全て全く聞いたことがなかった内容だったので、ためになりました。 アニメーションのコードも、自分で読んでいても難しかったので、解説がきけて嬉しかったです。 もう一回ググりながら解読してみます。 ありがとうございました。(学生 理工学部)
ゼロイチCafeの勉強会イベントに参加しませんか？
ゼロイチCafeでは定期的に勉強会イベントを開催しています。学生ならどなたでも参加できるので気軽にお申し込みください！