サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
レイングッズ
qiita.com/TakahiRoyte
ゴール Vue3のアプリを開発できるプロジェクトをViteを使って作成する Vueとは? Vue.jsはインタラクティブなフロントエンドを作るためのJavaScriptフレームワーク。JavaScriptによりページの書き換えを実現し、ユーザーの操作に応じた動的(リアクティブ)なウェブアプリケーションを実現できます。フレームワークにより、アプリケーションを作るための「仕組み」と「ルール」が提供されており、一貫性のあるウェブアプリケーションが作りやすくなってます。 フロントエンドの構造(HTML)、装飾(CSS)、機能(JavaScript)を1つのファイルに内包するSingle File Component(SFC)という形で開発ができます(そうじゃない利用方法もあります)。これは.vueという拡張子のファイルの中にHTML/CSS/JavaScriptが含まれます。これはそのままだと当然
Vue, Vitest, Testing Library, MSWを使ってテスト駆動開発するチュートリアルテストVue.jsテスト駆動開発TestingLibraryVitest 今回は以下のライブラリを中心にVueにおけるテスト駆動開発(TDD)の進め方を説明します。 Vue3 Vitest Testing Library Mock Service Worker Options APIで書きますが、テストコードはComposition APIでも動くので、 Composition APIの実装に多少慣れてる人はぜひとも挑戦してください。 今回の記事の中で作ったコードは以下のリポジトリに収めました。 テスト駆動開発(TDD)ってなに? TDDとはTest Driven Development(テスト駆動開発)の略であり、その文字通り、 テストを先に書いてその後にそのテストを満たすコードを書
AWS でWebアプリ作る機会があったので、色々調べるとAmplifyが便利そうだったので使ってみました。 今回作成するアプリの主な機能は以下: NuxtベースのTODOアプリ Lambda使ったGraphQLのAPI DynamoDBへのデータ保存/読込 DynamoDBのデータとリアルタイム同期 Cognitoによる認証機能 基本的には公式チュートリアルをなぞってますが、Nuxtで使うに当たりいくつか変更点があるので、Nuxt使いに役立てば幸いです。 Amplifyの初期設定 まずAmplifyのCLIをインストールしましょう。
VeeValidateは以下の特徴を備えたVue.jsのバリデーションライブラリーです。 ドキュメントを読みつつ訳しながらまとめた内容です。 テンプレートベースのバリデーション 多彩なバリデーションルールがデフォルトで用意済み 一級のローカライゼーションサポート HTML5のinputフォームとカスタムコンポーネントのバリデーションが可能 カスタムルールとエラーメッセージも作成可能 はじめよう 利用方法 まずVueのインスタンスに登録します。 import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);
JavaScriptでforループを使いたい時はfor...of文を使うのがES6になってからは定番になってました。 そんな中で通常のfor文ではいつも一緒にいたインデックスを表示したい事案があったのですが、やり方が分からず調べたのでまとめました。 イメージ的には以下のようにforループの中でインデックス番号を利用したい場合です。 const students = [ { name: 'Taro', age: 26 }, { name: 'Jiro', age: 24 }, { name: 'Siro', age: 22 } ] for (let i = 0; i < students.length; i++) { console.log(`${i}: ${students[i].name}`) } // 0: Taro // 1: Jiro // 2: Siro
ここ数年間アジャイル開発に取り組んでいて、CSM&CSPOなど取得しつつスクラムをより良く回すことに努めてきました。結果チームレベルでのアジリティを上げることは出来る実感はついてきています。ですが、SIerに居るものでじゃぁこれを大規模開発に持っていこうとした時、どうすれば良いのよ?という悩みは常にありました。Scrum of Scrums、LeSS、Nexusなどスケールするアジャイル開発FWは色々あるのですが、勉強不足なのもあり決め手に欠けていたのです。 そんな私が今年に出会ったのがSAFe1です。SAFeに出会って光明が見えました。 SAFeとは? SAFe公式サイト Scaled Agile Inc.が提唱・メンテナンスしている大規模アジャイル開発向けのFWです。50ヶ国以上200社以上のグローバルパートナーがSAFeを推進していて、30万人以上の実践者がSAFeのコースを受講して
スクラムは基本的にはスクラムガイドに背くことで失敗しやすくなります。 そんな中でもよくあるアンチパターンと一言解説をまとめました。 スクラムマスター(SM)の失敗 SMがDevを兼任する スクラムマスターの仕事はそうなくならない どちらかの作業が片方の作業のボトルネックになる Devとしての作業量が不安定でベロシティが計画に使いづらくなる SMがチームに奉仕していない サーバント・リーダーシップがない SMはチームが抱えるあらゆる障壁の解消に努める(全部自分でやらずとも周りと話をする) SMがチームを管理している 管理は自己組織化につながらない、Devに自発的に動いてもらうための手助けはOK SMが妨害リスト(impediment list)を管理していない チームが直面するあらゆる障壁をリスト化し管理する 優先順位が高いものからSMが順に対応することでチームは円滑に作業ができる SMがス
cross-envはNodeのライブラリでnpmスクリプト実行時に任意の環境変数を設定できます。 これを利用して、開発(ローカル)、検証、本番環境の設定切り替えが可能なビルドを実現します。 各環境の英語と日本語の対応付は以下です。 開発環境 = development environment 検証環境 = staging environment 本番環境 = production environment 利用するファイルは以下です。すべてディレクトリ直下に置いています。 env.development.js (開発環境用ファイル) env.staging.js (検証環境用ファイル) env.production.js (本番環境用ファイル) package.json (環境変数設定を含んだnpmスクリプトを記述するファイル) nuxt.config.js (環境変数に応じた設定ファイルを
動作環境 Windows(筆者環境), MacOS, Linux 社内でアプリ開発がありプロトタイプ作成のため色々ツールを探していたのですが、同僚が教えてくれたBootstrap 4 ベースのPingendoが良かったので紹介します。Pingendoのオススメポイントは主に以下の3つです! ドラッグ & ドロップでUIパーツを配置 Bootstrap 4 ベースの豊富なUIパーツ アプリ内での高いカスタマイズ性 以下詳細を見ていきましょう。 ドラッグ&ドロップでUIパーツを配置 Pingendoの画面構成は以下のとおり。 画面左にUIパーツ、中央にプレビュー、画面下にコード(デフォルトでは最小化)、画面右はテーマという配置です。レイアウトは洗練されているので使う時は迷うことないかと思います。 私が感動したのは左のメニューからコンポーネントを配置する際の手軽さです。動画で見ればすぐ解るかと思
先日初めてDockerに触れ、環境を複製する際に色々調べたのでその内容を共有するため図を作りました。 オプションなど含めた実際利用するコマンド一覧については@voluntasさんの下記の記事がおすすめです。 docker コマンド チートシート 環境複製の手順 環境を1つのサーバーから別サーバーにまるっと複製する場合は、下記手順でうまくいきました。 作業したコンテナからcommitでDockerイメージを作成
はじめに RESTサービスを開発するにあたって勉強したことをまとめました。RESTとはなんぞやというところについて書いていきます。実際の開発方法等については当記事では触れません。 RESTとは REST(REpresentational State Transfer)はWebサービスの設計モデルです。RESTなWebサービスは、そのサービスのURIにHTTPメソッドでアクセスすることでデータの送受信を行います。 例としてQiitaのREST APIを利用してみます。下記のURLにアクセスしてみてください。(ChromeかFirefoxでないと*.jsonファイルのダウンロードになる場合があります) https://qiita.com/api/v2/users/TakahiRoyte {}でくくられている文字が表示されたかと思います。これは JSON(JavaScript Object No
はじめに Netlify Netlifyは静的なサイトを超高速で提供できるWebサービスです。先日210万ドルの出資を受け話題になりました。わずか3ステップでおしゃれなサイトが作成できるとのことです。本記事の前半ではNetlifyの特徴を軽くまとめ、後半は実際にNetlifyを利用してサイトを作成してみます。 Netlifyの特徴 詳細は公式ドキュメントにあります。今回はその中から一部を抜粋して紹介します。 ビルド、デプロイ、ホスティングの全て Netlifyはフロントエンドのビルド、デプロイ、ホスティングの全てを行います。単純な静的サイトのデプロイであれば下記の3行をコマンドラインに打ち込むだけでできます。 また、NetlifyはGitHubリポジトリとリンクし、GitHubリポジトリにプッシュがある度にgruntやgulpを介したビルドをしたうえでサイトをデプロイしてくれます。 これら
VS Codeのデフォルトショートカット一覧です。 ★が付いているのは個人的なオススメです。 キー設定をカスタマイズしたい場合は末尾を御覧ください。 2020/10/06追記:未だにLGTMしてくださる方が多いので更新しました。 全般 General キー 動作 コマンドID ★
このページを最初にブックマークしてみませんか?
『@TakahiRoyteのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く