セラクの「みんなの情熱大学」では最新テクノロジーや先端領域に関わるセミナー等、イベント運営をしています。専門領域を越えて議論のできる仲間と出会い、共によくなる環境と学習の機会を提供しています。
今回の講師はWebエンジニア、データサイエンティストとして活躍する中村さん。名古屋大学時代にpythonを学び一度別の業種で働くも、プログラミングの世界に惹かれセラクに入社。
現在の業務で今回のセミナーテーマでもあるVue.jsを使ったWebアプリケーションの開発を担当しています。フロントエンドに留まらずサーバーサイド、インフラ、データサイエンス等、幅広い知見があり、データを活用したWebアプリケーション開発を得意としています。
｡oＯo｡.:*:.｡oＯo｡.:*:.｡oＯo｡.:*:.｡oＯo｡.:*:.｡oＯo｡.:*:.｡oＯo｡
Veu.jsとは？そのメリット
最近何かと話題の「Veu.js」。イベント申込者が、25名の定員に対し最大48名集まったことからも、その関心の大きさが伺えます。
Vue.jsは、WebアプリケーションをJavaScriptで構築する際、その導入コストの低さが魅力的なフレームワークです。
メリットは次のとおり
・動作が軽い
・簡素なフレームワークなので、教育コストが低い
・それに伴って、現場の導入コストが低い
・データバインディングにより、リアルタイム更新が可能
・ライブラリが豊富かつ、機能的に充実している
SPAとは？
今回はこのVeu.jsを用いて、SPA（シングルページアプリケーション）開発をハンズオンしてみました。
SPAのメリットは、サーバーに対するhttpリクエストが一回で済むこと。つまり、ページ移動の度にhttpリクエストをしなくてよいので、いろんな機能がのっているWebページ移動がストレスフリーになります。
素人の所感でたとえるなら、通常のWebページは、必要に応じて本棚から一冊ずつ本を持ってくるやり方。SPAは、たくさんの本を持ってきて、作業台で調べものをする感じです。
SPAのほうが全体の手間は少ないですが、最初だけたくさんの時間がかかります。
Vue.js開発環境セットアップから、基本機能、
今後の展開まで
講義ではまず、Vue.jsでの開発が容易になるよう、VueCLIをセットアップすることから始めました。
その後は、コードを弄りながら、Vue.jsでの開発で、基本となる機能を使っていきました。
・toggle関数によって、ボタン入力でページ表示を切り替える方法
・ある機能を使い回しできるよう独立化した子コンポーネントへ、親コンポーネントデータを渡すpropsというオプション
・各ページ間切り替えを中継するvue-routerの設定
・アプリケーションの一部にサーバー内データを反映するため、axiosライブラリの導入
また、今後の展開として、各コンポーネント間のデータ受渡しの方向を定義するVuex、サーバーサイドレンダリングやPWA開発に活用できるNuxtなど、Vue.jsの可能性を示す講義でした。
懇親会にて情報共有
終了後は恒例の懇親会。ピザやお菓子が並び、お酒も進みました。
少し難易度が高かったのか、質問や会話が尽きない一時間でした。
アンケートからは、
「サーバーサイドと組み合わせたらさらに楽しくなりそう。」
「ネットでの資料公開助かりました。」
「少しついていくのが難しかったです。」
「濃い内容で良かったです。次の勉強方法も教えて頂き、今後に繋げていけそうです。」
「すぐ業務に応用できそうです。」
との感想が頂けました。
参加してくださった皆様、ありがとうございました。
次回の「みんなの情熱大学」もよろしくお願いします。
【文 ITビジネスイノベーション事業部 A.T】
0コメント