コース: Vue.js 入門

Vue.jsとは

コース: Vue.js 入門

1ヶ月の無料トライアルを開始 法人向けサービス

Vue.jsとは

“

このレッスンでは Vue.js が どのようなライブラリなのかについて ご説明をします。 今開いているのは Vue.js のサイトです。 日本語のサイトが あるのが便利ですね。 ドメインは jp.vuejs.org です。 jp をつけずに vuejs.org という風に しますと、英語のサイトになります。 そして［Translations］で ［日本語］を選ぶと 日本語のサイトが開くということです。 ［はじめる］というところで スタートをするんでしょうけど ここでは例をご紹介しましょう。 Vue.js はユーザーインターフェースを 作るためのフレームワークです。 プログラミングで Vue と呼ばれる 画面の表示に関わる処理を扱います。 jQuery とかでは 手間がかかるようなインターフェースも 簡単にわかりやすく 組み立てられるのが特徴です。 まず今開いてるのは Markdown エディタの 上というふうになっているんですが 左側に Markdown という 書き方でテキストを書くと それが右に表示されます。 ハッシュ（#）１個は HTML でいうと h1 に当たるんですけど ですから大きめになってますね。 そしてハッシュ２つは h2 ということです。 それからダッシュ（-）を打つと リスト表示になります。 あるいはテキストの装飾ですけど アスタリスク（*）２つで挟むと 太字になり、 １個ですと 斜体になるということなんですが このような画面の作り、 これも Vue.js で 作られています。 それからコード、 結構短いんですね。 もっとも他のライブラリを 使っています。 他のライブラリと組み合わせが しやすいというのも Vue.js 特徴になっています。 あるいはグリッドコンポーネント とありますが 表計算のプログラムのように グリッドで表示されています。 これらの名前、それから パワーがあるんですけど ソートをしたり、 それから Search とありますけど 「j」と打つと ２人いますけれど 「ja」で「Jackie Chan」と、 こんな検索もできるわけです。 データと表示をうまく組み合わせて アプリケーションを作る、 そういったことに Vue.js は長けています。 あるいはさらに見た目 表示ですね、に特化すると、 こんなものもできるという例なんですが こちらがグラフですね。 そしてデータが 右に表示されています。 スライダーでデータが変わると それに応じて グラフの方も表示が 変わって来ると こういったものも Vue.js で作ることができます。 それからこのコースの中で 作る作成の１つです。 Todo リスト、やることリストですね。 今、項目が２つあって １個にはチェックが付いています。 やり終わったということなんですが 「全２件中残り１件」 まだやり残ってるよ ということです。 そして追加もできます。 Vue.js のサンプルを作る。 ［追加］ボタンを押すと 追加できます。 チェックをつけると 件数が変わってきますね。 全体で３件ですけれど、 やり残ってるのは１件。 それからこのボタンを押すと チェックのついたものは消えてしまいます。 さらに項目についている ［削除］のボタンで チェックがついていようが ついていまいが消えてしまう。 このようなものも実際に Vue を使って作ることになります。 このレッスンでは Vue.js が どのようなライブラリなのか ということについて ご説明をしました。 Vue と呼ばれる 画面の表示に関わる処理、 インターフェースも作れますし、 グラフも作れますし、 Todo リストなどといった様々な用途に 使うことができます。

目次