意外と（？）Jiraのクローンは多いです。Webベースのプロジェクト管理として一定の地位を築きつつあり、多くの企業で使われています。10人まで無料ですが、その後は有料のサブスクリプションサービスになります。 そんなJiraクローンとして名前の通り、A Jira clone built with Vuejs & Nodejs/Graphqlを紹介します。どんな技術を組み合わせているかも丸わかりですね。 A Jira clone built with Vuejs & Nodejs/Graphqlの使い方 トップページです。押せないボタンも多いですが、デザインの再現度は高いのではないでしょうか。 プロジェクト詳細です。 検索機能です。 課題の詳細はモーダルウィンドウで確認します。 課題の作成画面です。 カンバンの項目はドラッグ&ドロップで移動できます。 A Jira clone built wi

Vue MasteryAs the ultimate resource for Vue.js developers, Vue Mastery produces weekly lessons so you can learn what you need to succeed as a Vue.js Developer.

Another Vue.js 3 from zero to hero course - kind of. This course is for developers who want to move fast. We cover the traditional way of building Vue apps - the Options API - as well as the the new Composition API, and even see how you can mix and match them together. There are 8 modules; 4 introduce fundamental skills (Options API; Composition API; Vuex and Vue Router). The remaining four module

先日の v-tokyo #11 の懇親会で質問されたので、Native TSX Support される Vue 3 でなぜ tsc だけで TSX が動作しないのかを聞かれたのでメモとして残しておこうと思います。 ちなみに Vue 3.0 beta が出た頃に既に検証し終えているコードは以下にあります。 https://github.com/potato4d/vue-next-tsx-only-tsc TL;DR Vue 3 にて、render function の h 関数が分離された h 関数の分離に伴い、 API が React のに近いインターフェースとなった この2点によって tsc だけで Vue TSX が動くようになったが、 近いだけで微妙に違う仕様によって実用は難しい 具体的には children のとり方が VNode[] か ...VNode かの違いがある Vue

現場に残る Vuex の map ヘルパーのコードベースを消し去り、 Vue 3 時代の型に追従するための CLI ツールを TypeScript Compiler API で実現するJavaScriptNode.jsTypeScriptVue.jsVuex はじめに Vue.js 製アプリケーションのレガシーコードベースにおいて、頻繁に課題となるのが mapGetters のような map ヘルパーのメソッドです。 これらはショートハンド的に使えて過去には便利なケースもありましたが、現在ではほとんど利用されることもなくなりました。 それもそのはず。現在のフロントエンド開発の主流となる言語は JavaScript ではなく TypeScript となっています。しかし、 map 系ヘルパーはその構造から任意の文字列を受け取った上でオブジェクトに影響を及ぼす形となっており、根本的に型システム

こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際にtemplateタグに ESLint を効かせてみて発覚したエラーや警告のなかで数が多かったものや、これから Vue 3 に移行していく上で対応する必要があったルールを紹介します。 背景 eslint-plugin-vue が効かない チームに Pug 推進派がいない Pug を HTML に移行するには Vue 3 に準拠した Lint ルールを導入する Lint を実行してみる 対応した目ぼしいルール vue-require-v-for-key vue/val

Anthony Gore | March 16th, 2020 (Updated May 9th, 2020) | 9 min read Vue 3 has not been officially released yet, but the maintainers have released beta versions for us punters to try and provide feedback on. If you're wondering what the key features and main changes of Vue 3 are, I'll highlight them in this article by walking you through the creation of a simple app using Vue 3 beta 9. I'm going t

はじめに Vue3のリリースが迫ってきました。 順調に行けば、公式リリースは8月上旬のようです。楽しみですね。 Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0. https://github.com/vuejs/rfcs/issues/183 Vue3の目玉の機能として、「Composition API」があります。 この記事では、「”なぜ” “なんのために” Composition APIを使うのか」理由について、まとめています。 「Composition APIの使い方」についての説明は、この記事では割愛します。 以下の記事に、具体的なComposition APIの使い方とProviderパターンに

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため) プロジェクトに取り込んでより充実したデザインにしてもらえれば○ コードは全てリンク先に説明付きで記載してあります 【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選 動きは下の画像のような感じになります １. transform rotateX×scaleで【縦回転】CSS画像アニメーション ２. transform rotateY×scaleで【横回転】CSS画像アニメーション ３. transform rotateY/Z×scaleで【3D回転】画像アニメーション transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選 動きは下の画像のような感じになります １. クリックで右方

『まず触ってみて』Vueで使えるCSSアニメーションまとめ１１０選！【完全オリジナルだからコピペOK】CSSアニメーション初心者Vue.jsフロントエンド コピペだけで作れるマテリアルデザインを個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています １. シンプルなスライダーマテリアルデザイン３選 そのまま使えるスライダーアニメーションのマテリアルデザインとなっています transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します ２. filterとopacityを使いこなすスライダー

JavaScriptは、ウェブ制作に欠かせないプログラミング言語です。簡単な演出から、近年ではSPA（Single Page Application）の開発などに幅広く活用されています。 JavaScriptの進化は非常に早く、新しい言語仕様やライブラリー・フレームワークが次々に登場していて体系的な学習が難しくなってきています。 この講座では、そんな JavaScriptの新しい仕様（ES6以降）の知識と、近年非常に人気のある「TypeScript」、そして「Vue.js」を一気に学ぶことができるフロントエンド技術の入門講座となっています。 最初は、JavaScriptのキホンのキホンからスタートして、最終的には本格的なフレームワークである「Vue CLI」を用いたアプリケーション開発まで体験していきます。是非ゆっくりと自分のペースで学んでいって頂ければ幸いです。

高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。 React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラJavaScriptでも使用できます。 Grid.js Grid.js -GitHub Grid.jsの特徴 Grid.jsのデモ Grid.jsの使い方 Grid.jsの特徴 Grid.jsは高性能なテーブルを実装できる12Kbの超軽量のJavaScriptです。 シンプルで軽量な実装。 人気が高いすべてのJavaScriptフレームワーク（React、Angular、Vueなど）で使用できます。 フレームワークなし（バニラJavaScript）でも使用

「Offersエージェント」では、業界で活躍するプロフェッショナルがあなたの転職を徹底サポート。CxO経験者を含む現役エンジニア・デザイナー・プロダクトマネージャーが在籍し、職種に特化した専門的なアドバイスをご提供・非公開求人の紹介も可能です。 →【かんたん30秒】無料登録で転職相談する ▲イベント登壇時の写真 これまで本業の傍ら、フロントエンドの副業を複数受けてきました。今回はその経験から得られたものや、これから副業を検討される方に向けての注意点を紹介します。​ まず私が副業を始めた理由は2つ。家賃を副業の収入でまかなえるようにすることと、本業では経験できないことに挑戦してスキルアップを図りたいと思ってのことでした。 副業を始めようと思った当時、私はクライアントワークをメインとしているWeb制作会社に所属していました。クライアントワーク自体は楽しかったのですが、納品して終わりという業務を

【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】JavaScriptGoogleAppsScriptVue.jsQiita夏祭り2020_パソナテック 「JavaScriptのみ」＆「無料」＆「サーバーレス」なスプレッドシートと連携した家計簿をつくる方法を考えてみました。 実際に家計簿アプリを作るハンズオン付きです！ ※こちらの記事は一部古い内容となっております。 Zennに投稿している本を更新していますので、よければこちらをご覧ください。 https://zenn.dev/matsu7089/books/gas-account-book なにを作ったの？ Web上でデータを登録すると、スプレッドシートに反映される家計簿アプリです。 実際のページはこちら。使い方は「家計簿アプリお試し方法」で説明します。 データ追加の他に、データ編集と

【Vue.js 3.0】Composition API なんかと同じ空間にいられるか！俺は 2.x 系に戻るぞ！Vue.jsvue.js2vue.js3Composition-API Vue.js 2.x から 3.0 へ Vue.jsの開発ロードマップ によると、2020 年 Q2 での公式リリースが予定されています。 β版もリリースされ、だんだんメジャーアップデートに近づいてきた感じがしますね。 Vue.js 3.0 への アップデートに関する記事をチェックしていると、かなり記述方法が変更されそうだな、、という印象を受けました。 かつ記述方法が JS 寄りになった印象もあり、ライトに Vue.js を使用していた方は 3.0 へのアップデートに抵抗がある方も少なくないのではないでしょうか？ 自分はそこで抵抗感を持ってしまい、このタイトルの思考に行き着きました。 ただこのセリフを吐いた者