新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 本記事では、全2回にわたって、Vue 3の新機能を紹介していきます。今回は、Vue 3で導入されるコンポーネントの新しい記述形式「Composition API」を説明していきます。 対象読者 Vue 3の概要を把握したい方 新しいライブラリーを試してみたい方 これからVue.jsをプロジェクトに採用する予定の方 必要な環境の準備 本記事のサンプルコードは、以下の環境で動作を確認しています。 Windows 10 64bit版 Node.js v10.18.1 64bit版 Vue.js 3.0.0-beta.15 Vue C
東京都の新型コロナ対策サイトはなぜNuxtJSだったのか？ ─ シビックテックのベストプラクティス｜ハイクラス転職・求人情報サイト AMBI（アンビ）
文科系の学部に在籍しながらシビックテックに興味を持ち、関治之氏の「右腕インターン」として1年ほど関わる。その後いくつかのシビックテック活動やインターンシップを経て、株式会社almaの創業に参画。プロダクト開発をリードするかたわら、共同設立したCode for Youthなどでも活動する。学習院大学4年。 なぜNuxtJSだったのか？ あるいはjQueryでなかったか？ 偶然に決まったNetlifyは開発にとても役立った 後でコンポーネントを変更改善できるよう小さく作る ベストエフォートでの開発体制 リリース直後から届いたエンジニアの反響 シビックテック活動のベストプラクティス なぜNuxtJSだったのか？ あるいはjQueryでなかったか？ ── まず最初に、今回の技術的なバックグラウンドから聞かせてください。一見すると行政が関係した仕事とは思えない現代的な技術選定のWebサービスですが、
仮想DOMの作りかた - Qiita
どうもこんにちは、ウマシバ(@UMASHIBA)といいます！ 先日、仮想DOMを個人的に実装してみまして、その際に得た知見を記事という形で共有したいと思います。 仮想DOMを作成するという内容上とても長い記事になってしまっていました。時間がある時や何日かに分けたりして読んでくださるとうれしいです。 それでは記事本文です。どうぞ、 はじめに この記事はReactやVue, Angular等のモダンなフロントエンドフレームワークの基礎部分となっている仮想DOMを作ってみようという記事です。 形式は、先日私が作成した仮想DOMと同じモノを順を追って実装してみるという形でやります。 完成形はここ(https://github.com/UMASHIBA1/UMASHIBAVirtualDOM) にあります。 ※もしよければスターください。すごくよろこびます。 この記事を読むには TypeScript
スタイルガイド - Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
【Vue3に備える】実務で使うComposition APIについて考える
◆はじめにどうもこんにちは。Vueが好きすぎて社内でVueを布教している@_slontです。 今回のテックブログでは、これからリリースされる待望のVue 3を万全の体制で迎えるべく、新機能の中でも個人的にアツいと思っているComposition APIについての考察をしたいと思います。 Composition APIは一体僕たちにどんな驚きをプレゼントしてくれるのか。それを確かめるために我々はアマゾンの奥地へとむk(ry さて、近々リリース予定のVue 3は、パフォーマンス改善の他、Composition API, Fragment, Portal, Suspenceなど様々な新機能があります。 参考：まもなくやってくる Vue.js 3その中でも、大規模プロジェクトに弱いと言われていたVueの銀の弾丸として（？）、ユーザが待ち望んだComposition APIが、2系のプラグイン@vu
入門GUI ーWebブラウザで作る本格インタラクションー：複雑GUIの会
本書は、Web ブラウザにおける本格的な GUI の入門書です。 Web ブラウザに期待される役割は年々増してきています。 ネイティブアプリ顔負けのデザインツールや、ドラッグアンドドロップでの操作が必要なフォームを作りたくなったとして、我々は何に気をつけるべきなのでしょうか？ そうでなくとも、これまで HTML / CSS / JavaScript で実装するのが大変だった UI をどう実装するべきなのでしょうか？ この点を本書は重点的に扱います。 本書では定番のセレクトボックスやヘッダーレイアウトの他、バウンディングボックスやツリーといったドラッグを伴う UI なども実装していきます。 苦しくも楽しい、Web ブラウザの複雑 GUI の世界がここにあります。皆さんもエディタとブラウザを開きながら、足を踏み入れてみましょう。 関連ワード: GUI, 複雑GUI, SVG, React, V
Vue.jsサンプルのMarkdown Editorを読み解く - 蛇ノ目の記
フロントエンドアレルギーを少しでも治すべく「手を動かして学ぶ！Vue.js」を片手にVue.jsに入門し始めた。 www.shoeisha.co.jp 今までの人生でほとんどJavaScriptやってきたことないマンでもわかりやすい良書。 今回はこの書籍と公式ドキュメントから学んだ内容で、Vue.js公式Webサイトのサンプルに載っているMarkdown Editorの仕組みを理解していく。 jp.vuejs.org コード全体 え、これだけでMarkdownエディタ書けるの。Vue.jsマジやばい(語彙力 <!DOCTYPE html> <html> <head> <title>Markdown Editor</title> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/marke
今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita
＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指
「vue-diagrams」でダイアグラムを実装する |カバの樹
vue-diagramsとは 「vue-diagrams」はreact-diagramsにインスパイアされたダイアグラムを実装するライブラリです。 ノードを色を変更したり、ノード同士を連結したりすることができます。 インストール 以下のnpm、CDNを使ってインストールします。 npm npm install vue-diagrams CDN <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-diagrams.min.js"></script> gitリポジトリは以下から取得できます。 https://github.com/gwenaelp/vue-diagrams 導入手順 ダイアグラムを実装します。 1. ライブラリの取り込み （1）webpack等の場合 ※モジュール版は未検証です。 import
「VueMindmap」でマインドマップを実装する | カバの樹
VueMindmapとは VueMindmapはreact-mindmapに触発されたマインドマップを実装するライブラリです。 ノードを設定し、ノード同士をオブジェクトの配列で紐付けます。 編集モードのオンオフやスタイルの変更、サブノートの設定を行う事ができます。 インストール 以下のnpm、CDNを使ってインストールします。 npm npm install --save vue-mindmap CDN <link rel="stylesheet" href="https://unpkg.com/vue-mindmap/dist/vue-mindmap.css"></link> <script src="https://unpkg.com/vue-mindmap"></script> gitリポジトリは以下から取得できます。 https://github.com/anteriovieira
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
宣言的UIって何なん？ 〜日本昔ばなし「やめ太郎」〜 - Qiita
昔々、あるところに「やめ太郎」と言う中年ザコーダーがおったそうじゃ。 ある日、やめ太郎はこんな画面をコーディングしておったそうじゃ。 テキストフォームに文字を入力すると、それと連動して下の文字列も変わる。 一番下の行には、それを大文字にしたものが表示される。 という仕組みだったそうじゃ。 HTMLでいうと、こんなイメージじゃ。 <main> <input type="text" value="hello!"> <!-- ↑入力フォーム --> <p><!-- 上のフォームに入力した文字列がここに表示される --></p> <p><!-- それを大文字にした文字列がここに表示される --></p> </main>
Elmの型で読むReduxやVuexのアーキテクチャ - Qiita
はじめに 近年徐々に複雑になるwebフロントエンドの状態管理の仕組みとして、ReactやVue.jsといったwebフロントエンドフレームワークのお供にReduxやVuexと言ったライブラリを組み合わせて使うことが多いと思います。 それら二つのライブラリは、Elmという高品質webフロントエンド構築のための関数型AltJSが用いているThe Elm Architectureと呼ばれるアーキテクチャに影響を受けて作られました。 追記: ReduxとElmの時系列はReduxの方が先であり、しかしながら状態のimmutableなどは影響を受けていることから、 現在の形のReduxはElmに影響を受けている所がある。 という表現が正しかったようです。 コメントありがとうございます。 参考 Vuexとは何か？｜Vuex reduxjs / redux Elmの型システムや見た目は非常にリーダブルであ
Vue.jsで作ったゲームをインストール可能（PWA）にしてGitHub Pagesで公開してみた | DevelopersIO
はじめに おはようございます、加藤です。年末年始は実家の北海道に帰省するつもりだったのですが、見事にインフルエンザB型にかかってしまって、急遽キャンセルしました... 予定が全て吹っ飛んで暇になったので、年末年始は下記の教材を使ってVue.jsを勉強していました。 超Vue JS 2 入門 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む) まだ7割しか終わっていないですが、せっかくなので簡単なゲームをインストール可能な状態で作って公開してみました。 新規プロジェクトの場合 Vue CLIで新規プロジェクトを作成する際に、指定する事でPWAとしてプロジェクトをセットアップできます。 npx -p @vue/cli vue create new-project # Manually select features を選択する Vue CLI v4.1.2
2020年にJavaScriptフレームワークをちゃんとはじめるために。｜榊原昌彦
結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLとJavaScript（TypeScript）を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
Elmをプロダクトで一年書き続けた感想 - Runner in the High
この記事はElm Advent Calendar 2019最終日の記事です。 去年末あたりから現職のチームでElmを書き始めたので、大体1年程度はプロダクションでElmのコードを書き続けたことになる。学生時代はRubyとJavaScriptばっかりだったので、関数型プログラミングとかそういうバックグラウンドは一切なかった。その観点から、改めて率直な感想を申し上げておく。 なお、弊社フロントエンドチームとElmに関するはなしは、私の書いたFringe81アドベントカレンダーの記事を参照のこと。 fringeneer.hatenablog.com Elmには中毒性がある Elmを触ったことのない方からすると「？」になるかもしれない（というか、昔の自分がそうだった）が、率直に言ってElmには中毒性がある。一度Elmを知ると、Elm以外の言語を触るたびに「これ、Elmだったら〇〇なのにな〜」と思う
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Laravel(+Vue.js)でSNS風Webサービスを作ろう！ | Techpit
JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用一覧
【Vue.js勉強日記：その０】Vue.jsとは．特徴をまとめてみた． - oyoshi’s blog