自分だけの ESLint Config を作る
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
はじめに 業務でPlaywrightの環境構築及びCI/CD連携担当したことから、E2EテストとVRTのベストな構成をずっと悩んでいました。 自分の中である程度納得できる形まで落とし込めたので、その知見を残しておきます。 🎭Playwrigth Microsoftが開発したテストツールです。複数ブラウザ対応、自動待機機能、並列処理などによりE2Eテストを実施します。また、スクリーンショットの比較によるテスト（VRT:Visual Regression Testing）により視覚的変更も検出可能です。元々Puppeteerを作っていたチームにより開発が行われているようです。 ツールの比較対象にcypressがありますが、最近の週間ダウンロード数はPlaywrightが上回っているようです。 （他にはSeleniumやベンダー提供の有料E2Eテストツールなどもあります） また、Playwri
ReactとReact Nativeでコードを共通化し，web / android / iOS (+PC)クロスデバイス開発 - Qiita
ReactとReact Nativeでコードを共通化し，web / android / iOS (+PC)クロスデバイス開発ReactreactnativeElectronredux React, React Native, Reduxを使って，web, android, iOSアプリのコードを出来る限り共通化します． ReactとReduxを組み合わせて使う場合，見た目を司るPresentational componentとロジックを司るContainer componentにコードを分離します( http://qiita.com/tuttieee/items/a3ca7d9d415049d02d60 )． そこで，Presentational componentは各デバイス固有のコードにし，Container componentは共通化することでロジックをデバイス依存のコードから切り離
なぜコーディングガイドラインを作るのか コーディングガイドラインを作成して運用するメリットは以下です。 コードの可読性の向上 コーディングガイドラインを規定しチーム全員がコーディングガイドラインに基づいて開発することで、コードの統一性が保たれ、コードの可読性が向上し、保守性が高まります。 チーム内でのコミュニケーションの円滑化 コーディングガイドラインが規定されている場合、チーム内でのコードの書き方についてのコミュニケーションが円滑になります。コードレビューなどでコードの書き方に関して議論する際に、コーディングガイドラインをベースにして議論することで、論点の整理や修正方針の合意が容易になります。 プロジェクトの拡張性の向上 コーディングガイドラインを規定することで、コードの再利用性が高まります。また、コーディングガイドラインに基づいて開発することで、新たな機能の追加や既存機能の変更など、プ
勉強とは思っていないけど図書館で参考書を読んでいます． 2024年07月26日 Logging おはようございます．勉強とは思っていないけど図書館でReact.jsの参考書を読んでいます．読んでいるだけで実践はあまりしていない．仕事では使っていたり、たまにしている．でも、まだ使いこなせてはいない． ちなみに週一、二回のペースで図書館で勉強している感じですね．React.jsの勉強していて損にはならないと思っています（React.jsシェア率は高いので潰しが効くらしい）．今まで自分はバックエンドエンジニアとしてやってきたけど、フロントも身に着けないといけないみたいな雰囲気になってきている． 今のところ、従業員、自分しかいない感じなのでマルチに動いてほしいだろうという感じがしますが、未だにReact.jsの良さが分からない自分がいます．恐らくそこまで使いこなせていないからそういう感じになるだろ
0. はじめに こんにちは。あーろです！ 私は現在、新卒2年目23歳で都内SIer企業に所属し、データエンジニアをしています。 この度、独学にて未経験からWebエンジニアへの転職を目指し、ポートフォリオを作成しました。学習を開始して約6ヶ月が経過したため、その成果をご紹介させていただきます。 まだまだ学習段階のため、内容に誤りがある可能性があります。コメントにて教えていただけますと幸いです。 1. 作成したサービス これだけでシフト管理が完結するシフト管理サービスです。 サービス名：ShiftPilot GitHub：https://github.com/arlo-engineer/ShiftPilot 2. 開発の背景 大学時代に個人居酒屋でアルバイトをしていた際、以下のようなシフト管理に関する困りごとがありました。 シフト作成・共有の遅れ マネージャーの業務過多により、シフト作成と共有
はじめに 初めまして。最近昼夜逆転してきた yakiniku0220です。 今回は前回書いた記事の続編で、実際にVS Codeの拡張機能の開発でも採用しているTailwind CSSの導入に関して執筆しようと思いました。 前回の記事を読んでいない方はぜひ読んでいただけると幸いです。 VS CodeのセットアップやReact.jsの導入はこの記事では省きます。 Tailwind CSSのSetup 今回はTailwind CLIを使用した手順を記載します。 Tailwind CSSのInstall まずはTailwind CSSをinstallしてtailwind.config.jsファイルを生成します。
はじめに 前回の に引き続き、懲りずにまたやりました。 極めてシンプルな機能しか持たない簡単に作れそうなWebアプリを同時開発してしまおうという企画の第二弾です。 今回はそこまで急がずにゆるくやったので精神的に楽でした。 二つのテキスト生成系Webアプリ 今回はテキスト生成をコンセプトにしました。 別にコンセプトにこだわる必要もないのですが、やはり統一感があった方が良いと思うので今後もこんな感じでやっていくかもしれません。 DATEジェネレーター 日付を生成する機能を持つWebアプリです。 海外のサイトでクレカなどの登録時に、生年月日を年・月・日ではなく月・日・年だったり日・月・年だったりして困惑した覚えがあった経験から着想を得ました。 好きな日付を入力するとそれぞれ 年月日、月日年、日月年で日付が生成されます。 DATEジェネレーター ワードリバース 文を入力すると逆さまの文を生成してく
最近React.js(Next.js)を学習し始めた学生エンジニアです。 メインはバックエンドをやっているのですが、インターンとして参加している会社でどっちもやってもらうと言われましたので現在キャッチアップ中です。 今回はNext.jsが提供している二つの画面遷移方法についてその挙動や使用法の違いを復習がてらまとめました。なおversionは13.4を使用しています。 Next.jsにおける画面遷移 Next.jsには画面遷移のパフォーマンス向上のため、いくつかの内部的な仕組みがあります。それを踏まえた上でLinkコンポーネントやuseRouterを使用するのが良いかと思いましたのでそれを先に紹介したいと思います。 今回はいくつかある特徴のうち、最も重要な二つについて紹介します。 1️⃣ Prefetching prefetchとはその表現にも表されている通りpre(事前に)fetch(取
実際のところどうなのか? こんにちわJboyです〜 今日は普段はFlutterで開発をしている私が、ReactNativeを学習する機会があったので、個人的な感想ですが、比較をしてみようと思います。SwiftUIやJetpack Composeとも比較したいですが、Nativeで作った方が安定して、クロスプラットフォーム独特のエラーや面倒臭い環境構築でハマることがないので、モバイルアプリを作りたいなら、プロジェクト作ってビルドするだけのSwiftかKotlinをおすすめします。 Flutter知らない人のためにご紹介すると、Googleが開発したiOS、Android、Web、Desktopアプリが開発できるクロスプラットフォームと呼ばれている技術です。日本では流行っているのか、新規開発で使われているようですね。 有名どころだと、TOYOTA、リクルート、GMOペパボ、mixiですね。 R
React(Next.js)で開発を始めるための環境構築入門(1日目) - とことんDevOps | 日本仮想化技術のDevOps技術情報メディア
こんにちは。12月に入ってあちこちでアドベントカレンダーが始まっていますね。今年はどうしようか前日まで迷っていたのですが、今年はReactを使ってフロントエンド開発を始めたので、個人的な振り返りも兼ねてこれからReactを始める方向けに記事を書きます。 Reactとは Meta(旧Facebook)とコミュニティによって開発されているUI構築のためのJavaScriptライブラリです。React.jsやReactJSと呼ばれることもありますが、Reactという名前のみで呼ばれることも多いです。 Reactは元々FacebookのNews FeedのUIを構築するために開発されたもので、その後2013年5月にオープンソース化されました。現在では様々なサービスで使用されています。 Reactの特徴 Reactの特徴は以下の通りです。 宣言的なView コンポーネント志向のUI構築 効率的なレン
1. はじめに 以前、新規iOSアプリ開発プロジェクトで候補に上がったアーキテクチャの候補として、UIKit+Reduxを利用したアーキテクチャが候補に上がった事があり、実践で導入するために簡単なサンプルアプリを作成し、実際の肌感を掴む意味も込めて検証を実施した経験がありました。 当時作成したサンプルアプリに関する解説はこちら ※ この記事ではReduxの機構を実現するために、ReSwiftというOSSを利用しています。 最近では、業務内でもUIKitを利用したUI実装よりもSwiftUIを利用したUI実装の割合が増えていった事もあり、この機会に改めてある程度複雑なUI構造をとるサンプルアプリをReduxを利用した形で試してみたいという動機から取り組んだものになります。 また、もう1つの動機としてはPoint-Freeが公開しているTCA(The Composable Architectu
以下のプロンプトで、Claude 3.5 Sonnetに新機能のArtifactsについて解説してもらいました。 ClaudeのArtifacts機能について詳しく解説した20000字程度のブログ記事を書いて。具体的な例を沢山示して分かりやすく説明して。 Claudeのアーティファクト機能についてはじめに人工知能（AI）と人間のコミュニケーションは、日々進化を続けています。その中で、Anthropic社が開発したAIアシスタント「Claude」の最新機能「アーティファクト」が、AI会話の可能性を大きく広げています。本記事では、このアーティファクト機能について詳しく解説し、その活用方法や利点を具体例とともに紹介します。 アーティファクトとは何か？アーティファクトとは、Claude との会話の中で生成される独立したコンテンツのことを指します。これらは通常、コードスニペット、ドキュメント、図表、
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Playwright+GitHub Actions*E2E with VRT 環境構築とCI/CD連携の知見
フロントエンドのコード規約を作成してみた（React×TypeScript）
勉強とは思っていないけど図書館で参考書を読んでいます． | zip358.com
【独学】シフト管理サービス「ShiftPilot」をリリースしました
VS Codeの拡張機能開発でTailwind CSSを導入してみる - Qiita
【個人企画】ミニアプリ複数同時開発チャレンジ【二つのテキスト生成系アプリ】
【Next.js v13】useRouterとLinkコンポーネントについて - Qiita
FlutterとReactNativeを比較してみた...
SwiftUI+Reduxを利用したUI実装サンプルにおけるポイント解説
Claudeのアーティファクト機能についてClaude自身が解説｜IT navi