Vue.js

友人の会社のWebサイトをHTMLとCSS、Vue.jsを使って二つ作ってみた。 会社を立ち上げた友人に「Webサイトを作って欲しい～～!!!」と頼まれたのでHTMLとCSSで1つ、Vue.jsを使って1つ合計2つ作ってみました。もちろん無料で(笑) これまで自分で作りたいと思ったものを自分で好きにつくったことは何度かあったのですが、人に頼まれて人の求めているデザインで作ったことはなかったので、いい経験になりました。苦労した点も含めて書いてみたいと思います。 HTMLバージョン まずは、どういうものを作りたいのかというのがすごくぼんやりしてたので、そこをはっきりしてほしいと、色んな会社のサイト…

(引用元：jp.vuejs.org) おはようございます。Shotaです。今日はJavaScriptのフレームワークの一つである「Vue.js」について徹底解説します。実際に、多くの企業でJavaScriptのフレームワークが導入されています。 しかし、JavaScriptフレームワークの導入の際に「JavaScriptフレームワークをどう使えばいいか、かつどのように選択すればいいかわからない....」と困ってしまうことが大半です。 そこで、今回は人気が急上昇しているJavaScriptフレームワークである「Vue.js」について徹底解説します。 【目次】 Vue.jsとは？ Vue.jsでで…

Vue.jsを使って、リアルタイムで検索結果を表示する検索フォームを実装することを考えます。 検索フォームに打ち込んだ文字列をタイトルに含むタスクのみが画面上に表示されるようにします。 task/index.vue <template> <label for="search">絞り込み</label> <input id="search" v-model="searchTask" // dataに定義したsearchTaskに入力した文字列を入れ込む type="text" placeholder="タスク名を入力してください" class="form-control" > </templat…

Vue CLI で作成した TypeScript 用の Vue プロジェクトに対して、Jest と Vue Test Utils（@vue/test-utils） を追加導入し、Vue コンポーネントのテスト（TypeScript で実装）を実施するようにしてみました。 今回は、Vue CLI の vue create 時に、Manually select features を選択して、Choose Vue version と TypeScript にだけチェックを付け、Vue.js 2.x と 3.x のプロジェクトをそれぞれ作成して実施しています。 今回のソースは http://githu…

はじめに データベースに登録しているcreated_atの日付を表示する際に、フォーマットを変更する必要がありましたので、momentを使いました。 オプション等もありますが、シンプルにフォーマットを変更して表示するということだけをやりたかったので、この記事で紹介するコードでは使っていません。 簡単な備忘録としてまとめます。 最終的にはこんな感じで日付データのフォーマットを変更できます。 {{ date | moment("YYYY/MM/DD”)}} 手順 1,momentのインストール 下記どちらかのコードでmomentをインストール $ npm i moment $ yarn add m…

BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 BASE では BASE の UI を構築するための社内コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されています。現在、フロントエンドの有志たちで Storybook のバージョンを最新の v6.2 にする対応をしています。 この記事では、Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える方法を紹介します。 なお、本記事ではStorybook v6…

VeeValidateを使って、タスク追加・編集フォームのバリデーションチェックを行っていきます。 フォームに入力されたデータに対して、リアルタイムでエラーを表示させることができるようになります。 ①インストール yarn add vee-validate // もしくは npm install vee-validate ②バリデーションルールを設定したいフォルダのscriptに書く。 長くなったり、複数のフォルダで設定したい場合は、専用のフォルダに書く。 import Vue from 'vue' // vee-validateのライブラリを呼び出し import { ValidationP…

はじめに Speaker Deck Webアプリ iPhoneアプリ 自作サービスの紹介 エレベータピッチ 1. サービス名 2. 解決する問題 3. このサービスを使うターゲット 4. サービスのカテゴリー 5. このサービスができること 6. 競合サービス 7. 差別化要素 クライアントのサポート対象 主要な機能 Twitterのログイン機能 イベント一覧の表示 イベントのソート機能 イベントの絞り込み機能 イベント情報を投稿した友達一覧の表示 イベントを投稿した友達のツイートの表示 イベントデータの定期実行処理 ツイート取得 イベント情報取得 フォロー取得 リツイート取得 引用リツート取…

はじめに Java 系 の Web アプリケーションを Azure で動かしたいと考えたとき、Web Apps や Azure Spring Cloud を使ってそのまま動かすのもありですが、最近 GA した Azure Static Web Apps を使ってよりサーバーレスにもっていけたりしないかな？と考えてみています。 Static Web Apps は Angular / React / Vue などで作ったシングルページアプリケーションのデプロイに最適なサービスで、静的サイトのホスティング ＋ Azure Functions によるバックエンド API のセットで構成されています。 …

こんにちは！kossyです！ さて、今回はVue.js 3 + TypeScriptでvue-qrcodeを導入する方法について、ブログに残してみたいと思います。 環境 vue/cli 4.5.9 vue 3.1.2 typescript 3.9.7 vue-qrcode 2.0.0-rc 導入 以下のコマンドを実行します。 $ npm install vue@next qrcode @chenfengyuan/vue-qrcode@next npm install が完了したら、main.tsを編集します。 import { createApp } from 'vue' import App…

はじめに こんにちは！大ちゃんの駆け出し技術ブログです。 10日間ほど更新できていませんでしたので久しぶりの投稿となります。 今月はVue.jsのフレームワークであるNuxt.jsを中心に投稿していきたいと考えています。 Nuxt.js - ユニバーサル Vue.js アプリケーション 最初ということで簡単にプロジェクトを作成する方法から入ります。 プロジェクト作成 yarnで下記コマンドを実行します。 $ yarn create nuxt-app <project-name>(任意の名前) その後複数の質問が聞かれます。自分の好きな設定を書きましょう。 プロジェクトの名前 ? Project…

2021年3月に入社した神山奎吾です。クラウドワークスではWEBエンジニアをしておりまして、Ruby（主にRails）を書いております。2021年6月現在で入社して3ヶ月になりました。 きちんとした組織で働くことが初めてで当初は不安でしたが、メンバーに恵まれたことでストレスゼロで毎日楽しく働けております。 今までの経歴が変わっているのでその視点をもとに、クラウドワークスの良いところやクラウドワークスに無いものを書いていきます。

自分は個人的に Powerpoint を使いたくない。 なので、ある時期からスライド作成には Marp を使っていたのだが、他にも対抗馬ができたらしいのでやってみた。 Marp とは Markdown で記述することができるスライドシステム。 実質的に electron で実装されており、要するに JavaScript + HTML5 で実装されている処理系である。 因みに Marp はこちら。 marp.app VSCode/CLI の他、コアシステムをライブラリとしても利用できる。 markdown で記述し、様々なフォーマットでエクスポートできる。 編集しながら結果出力のプレビューも参照…

新しいサイトの開発でNuxtJS + Composition API + TypeScriptで快適な開発をしてますがuseAsyncは、サーバー、クライアント両方で実行することもあり、理解にちょっと時間がかかっていろいろハマったのでメモ。基本的にちゃんとドキュメント通りに使えば大丈夫なやつでした。あとasyncDataの代わりなので、そちらをちゃんと理解してればハマりにくそう。 はい、よくわかってません。composition-api.nuxtjs.orgバージョンとか "dependencies": { "@nuxtjs/axios": "^5.13.4", "@nuxtjs/compos…

またオレ何かやっちゃいました？ こんにちは！！！スマートキャンプでエンジニアをしている吉永です！ 自己紹介記事はこちら 前回の記事はこちら 弊社の主力サービスであるBOXILはリリースから時間が経っていることもあり、バックエンド・フロントエンドともに様々な技術的負債となる部分を抱えています。 また、その負債の中には普段の業務時間では手をつけにくいものもあるため、定期的に薪入れと呼ばれる開発改善日を設けています。 先月行われた薪入れはいつもよりも長い1週間の期間が設定されており、今回の記事ではその中で私が行ったフロントエンド改善の内容や、そこに至った経緯について説明します。 やったこと ビルドフ…

こんにちは。プロダクトデザイナーの yksk とフロントエンドエンジニアの f_subal です。 ピクシブにはデザインシステムを開発するチームがあります。ピクシブが運営する数多くのプロダクトが共通のガイドライン、コードを使ってUIを設計できる体制への移行を目的としており、そのための仕組みづくりに取り組んでいます。 今回は、先日行われた pixiv DEV MEETUP 2021 のセッション「PIXIV Design System 2021」で発表した、技術的な取り組みについて前後編に分けて発表します。 前編にあたるこの記事では f_subal パートの内容をおさらいをしていきます。 PIX…

↓詳しくはコチラ↓ ＜目次＞ ＼Web系開発のノウハウを詰め込んだエンジニア発オンラインスクール／ ◆圧倒的な学習量800〜1,000時間◆ ◆サービス運用まで見据えた完全オリジナルのポートフォリオ作成サポート◆ ◆困った時に何でも相談できるバディ制度◆ ＼RUNTEQは目標を実現するサポートをします／ ◆受講生のために課題の解き方・考え方を教えています◆ ◆本人が希望する企業への就職をサポートしています◆ ◆RUNTEQ以外も視野に入れてあなたに合わせたスクールを紹介します◆ ＼Webエンジニアまでの道のり／ １．無料キャリア相談会へ参加 ２．学習カリキュラムスタート ３．オリジナルポートフ…

私が初めてjsに触れたのは、2020年3月。 「カレンダーを作ってみよう」と会社で指示されて、あまりにわからずトイレで悔し泣きをしたものです。 時が経ち、現在2021年6月。 会社でVue.jsの勉強会が始まりました。 jsなんて目を瞑っても書けると思っていましたが、 勉強会二日目で「挫折」の文字がおぼろげながら浮かんできました。 このままでは、またトイレで泣く羽目になるので、本ブログにまとめていきたいと思います。 Vue.jsとは 公式ドキュメントにはこう書いてあります。 なーるほど、完全に理解しました。 さっぱりわからないので、どんどん書いていきましょう。 環境 手っ取り早くVueを始める…