Vue.jsで構成するシングルページアプリケーション(SPA)の作り方やサンプル例【前編】 | ソフトウェア開発のギークフィード
こんにちは。 ギークフィードに入社してはや半年が経ちました。 エンジニアのNkawaKです。初めてのブログ投稿になります。 この記事では僕がVue.jsで作ったサンプルを参考にしながら、 シングルページアプリケーション(SPA)とVue.jsについて解説をしていきます。 かなり解説することが多くなってしまったので、前編と後編に分けています。 こちらの前編では、シングルページアプリケーションの構成と画面遷移に焦点を当てて、 解説を行います。 シングルページアプリケーションとは シングルページアプリケーション(以下SPA)とはその名前の通り、 単一のページでコンテンツの切り替えを行うWebアプリケーションの名称です。 単一のページで構成されているため、ページ遷移の度にロードが発生することなく、 高速で画面が切り替わることがSPAの特徴です。 実際に画面を見ながらSPAの動きを確認してみましょう
【Vue入門】VueCLIから始めるVue.js 概要から理解してVueを使いこなそう | WEBコンサルティング・WEB制作のフリーランス uiuifree
Vue.jsを始めようとすると様々なサイトでVueCLIから始める記事を紹介されてます。 本記事ではインストールして開発環境を作るだけでなく、Vueがどう構築されているか？全体像や関連ツールを含めて説明していきます。 この記事の目次 Vue.js(ビュージェーエス)とは Vue.jsを立ち上げてみよう Vue.jsのフォルダ構成 まとめ Vue.js(ビュージェーエス)とは JavaScriptフレームワークでコンポーネントシステムが取り入れられており、Evan Youによって開発されています。近年、小規模から大規模までのサービスがVue.jsに置き換えられていっていますね。 メリット・デメリット Vue.jsの特徴の1つとしてSPA(SinglePageApplication)を作れることになります。 SPAはHTML/CSS/JavaScriptのみでサイトを構成し、サーバーとの通信を
Vue.jsとVueCLIは違う！CDN版から書き換えて理解してみる｜ほげほげ
勘違いしてたVue.jsとVueCLIって同じじゃないのねぇ！当たり前だろと言われそう。 ■ Vue.js ・Webアプリケーション開発に便利なJavaScriptフレームワーク ・CDNでサクッと使える ■ VueCLI ・VueCliはVue.jsで開発するための便利ツール群 ・npm使ってインストールする必要がある ・単一ファイルコンポーネント（.vue）を使って開発できる CDN版から.vueに書き換えてみる使うもの ・ターミナル ・Visual Studio Code以下に、簡単なTODOリストのWebAppのソースコードを2つ配置しました。 TODOリストのコンポネントを作成し、グローバル登録してあります。これはCDN版なので、index.htmlとindex.jsを同じフォルダ内にぶち込んで、index.htmlをブラウザで表示すれば、素直にVue.jsが動いてくれます。 <
Vue.jsとは？jQueryとの違いや使用のメリットを紹介
HOME制作Vue.jsとは？jQueryとの違いや使用のメリットを紹介 Vue.jsとは？jQueryとの違いや使用のメリットを紹介 Webサイト制作で、アニメーションなどの動きをつけたり、少し複雑な機能をつけたりしたいと思ったことはありませんか？ そんなときは、JavaScriptを使いましょう！ しかし、JavaScriptを逐一記述するのは大変です。 そこで、JavaScriptのフレームワーク、Vue.jsを使うのがおすすめです。 今まではJQueryが使われていましたが、それに代わって今、Vue.jsが注目を集めています！ この記事では、Vue.jsとはなにか、Vue.jsを使うメリット・デメリットはなにか、Vue.jsとjQueryなどとの違いについて解説していきます。 Vue.js（ビュージェイエス）は、クライアントサイドで使われるJavaScriptのフレームワークです。
とほほのVue.js入門 - とほほのWWW入門
はじめに Vue.js とは Hello world! 実用例(バリデーションフォーム) Vue の利用方法 CDN を利用する方法 ダウンロードする方法 NPM を使用する方法 ディレクティブ テキストをレンダリングする(v-text) HTMLをレンダリングする(v-html) 条件により表示を制御する(v-show) 条件により表示を制御する(v-if) 条件により表示を制御する(v-else) 条件により表示を制御する(v-else-if) ループする(v-for) イベントを処理する(v-on, @) HTMLの属性を指定する(v-bind, :) 入力フォームにモデルを割り当てる(v-model) テキストをそのまま出力する(v-pre) 画面表示時に {{ ... }} を表示しない(v-cloak) 一度だけ表示する(v-once) グローバルAPI コンポーネント(Vue
Vue.jsとは何かを現役エンジニアが解説【初心者向け】
Vue.jsとは、JavaScriptのフレームワークの1種です。JavaScriptはほぼ全てのブラウザで動作するプログラミング言語で、フロントエンドアプリケーションの開発でも主として使用されています。 そのJavaScriptでより効率的な開発を行う目的で使用されているのがJavaScriptのフレームワークやライブラリです。なお、フレームワークもライブラリも「開発を支援する仕組みやツール群」といった意味では同等ですが、ライブラリと比較してフレームワークの方が、より規模が大きいニュアンスがあります。 JavaScriptのフレームワークやライブラリで最も有名なのは jQuery です。jQueryは導入もしやすく、多くのフロントエンドアプリケーションで使用されています。しかし jQuery は DOM操作を自分で行わなければならないなどの弱点があります(詳しくは後述します)。 この欠点
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
現場で使えるアニメーション系JSライブラリまとめ（2022年版） - GSAP, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ（2022年版） GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジ
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
[図解] HTML5 Canvasあれこれ - レイヤー, マスク(ImageData), 全画面でのハマりポイント - Qiita
HTML5のCanvasを使う上で知っておくと役に立つかもしれないことを今更書いておきます。思いついたら随時更新していきます。 #対象読者 Canvasに関しての基本的な解説は省きますので、この記事はある程度Canvasが使える方向けとなります。具体的には Canvasの生のAPIで四角形やパスを書くことができる が基準となります。 #Canvasをレイヤーのように重ねる これはもうCanvasではなくCSSだと思いますが、Canvasを複数重ねることができます。Canvasは背景が透明なのでposition: relative;を親要素に指定し、Canvasをposition: absolute;にすることで、複数のCanvasを重ねる事ができます。
![[図解] HTML5 Canvasあれこれ - レイヤー, マスク(ImageData), 全画面でのハマりポイント - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/521da1a5d74dc05e8cc825efdea4b64bc900c351/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTlCJUIzJUU4JUE3JUEzJTVEJTIwSFRNTDUlMjBDYW52YXMlRTMlODElODIlRTMlODIlOEMlRTMlODElOTMlRTMlODIlOEMlMjAtJTIwJUUzJTgzJUFDJUUzJTgyJUE0JUUzJTgzJUE0JUUzJTgzJUJDJTJDJTIwJUUzJTgzJTlFJUUzJTgyJUI5JUUzJTgyJUFGJTI4SW1hZ2VEYXRhJTI5JTJDJTIwJUU1JTg1JUE4JUU3JTk0JUJCJUU5JTlEJUEyJUUzJTgxJUE3JUUzJTgxJUFFJUUzJTgzJThGJUUzJTgzJTlFJUUzJTgyJThBJUUzJTgzJTlEJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgzJTg4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wNGJkZTQ0ZjlmZjZiZDZkNDMxM2Y0MTUwYjcxNmJkMQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBUZWluaXNoaSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YmI1ZDRlOTdlZGU1ZTY3MThiMGFjZThlOTc1ZTMyNjk%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dcbe470fceddd1cad1fd1b8c5f4da9a3b)
Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
event.preventDefaultが動かなかった｜高橋悠太 / Yuta Takahashi｜note
スワイプや、タッチイベントを実装する時に下記のようなJavaScriptを書きました。 document.addEventListener('touchstart', ‘要素’, function (e) { e.preventDefault(); // タッチスタート処理 ~~~~ });preventDefault()：実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッド しかし、エラー発生 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 エラーログにある解説ページへ h
マウスによるスクロールやスマホのスワイプを制御するjs(passive: false) | なんかいろいろデザインする人
どうもー。ご無沙汰です。Webデザイナーのレーウィンですよ。 今回はマウスやスワイプでのスクロールの禁止・解除の簡単なjsについて、今更ながら解説。 今更ではあるけど、個人的にわかりやすいのがなかったから、多分需要があると信じてる。 あれ・・・？スクロール禁止が効かない・・・！？ jQueryを使用したマウス・スワイプ制御を実装してみたものの、上手いこと動かない。 そこで、コンソールを見てみるとこんな警告が。 Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 ようするに、addEventListenerで追加したtouchmoveはpa
Swiper Demos
🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥
Swiperでクリック式の複数行サムネイル型スライダーを作る【コピペOK】
こんにちは、もやし（＠moyashi3333）です。 フリーランスとして、主にWeb制作・コーディングの仕事をしています。 今回は、サイト制作でよく実装される「スライダー」の発展的な内容になります。 スライダーを簡単に作ることができるJavaScriptライブラリ「Swiper」。 Swiperは様々なデザイン・レイアウトのスライダーを簡単に作ることができ、公式デモにも多くの例が掲載されています。jQueryに依存していないこともあり、スライダーを作る際はもっぱらSwiperを使用しています。 ただ、今回ぼくが作成したかった”複数行のサムネイル式スライダー”が公式デモにはなかったため、記事にしておきます。 【完成形デモ】複数行のサムネイル式スライダー See the Pen swiper_thumb by Seimah (@ck3333) on CodePen. 下部サムネイルの画像をクリ
Swiper.jsのサムネイル画像とスライダーを連動させる | ラーミアラボ
スライダープラグインのSwiper.jsのカスタマイズでちょっと詰まったところがあったのでメモっておきます。 ページネーションにサムネイル画像を使う スライドの下にサムネイルが出て、スライドと連動して現在表示している画像に装飾が出るようにしていきます。 ↓こういうの。スライドの下にサムネイル画像が出て連動する感じ。 今回は、ページネーション（●が並ぶやつ）に背景画像にスライドの画像を設定する方法で実装できました。 とある方が「swiperのスライドを2つ置けば連動しているように見せることができる」と書いていましたが、そうするとサムネイルをクリックした時にその画像をスライドに表示することができないので、今回はサムネイル機能や複数のスライダーを使わずにページネーションを改造していきます！ STEP1 ページネーションをスライド外に置く SwiperのデモのPagenationにある丸をスライド
超簡単！超軽量！LottieでWebアニメーションが捗る | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
こんにちは！新卒2年目、Paid開発担当の小川です！ 今回ご紹介するのはWebアニメーションライブラリ「Lottie」です。 リッチなUXを実装したいけど、以下のようになかなか手が出せない方もいらっしゃるのではないでしょうか？ デザイナーにはJavaScriptの学習コストが高い エンジニアにはデザイナーの求めるような動作をなかなか表現できない デザイナーとエンジニアの得意分野を切り分けるために動画で表現しようとするとどうしても重くなる しかし、Lottieを使えば上記の悩みは全て解決してしまいます！！ 本稿ではそんなLottieの紹介と使い方についてご紹介します。 Lottieとは？ Lottieは民泊で有名なAirbnbが開発したアニメーションライブラリです。 Adobe After Effectsで作ったアニメーションを簡単に制御することができます！ さっそく、そんなLottieのメ
![超簡単！超軽量！LottieでWebアニメーションが捗る | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f4b6a9ff4247eaaa25aa781b702a2a23643fe22/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2019%2F12%2Flottie_anim2.gif)
svg / canvas出力ができるbodymovinの紹介 - KAYAC Engineers' Blog
やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で１番プログラムできないおじさんの町田（@machida-yousuke）と申します。 今回は、「映像業界?フロントエンド業界？が注目しているオープンソースライブラリ bodymovin」について紹介します。 ちなみに私は、元某インターネット広告代理店の映像クリエイター兼フリーランスのモーショングラフィッカーでした。 ※この記事はAfterEffects（以下「AE」と称する）の基本的な操作、用語を理解している前提で進めていきます。 ※bodymovinのバーションは V 4.6.10、AEのバーションはadobe AfterEffects cc 2017で進めていきます。 （V 4.6.10から使用言語によっておきるバグの修正がされています。） ※使用PCはMacです。 bodymovinとは AE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
近年人気のJavascriptフレームワーク「Vue.js」でできるインタラクティブな制作事例 - 株式会社グローバルゲート公式ブログ
商用利用無料、UIデザイン用のSVGアイコンが558種類！デザインに合わせたカスタマイズも簡単な優れもの
