こんにちは。フロントエンドのつっちーです。
昨年12月26日、「Creators MeetUp#53 x HTML5minutes!#12」というイベントで、Nuxt.jsについてお話ししてきました。
今回は、このイベントについて振り返りつつ、私の発表内容についても紹介しようと思います。
Creators MeetUp#53 x HTML5minutes!#12
このイベントは、「Creators MeetUp」（以下CMU） と 「HTML5minutes!」 のコラボレーションイベントで、共催である株式会社メンバーズキャリアさんのオフィスにて開催されました。
それぞれのイベントについて
Creators MeetUp
「Creators MeetUp」はクリエイター同士で刺激し合ってクリエイティビティを高めて、それを制作現場にフィードバックしてもらうことを目指すイベントです。 参加者の業種・職種は問いません。どなたでも参加自由です。 登壇者も毎回様々な立場の方が登場するので色々な話を聞いてモチベーションアップにつながればなによりです。
今回でなんと53回目にもなる歴史あるイベントです。
主催の小島 勝茂さんによると、15分という制限時間が話しやすく、雰囲気も和やかなので、登壇経験の少ない方にもオススメだそうです。今回は「HTML5minutes!」のルールが採用されて5分制限でしたが、本当に和やかな空気で、あまり緊張せず話すことができました。
プログラミングに限らず様々なお話が聞けるという点も魅力的なので、以降も是非また参加させてもらいたいと思っています！
HTML5minutes!
2014年は、15年ぶりとなるHTMLの新バージョン、HTML5の正式は勧告が行われた年となりました。すでにほとんどのブラウザが対応を完了していることもあり、Webの標準化に向けて、HTML5の需要は大きく伸びるものと思われます。
これを受けて我々は、HTML5やCSS3、JavaScript、SVG、WebGLなどの周辺領域を含めた「広義のHTML5」についての情報共有、技術向上、技術者ネットワーキングを目的とした場として、「HTML5minutes」を定期開催したいと思っています。
「HTML5minutes」は、「広義のHTML5」について「5minutes以内」で語るLTを10人程度行い、様々な角度からHTML5についての知見を広げ、LT終了後の懇親会でネットワーキングを行うイベントです。少しでもご興味のある方は、是非、晴海トリトンスクエア、メンバーズのラウンジまでお越しください。
こちらも今回で12回目と長く開催されているイベントです。
CMUと異なり、制限時間は5分のみ。1人あたりの時間が短い分、次々に違うお話を聞ける点が楽しかったです。この短時間に伝えたいことを収めるのは想像以上に難しいですが（私は今回、制限時間をオーバーしてしまいました。反省）、内容を上手くまとめるための良い練習にもなっているように感じました。
こちらにも、是非またお邪魔させてもらいたいと考えています！
当日の様子
Facebook上で、当日の映像が最初から最後までフルで（！）公開されていますので、是非ご覧ください。
高見 新さん『Webデザインのトレンドとフロントエンド』
フリーランスでWebデザイナーをされている 高見 新さん の発表内容は『Webデザインのトレンドとフロントエンド』でした。
モバイルファーストがトレンドとなった昨今は、Webサイトだけでなく、クライアントアプリやSNSなども含めたトータルのWeb体験を考慮するフェーズだ、というお話。たしかに、SNS上の表示や端末ホーム画面でのアイコン表示などは、一見細かい要素でありながらも、今では必須だと感じるようになってきました。
モバイルからのブラウジングが半数を超えている今、あらためて胸に刻んでおきたい内容でした。
稲葉 聡さん『Web Components入門』
LIGのフロントエンドエンジニアである 稲葉 聡さん（いなば） の発表内容は、『Web Components入門』。ライフサイクルフックまで用意されているとは知らず、かなり細かな機能を実装できそうで、夢が広がりました。
また、今後様々なライブラリやフレームワークが、これを取り入れたり、あるいはこれによって不要となったりするのだろうかと、想像したりもしました。
IEのサポート期間、短縮されないかな……。
入江 信之介さん『Google HomeとFirebaseでお手軽IoT』
株式会社カヤックのフロントエンドエンジニア である入江 信之介さん の発表内容は、『Google HomeとFirebaseでお手軽IoT』でした。
頭にかぶれるデバイスに戦隊ヒーローの顔が表示されていて、例えば「変身、レッド！」など「変身」の言葉と共に色を唱えるだけで、顔がその色に変わる！というものでした。手を使うこともケーブルもなくそれが実現されているところが、胸熱でした。
上の動画の59:40あたりで実演されていますので、ぜひご覧ください。
私の発表内容『Nuxt.jsで手軽に構築する モダン・フロントエンド開発環境』
さて、私の発表内容『Nuxt.jsで手軽に構築する モダン・フロントエンド開発環境』について、軽く詳細に触れたいと思います。
Nuxt.jsが、
- いかにフロントエンド開発に便利か
- いかにモダンで多機能か
- いかに手軽に導入できるか
というお話です。
当日のスライドはこちら。
Nuxt.jsとは？
Nuxt.jsは、Vue.jsのアプリケーションのDOM生成結果をファイル出力する機能を持つ、フレームワークです。
この機能によって、SPAのサーバーサイドレンダリングに用いたり、静的サイトジェネレーターとして利用することができます。バックエンドとフロントエンドを、APIとそれを利用するクライアントという分割で考えた場合、フロントエンド領域のかなり広範囲に対応できるのではないでしょうか。
Nuxt.jsが構築する開発環境
Nuxt.jsをセットアップすると、それだけで多くのモダンな機能を利用できます。
- JSの新しい文法や
- CSSのスコープや変数、接頭辞の自動付加
- HTMLでの自動的なファイル先読み設定から
- 小さな画像の自動インライン化まで
全部、勝手にやってくれます。ここに挙げたものはその一部で、他にも多くの機能を持っています。
Nuxt.jsの使い方
それら全てを1つずつ自分でセットアップするとなると大変ですが、Nuxt.jsのセットアップは簡単です。
$ npm i -g vue-cli $ vue init nuxt-community/starter-template <project-name> $ cd <project-name> $ npm iたったこれだけ！
必須となる知識も少なく、
-
- .vueファイルの記法
- pageディレクトリの構造がルーティングに利用されること
- headタグの設定方法
- aタグをnuxt-linkタグへ置換すると非同期遷移にできること
- 以上を把握していれば、あとはVue.jsを意識せずとも活用が可能だと思います。
さらに、日本語ドキュメントも用意されているため、必要に応じて素早く知識を増やしていけます。
Nuxt.jsのまとめ
Nuxt.jsは、手軽に導入できる、モダンで全部入りの、広汎なフロントエンドフレームワーク！
まとめ
「Creators MeetUp#53 x HTML5minutes!#12」、とても楽しいイベントでした！
今後も積極的に参加させてもらおうと思いますので、見かけることがありましたらよろしくお願いします。
また、LIGでも様々なイベントを開催しております！みなさまのお越しをお待ちしております。
そして、Nuxt.jsについては、今後どんどん活用していきたいと考えています。
同等のコンセプトを持つフレームワークは他にも存在しますが、手に入る機能に対する導入コストの低さはNuxt.jsが群を抜いているように感じます。
次にフロントエンド開発環境を構築される際には、みなさまも検討してみてはいかがでしょうか。
それではまた！つっちーでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
