Next.jsでTrello風タスク管理アプリを作成する日記⑤ - Qiita
はじめに 前回までにドラック＆ドロップでタスクの進捗状態を変更する機能が実装できました。 今回はそれに加え完了したタスクを削除する機能、モーダルでタスクの内容を変更する機能を実装しました。 今回実装できた内容 Redux toolkitを導入してグローバルな状態管理ができるようになった 新しい機能実装に対応できるディレクトリ構成を検討できた Material UIを導入してModalを実装できた onDragとonClickイベントを持つDOM要素のイベントを制御できた 前回までのあらすじ 今までの内容 Next.jsでTODOアプリを作成する日記① Tailwindを導入できた ComponentにPropsを渡せた Componentの中でPropsを使用できた Componentをループを使って表示できた React Iconsを導入できた Next.jsでTODOアプリを作成する日
Vue3をアゲアゲ↑↑する記事 - Qiita
はじめに こんにちは、フロント歴7年目のエンジニアになります🙂 今回は日頃仕事でお世話になっているVue.jsに感謝の意を込めて、 Vueの素晴らしさを皆さんに少しでも感じて貰えたらと思い、この記事を投稿することにしました。 アゲアゲするとか言って 「どうせSFCが便利とか言いたいんでしょ？」 「script setupが凄く凄いとか言いたいんでしょ？」 ・・・いえいえ、そんな当たり前のことを話したいわけではありません。 もっと深いところの説明だったりをですね、 「いやでも最近のVue3はReactに似ているから、それならReactで良くね？」 全く良くないです はい、そういった人達にこそ見て欲しい内容となっております。 つまり私がVueが優れていると信じ使い続ける理由です。 この記事では、Vue.jsの書き方みたいなことは扱いません。 またVueの魅力をお伝えする都合、他のフレームワー
SPAのページをGAで計測？従来のWEBと同じで余裕でしょ！と思い込んでた話 - Qiita
SPAをGA4、UAの両方で計測できるようにしたい！ WEB計測で利用されている超有名なツールといえば「Google Analytics」。（以下、GA） 計測タグを読み込ませるだけで、PV数やユーザー数、セッションなど多くの指標を計測できるこの便利なツールをGoogleは無料で提供しています。Googleさん、太っ腹！ 普段、私が数値集計に使っているGAはUniversal Analytics（以下、UA）形式ですが、Google公式から「2023年7月からGA4に完全移行するよ。今後、UAは使えなくなるよ」と告知されたので、GA4とUAの画面を見比べたりUAで計測できている数値をGA4で確認する方法を探したりと、手探りで移行準備を進めています。 GA4に早く慣れないとなぁと考えながら普段の業務をこなしているところに、Nuxt.js、Node.jsを使ったSPA（シングルページアプリケー
デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #4 サインアップページの作成 - Qiita
←Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #3 個別記事ページの作成 サインアップ(登録)ページの作成 サインアップページ及びそのロジックを作っていきますが、難易度が一気に上がります。 一気にすべて理解しようとせず、少しずつコードを読み解いていってください。 まずはサインアップページを作ります。 <template> <v-app id="inspire"> <v-main> <v-container class="fill-height" fluid > <v-row align="center" justify="center" > <v-col cols="12" sm="8" md="4" > <form @submit.prevent="signUp"> <v-card class="elevation-12"> <v-toolbar color=
【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする - Qiita
はじめに 本稿は Vue 2.x が対象になります。Vue 3 に関する記事はこちらを参照ください。 Vue.js のコンポーネント間のデータのやりとりについて、親コンポーネントから子コンポーネントへデータを渡すには、v-bind 属性と props オプションを利用します。これにより親コンポーネント側でデータを変更すれば、子コンポーネントの props 経由で渡されたデータも変更されます。しかし、子コンポーネント側で props 経由で渡されたデータを直接変更することは非推奨です。しかし、子コンポーネントの変更を親コンポーネントへ反映したい場合があります。たとえば、再利用性のある入力フォームのコンポーネントを親子間でやりとりするケースです。この問題を解決するには v-model を正しく理解する必要があります。本稿で紹介するコードは CodeSandbox にて共有します。 サンプルコー
Electron（v.15.0.0 現在）の IPC 通信入門 - よりセキュアな方法への変遷 - Qiita
2021/09/22にリリースされた v.15.0.0 中でIPC通信周りに大きな変更はありませんでした。 ただ、その前のバージョン（14.0.0）で、contextBridge.exposeInMainWorld(apiKey, api)からExperimental（実験的）が取れ、正式運用となっていたようです（#30011）。 Electron における IPC 通信 Electron で Desktop アプリケーションを作るにあたって理解しなければならないのは、根幹を成す「IPC通信」かと思います。IPC は Inter-Process Communication、プロセス間通信の略です。 IPC 通信の方法については、Electron において、いくつかの段階を経て、進化を遂げています。今回の記事では、その歴史を追いながら、仕組みとセキュアな方法を書いていきたいと思います。 なぜ
Nest.jsでGuardからControllerへデータを渡す方法 - Qiita
Nest.jsでは公式ドキュメントにも書いてあるとおり、Guardを作成する際には CanActivateインターフェースを継承する canActivateメソッド中でbooleanを返却する という実装をすることで対象のリクエストの呼び出し可否をコントロールするというのが基本的な使い方です。 しかし、実務で色々なGuardを実装していると、Guardで取得したデータをControllerでも使いたくなるケースに時々出くわします。 GuardとControllerとで同じデータを取得する処理を重複して実装するのは無駄なので、今回はこのGuard内で取得したデータをControllerへと渡す実装をしてみようと思います。 1. Guardのベースとなる抽象化クラス「BaseGuard」を実装する 公式ドキュメントのPassportの実装を参考にします。 認証用モジュールである@nestjs/
Jest・Supertestを使用したnode.js(Express)のAPIテスト app.listen()はエラーになる - Qiita
Jest・Supertestを使用したnode.js(Express)のAPIテスト app.listen()はエラーになるJavaScriptNode.jsExpressテストJest はじめに Jest・SupertestでAPIテストを作成した際に躓いたので、その実装の備忘録を残しておく。 この記事ではnode.js(Express)のAPIテストを実行できるようになる部分までを記載した。より実践的にはAPIテストのエンドポイントのメソッドでWeb APIをcallしているような場合は、それをmock化してWeb APIがcallされないようにすべきであるが、それについてはmockを使ったNode.js(Express)のAPIテストを参照。 （実際にテストを作る中でトラブって困った事もトラブった事として残した。） どうやってExpressのAPI(End Point)テストをjes
【個人開発】これまでになかった席替えアプリ「席替えメーカー」を作りました - Qiita
はじめに こんにちは、@krpk1900_devと申します。 以前教師として勤めていた経験をもとに現場で働く教師の業務改善に貢献したいと考え、「席替えメーカー」というサービスを開発しました。 席替えメーカーは、入力された条件を満たす席替えの原案を提供するサービスです。 席替えメーカーにかけた思いは以下の記事にまとめてあります。 これまでの席替えアプリと違う点 既存の席替えアプリはランダムなシャッフル機能だけのものが多く、例えば以下のような条件を考慮できる席替えアプリは存在しませんでした。 目の悪い生徒を最前列に配置したい 教室に入りにくい生徒をドアの横に配置したい 相性の悪い生徒を離して配置したい 勉強が苦手な生徒の横にはサポート好きな生徒を配置したい 使い方 1. 全体の形と班の形を入力する まず、全体の座席の形を選択します。班の形も変えることができます。 2. 今の座席に生徒名を入力す
憧れのTypeScriptフルスタック環境がコマンド1発で作れる超軽量フレームワーク「frourio」 - Qiita
今年6月のTypeScript Meetup #4で初公開されたTypeScript製フレームワーク「frourio (フルーリオ)」が今月のアップデートでめちゃくちゃカッコいい感じに仕上がっているので紹介します frourioはフロントからバックエンド・ORマッパーまでのアプリ全体を一つのTypeScriptとして統合型チェックが可能になるフレームワークです 1つのディレクトリで完結するので一見するとモノリシックのようですが、型で繋がっていること以外はフロントとバックが個別のプロジェクト扱い（それぞれに別のpackage.jsonがある）なのでフロントはVercel、バックエンドはDockerでAWSにデプロイするみたいなことが可能です 新しいfrourioの特徴 TypeScript製で最速のフレームワーク コマンド1発でフロントSPA + RESTサーバー + ORマッパーの環境構築
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/injectJavaScriptVue.jsフロントエンドVuexCompositionAPI まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject
TypeScript学習ロードマップ - Qiita
TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。 また、jsと互換性があり、jsの上位互換（スーパセッ
LaravelからVue.jsを使う最短レシピ - Qiita
以下古い情報です この記事は2018年3月に書かれた記事で、Laravel5.4をベースに記載しています。 （執筆時点では2020年4月ですが）今からこの手順通りにはできませんので、こちらの記事に移動してください。 Laravel7からVue.jsを使う最短レシピ - Qiita Laravel から最短でVue.jsを使う インストールから動かして本番投入まで一通りっていうのが見つからなかったのでまとめてみる。 知らないとわかんないよそんなの！みたいな罠がそこかしこに。 TL;DR bladeテンプレートの修正とコマンドをいくつか実行すれば使える bladeのいじるとこ クローンしたら割りといい感じになるリポジトリつくった fruitriin/laravel-vue-example 今回の環境 macOS High Sierra PHP 7.2 (composerがインストールされている
更新！！Laravel6/7 (laravel/ui)でのLogin機能の実装方法〜MyMemo - Qiita
Laravle6.x/7.xのログイン実装コマンドの違いを見る みなさんこんにちは ジーズアカデミー学校長 山崎ですm(_ _)m 今回はLaravel7にアップデートされLogin画面作成(laravel/ui)を前バージョン同様で使用したい場合 の方法をMemoしておきます（初めてLaravel触る人はこっちが良いかも、、敷居が低い）。 ◆「Laravel8/jetstreamの人はこちらのリンク」 https://qiita.com/daisu_yamazaki/items/607ea579a374c4187562 ◆【Laravel8.x のLOGIN(Breaze)動画も用意してます！】 https://youtu.be/XXXQOYnsCBk 前提条件/検証環境 LaravelでCRUDを作成した経験がある人 Laravelの基本を理解している人 記事内容的には、Laravel
これからVueを勉強しようと思っている人への道しるべ（勉強方法）を書く - Qiita
フロントエンドに興味があって、Vueをやってみたい...!という人、きっと多いかと思います。（きっと、きっとね） ただ、どうやってVueを勉強し始めればいいのかわからない、という人もまた多いはず。Javascript自体あんまり触ったことないし...って人もいると思います。 そこで、これからVueを新たに勉強する人向けに、何を、どの順番で勉強すればいいのかの道しるべ的なものを書いていきます。 対象読者はこんな感じ。 ・RubyやPHPはよく書くけど、Javascriptあんまよくわからない ・jQueryチョット書ける ぜひ参考にしてもらえると幸いです。 ※もちろん、以下に書く方法が最良というわけではないので、参考程度に考えてくださいね。 ES6の記法を知る PHPやRubyを書けるなら、Javascript自体の勉強はそんなに大変ではありません。一部の独特の挙動を除けば、すんなり理解でき
Laravel open source project で参考になりそうなもの - Qiita
参考になりそうなLaravel製のオープンソースプロジェクトを集めた。 Railsの時はGitLabを見ていれば安心できたので、Laravelにもそのような存在を求めたという感じ。 参考 https://github.com/chiraggude/awesome-laravel Koel 多分これが最大です。 個人的な音楽ストリーミングサイトです。 綺麗なサイトもありますし、GitHubでのスター数も2017年4月8日時点で7400以上です。 Laravel 5.4, Vue.js 2.1, Yarn などを使っておりモダンな印象。アップデートにも追随しています。 特にWeb APIベースでVue.jsと一緒にLaravelを利用する場合、これに従っておけば間違いないと思います。 Vuex は使ってないので、その参考にはならないかも。 ちなみに、Vue.jsの作者のブログで知りました。 L
Nuxt.js v2.5.0がリリースされた(v2.5.1について追記) - Qiita
Nuxt.js v2.5.0 リリース 🎁 Nuxt.js v2.5.0 is out 🎁 💅 DX: Loading screen, TypeScript & nuxt -o 📦 Build: Babel 7.4 & Core-js 3 🚀 Performance improvements 🐞 30+ bug fixes 💚 30 contributors for this release Read more on https://t.co/zmSCcaO3oh pic.twitter.com/PL0etAy1DM — Nuxt.js (@nuxt_js) 2019年3月21日 Nuxt.js v2.5.0がリリースされました。大きな変更点をGithubから抜粋します。 Typescript DX No longer needed to install nuxt-ts fo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Serverless Frameworkの使い方まとめ - Qiita
Nuxt.jsでAuth Moduleを使ってログイン機能を実装する - Qiita
