jQuery不要の最新スライダー［Splide］の使い方と全オプション
今日は最新のJavaScriptスライダー［Splide］を紹介します。 まずは［Splide.js］の特徴をいくつかピックアップします。 jQueryなどのライブラリに依存せず単体で動く軽量（圧縮版で11kB）IE10以降対応ブレイクポイントの指定でレスポンシブ対応マウスのドラッグとタッチスワイプに対応SEOフレンドリースライダー、またはスライドショー、カルーセルに必要とされる要素はすべて揃っており、近年評価が高い［swiper.js］や［slick.js］などと肩を並べられるスペックです。 Splide → https://splidejs.com ［Splide］本体ファイルをインストールSplide.jsをウェブサイトにインストールする方法は3つあります。 NPMでダウンロードCDNを利用Githubからダウンロード1.NPMの場合$ npm install @splidejs/s
Next.js(React)に最軽量＆高機能スライダープラグインSplideを導入してみる
スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS（flex等）が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容
BASEのノーコードはどのように実現されているのか？ - BASEプロダクトチームブログ
基盤チームの右京です。 BASE ではショップのデザインを誰でも簡単にできるような、いわゆるノーコードな機能を提供しています。 デザイン | BASE (ベイス) ネットショップを無料で簡単に作成 この記事では、そんなノーコードなシステムの裏側について、簡単にですが解説しています。 ショップページ配信の基盤システム ノーコードの前にまず BASE のショップページ(ShopFront と呼んでいます)がどのようなシステムかを知っておく必要があります。BASE のショップページは特定の URL にアクセスすると必要なデータをデータベースから取得し、テンプレートエンジンを使ってサーバーのプログラムで HTML を生成して返す、よくある伝統的な Web ページとして実装されています。ただし、ショップ毎にページのデザインは全く異なるため、1 つの固定のテンプレートを利用しているわけではなく、ショッ
機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス
スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。 本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。 昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。 モチベーションTeachme Biz をVue 3 に移行するモチベーションは概ね以下になります。 モダンブラウザに合わせてリアーキテクチャリングされた Vue 3 の恩恵を受けることVue 2 への機能追加・改修が 2.7 で終了してしまった
150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
Next.js + SvelteによるnoteのフロントエンドApp分割｜note株式会社
※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶSPA/PWAの技術と実践−」の登壇を文字起こししたものになります noteのフロントエンドの歴史 ではまず自己紹介をさせていただきます。フロントエンドエンジニアの山形と申します。よろしくお願いします。 去年の3月に入社したので、noteには1年3ヶ月くらいいます。趣味でコーヒーの焙煎とかやっています。 今回はnoteが抱えているフロントエンドの課題をどう解決していったのかを話していきたいと思います。 最初にnoteが今までどうやって実装されていたのか、その歴史を説明していきます。 初期のnoteはRuby on Railsのアセット上に構築されたSPAサイトで、フロントはAngularJSとCoffeeScriptで書かれていました。 この構成はかなりの問題を含んでいました。 1つ目はS
Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend
Your Path to Senior Developer and Beyond200+ In-Depth Frontend & Fullstack Courses Learn Practical Tech Skills from Experts You Can TrustWith over 200 courses in JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend Why Frontend Masters?At Frontend Masters, we pride ourselves on offering courses designed and taught by leading experts actively employing their skills at renowned compa
Vuetifyの使い方(UIフレームワークで手軽に構築) - わくわくBank
Vuetifyは、Vue.js用のUIコンポーネントフレームワークです。マテリアルデザインの手法に基づいた豊富なコンポーネントを提供しています。ここでは、Nuxt.jsプロジェクトにVuetifyを導入して、基本的な利用方法を確認します。 Vuetifyプロジェクト生成 create-nuxt-app でプロジェクト生成します。 $ yarn create nuxt-app sample-nuxt-vuetify (省略) > Generating Nuxt.js project in /xxx/sample-nuxt-vuetify ? Project name sample-nuxt-vuetify ? Project description My supreme Nuxt.js project ? Use a custom server framework none ? Choose
Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
Webページの状態を集中管理できる「Nuxt.js」のVuexストアを使いこなそう
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はWebページの一部分を部品として再利用できるコンポーネント機能を説明しました。今回は、Webページの入力内容や表示内容といった状態を集中管理できるVuexストアについて説明していきます。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Webページを複数のコンポーネントに分割できるJavaScriptフレームワークでは、あるコンポーネントの状態（入力／表示内容）を他のコンポーネントで利用する場合、不整合なく状態を共有する仕組みが必要とな
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
イベントの情報サイトをPWAで作ってみた【Nuxt.js】 - Qiita
なぜPWAなのか PWA(Progressive Web Apps)はひと言で説明するとWebがアプリのようになる技術です。 個人的にはとても魅力的な技術だと思うのですが、2015年に発表されてから今まであまり活用されていないような気がします。もちろんネイティブアプリには及ばないですが、情報がまとめてあるのが中心で少しの機能だけの場合はPWAで事足りるのではないかと思ったので作ってみました。 作ったサイトはこちら https://mdtakaoka.info まず結論から言うと、Webサイト的には成功したのではないかと僕は思います。下の画像GoogleAnalyticsの解析ですがPWAユーザ（ホーム画面に追加したユーザ）はページ/セッション、平均セッション時間、直帰率がすべてのユーザに比べて良くなりました。今回はWebサイト上にはホーム画面に追加できることを記載しなかったので、１割程度の
LaravelでのAPI開発を爆速にするためにやっていること
2019年2月16日、PHPのフレームワークであるLaravelをメインテーマに据えた技術カンファレンス「Laravel JP Conference2019」が開催されました。「Laravel JP」を冠したイベントとして日本初開催となる今回。数多くのLaravelユーザーが参加し、知見を共有します。プレゼンテーション「LaravelでのAPI開発を爆速にするためにやっていること」に登壇したのは、株式会社SCOUTERの松本宏太氏。自社のAPI開発において取り組んでいることについて語りました。講演資料はこちら LaravelでのAPI開発を爆速にするためにやっていること 松本宏太氏（以下、松本）：お越しいただきありがとうございます。『LaravelでのAPI開発を爆速にするためにやっていること』というタイトルで発表させていただきます。よろしくお願いします。 もしかしたら知ってる人がいるかも
サーバーレスを使用して最初の６ヶ月で学んだ６つのこと - Qiita
こちらの記事は6 things I’ve learned in my first 6 months using serverlessの和訳になります。 サーバーレスの世界は適切なツールさえ見つければミドルレイヤーを省けるのでとても良いものです。 10月に行われたServerlessconfの後、自分の会社を全てサーバーレスにすることに決めました。最初の２ヶ月は Python Flask appにLambdaを導入するのに必死でしたが、そのおかげでより良い方法を思いつきました。 そして６ヶ月後、私たちにとって４番目に大きいプロジェクトをサーバーレスでデプロイすることになったのです。以下の内容がデプロイするまでに私たちが学んだ教訓、意見です。 レッスン１ Pythonの使用は避けましょう Flaskは昔ながらのリクエスト、レスポンスのスタイルで、サーバーによって管理されるセッションがあるWeb
Firebaseで完結するリッチなWebアプリ構築の勘所 - Qiita
先日、Togetter社長の@yositosiさんとひょんなことからお友達になり「なんかFirebase使って面白いことやろうよ」という話になったので一緒に面白いことをやりました。 この記事は、 Firebaseを使うと何ができるのか Nuxt.js/Vue.jsとFirebaseの勘所 Firestoreでの複雑なクエリ処理にどう対応するか などのトピックを中心に紹介していければと思っています。 なんとかPay Togetterの社長の@yositosiさんからFirebaseを使ったアプリ構築の話を頂きお手伝いさせていただいた、エイプリルフールの企画の「なんとかPay」というサービス。誰でも自由にPayを発行できる、昨今のPay蔓延している社会に物申しているようなそうでもないようなそんなサービス。 今回は技術周りで色々とお手伝いをさせていただきました！ 自分だけのPayが作れる リアル
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Vue.js Tokyo v-meetup="#3" に参加してきました - tacamy--blog
vuejs-meetup.connpass.com 申し込んだ時点で213/80人と絶望的だったのですが、たまたまブログ書く枠が空いたので勢いでポチってしまいました。ただ、私はVue.js初心者（※）なのでブログを書けるほど内容が理解できるのかかなり不安でしたが、結果的にどのトークも楽しめました（理解したとは言ってない）。なので、同じような初心者の方でも、興味があれば参加してみるとよいのではと思います。 （※）人がつくったアプリ（Vue 1.x）の改修をしたり、開発合宿でミニマムな評価アプリ（Vue 2.x）をギリギリつくった程度のレベルです。 以下、それぞれのトークの内容のメモです。 Vue.js の中身 - 算出プロパティはどうやって動いているか @kitak https://kitak.github.io/slides/170316-vue-meetup/ Vue.jsのようなライブ
Vue.jsの流行とネイティブアプリフレームワークWeex、そして台頭する中国語コミュニティについて - クイック エンジニアリングブログ
こんにちは。五所です。 最近は時代についていこうと、フロントエンドの情報収集をしています。 React, Redux, AngularJS, ES6, Webpack, Gulp, Babel, Yarn... 情報収集すればするほど、頭がいっぱいになるのですが、その過程で感じたこと、考えたことをつらつら述べさせて頂きます。 Vue.jsについて github.com Vue.jsは近年非常に盛り上がりを見せているJavaScriptのフレームワークです。 特に2016年にすさまじい勢いで伸びました。 GitHubのスター数は2016年だけで26400獲得し、2017年1月21日現在では40000スターを超えています。 risingstars2016.js.org Vue.jsは the 10th most starred JavaScript project on GitHub the
Vue.js + Vuexで開発をしてみよう！
Vue.js + Vuex = Magic コンポーネント指向とFlux architectureで始めるモダンフロントエンド こんにちは、フロントエンドエンジニアの蔀です。 ここ数年のフロントエンド開発の潮流の変化は急激で、雨後の筍のように色々なフレームワークが出てきていますね。 8月末には、Mediumでこんな記事が人気になりました。 The State Of JavaScript: Front-End Frameworks と銘打たれたこの記事は、React/Angular/Angular2/Ember/Vue/Backbone といった、近年流行しているJavaScriptフレームワークに関する興味、満足度、知名度などを調査して比較してくれています。 注目していただきたいのが、「Satisfaction（使ってみて満足したかどうか）」の項目です。 近年流行しているReact.jsと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/mzyy94/items/0f3149da316b973acccc