Posted at

2019 7月・令和元年・Nuxt .js・LIFF動向


はじめに

この記事は、WebBenchというプログラミングを「アクティブラーニング」形式で、

学ぶ勉強会を実施している筆者が分かりやすくプログラミングの技術を伝達するために作成しました。

過去に何回か、セミナーを都内で実施しております。

団体の説明などはこちら→Web Bench 公式 https://twitter.com/bench_web

note→https://note.mu/kaji_____/n/n50c684f7eb6b


Nuxt.jsとは、何ぞや

Nuxt.js(ナクストと読みます)とはユニバーサルなVue.jsアプリケーションを構築するためのフレームワーク

*UI構築のためのJSライブラリと思っていただければ大丈夫です。

*React.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。

UIの描画サポート、SSRをはじめとした様々なサポートを行ってくれるものとなります。

*SSR(サーバサイドレンダリング)とは「(元々ブラウザ上でしか動かなかった)JavaScriptをサーバー内部で実行して、HTMLを生成すること」を指します。

https://nuxtjs.org/

引用・参考資料・Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発

https://html5experts.jp/potato4d/24346/


環境セットアップ

Node.jsのインストール

自分のPCのターミナルで $ node –vでバージョン確認できます

【Mac】 Homebrewを使う場合→brew –vでバージョン確認

$ brew update

$ brew install node.js

【Windows】http://nodejs.org/ja/から最新版をDL


vue-cliを利用

$ npm install -g vue-cli # 既にvue-cli を導入されているかたについて は不要です

$ vue init nuxt-community/starter-template nuxt_sample


サンプルプロジェクトのセットアップ

$ cd nuxt_sample

$ yarn
$ yarn dev


環境セットアップが難しいかた

Code sandboxというサービスを利用

https://codesandbox.io/

ブラウザ上で動くエディタ

npm package対応している。

こちらでも十分に演習することは可能です


以下・参考URL/記事

公式https://nuxtjs.org/

ルーティングの追加と非同期データの取得

Nuxt.js 上での開発における babel の対応文法のソース(設定プリ セット)https://github.com/vuejs/babel-preset-vue-app

参照URL https://html5experts.jp/potato4d/24346/

Laravel+NuxtでLIFFアプリを作ってみた

Laravel Vue.js LINE LIFF

https://techblog.scouter.co.jp/entry/2019/03/14/120000


LIFFとは

LINEアプリ上で動くフロントエンドのフレームワーク。

こちらもNuxtと組み合わせて使用されることがユースケースとして増えている

https://developers.line.biz/ja/docs/liff/overview/