GitHub Actions のアクションのつくりかた（JavaScript 編） - 生産性向上ブログ
help.github.com この記事では、新しくなった GitHub Actions における、JavaScript アクション作成方法について解説します。 www.kaizenprogrammer.com GitHub Actions とはなんぞやという人は、先にこちらの過去記事をどうぞ。 目次 アクションについて アクションの保存場所 アクションのバージョニング 簡単な例 (Hello, World) メタデータ JavaScript アクションの使用する Node.js バージョン toolkit node_modules の管理 README.md 公式テンプレート 少し実践的な例 その他 GitHub 公式のアクション サードパーティーのアクション まとめ アクションについて 前回の記事で新しくなった GitHub Actions の使い方について簡単に解説しました。この記事
既存のDocker開発環境をVS CodeのRemote Developmentで開発できるようにしてみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 私は普段のローカル開発環境として、Dockerを利用した開発を行っており、このコンテナ環境はsshを利用してVS Codeで接続および開発できるようにしています。 一方で、VS Codeを利用しているので「せっかくVS Codeを利用しているのであれば、Remote Development（のコンテナ機能）を利用して開発したい！」という想いから設定をしてみたので、その設定方法についてまとめておきたいと思います。 前提 まず、元々の環境についてです。 OSなど OSはMacOSで、DockerについてはDocker Desktop for Macを利用しています。 VS Codeの拡張機能 VS Codeの拡張機能に「Remote Development（ms-vscode-remote.vscode-r
「Divide and Conquer / 分割統治法」 という解法（アルゴリズムの話でよく出てきますね）は、「困難は分割せよ」 として知られる、デカルトが『方法序説』で提唱した思考法が元になっています1。 第二は、わたしが検討する難問の一つ一つを、できるだけ多くの、しかも問題をよりよく解くために必要なだけの小部分に分割すること。 ―― 岩波文庫 『方法序説』 デカルト著 谷川多佳子訳 同様に、React で多機能で複雑な画面を作りたい時、それを小さな機能の集まりと捉えて、それぞれをコンポーネントにすることで、開発がラクになることがあります。 フロントエンドの複雑さや、デザインのための Atomic Design という考え方の影響、または /scripts のように分ける習慣の名残なのか、フロントエンド開発者には、《再利用のためにコンポーネントを作る》という思い込みがあります。（もしくは
TypeScript の型を用いたコンポーネントの責務の明確化 - Timee Product Team Blog
はじめまして！フロントエンドエンジニアの樫福 @cashfooooou です。 タイミーでは Next.js × TypeScript で toB 向け管理画面を作成しています。 この記事は、toB向けの管理画面の開発時に筆者が気づいたコンポーネント間の責務の明確化の必要性と、 TypeScript の型を用いて責務の分割をサポートする方法の紹介しています。 背景 利用者の様々なニーズに応えるために、toB向け管理画面には様々なページが実装されています。 2つ以上のページを実装していると、それぞれのページで実装の粒度がバラバラになることがあります。 一方ではフックの中で実装していたようなロジックが、他方ではコンポーネントで実装されている あるページのコンポーネントは複数のファイルに分割しているけど、こちらのページでは巨大な一つのファイルで実装が完結している 属人的な責務の分割が失敗した様子
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は10画面ほどの中規模アプリケーション（OOUIの考え方を取り入れたら画面数が減りました） 基本的にバック
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
サービスサイトをGatsby×Wordpress×NetlifyでJamstackなサイトにリニューアル - カミナシ エンジニアブログ
はじめまして、株式会社カミナシのエンジニア @tomiです。 カミナシは、2020年10月にサービスサイトをフルリニューアルしました。 kaminashi.jp 今回のサイトリニューアルでは、どのような構成で作ったのか、また技術選定で考慮した点をお伝えします。 Jamstackな静的サイト構成 Gatsby.jsとWordpressを使いJAMstack構成で作成しました。 最終的に以下の画像のような構成になりました。 利用した技術を並べると、 Gatsby.js Typescript StyledComponents GraphQL EsLint + Prettier Wordpress + Gutenberg Netlify 導入事例やセミナー情報など、動的な情報は記事としてWordpressに登録し、Gatsby.js側で記事をGraphQL経由で取得して表示しています。 静的なファ
Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた - SMARTCAMP Engineer Blog
スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.jsの学習コストの低さやコンポーネント指向は少人数のチームでユーザーに素早く価値を届けていきたい弊社の開発においても重宝しています。 さてそんなVue.jsですが、2020年のQ1にバージョン3.0が正式リリースされることが予告されており、正式リリースに先駆けて目玉機能のひとつであるComposition APIが公開されました。 Composition API RFC | Vue Composition API ドキュメントやAPIリファレンスのみならず、バージョン2系でプラグインとして利用で
【SvelteKit入門】SvelteKit + Prismaによる掲示板アプリ作成 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！ラクス１年目のkoki_matsuraです。 今回は掲示板アプリ作成を通して、SvelteKitの基礎的な部分をご紹介させていただきます。 目次は下記のようになっています。 はじめに Svelteとは SvelteKitとは 掲示板アプリ作成 アプリの概要 環境構築 SvelteKit データベース Prisma テーブル作成 ルーティング作成 新規登録画面 ログイン画面 スレッド投稿画面 スレッド一覧画面 スレッド詳細画面 ログアウト機能 エラー画面 終わりに はじめに Svelteとは WebアプリケーションやUIを構築するためのJavaScriptフレームワークです。有名なものでは「React」や「Vue」が挙げられます。 Svelteにはこれらのフレームワークと比べて下記のような特徴があります。 仮想DOMを用いない こちらが最も大きな特徴となります。 まず、仮想DOM
RomeはLinterでありCompilerでありBundlerでありFormatterでありTesterでありMinifierであり…… ともかく、フロントエンドの統合ツールチェーンです。 これまでBabel、ESLint、webpack、Prettier、Jestなど様々なツールでバラバラに行っていた作業が、Romeひとつ使うだけで完結するようになるという、これまで何度再発明されてきたかわからない究極のフロントエンドツールです。 まあ、今のところ日本での知名度はさっぱりなのですがね。 で、これまでRomeはJavaScriptで書かれていたのですが、これをRustで書き直すことが発表されました。 以下はRome公式サイトの記事、Rome will be written in Rustの日本語訳です。 Rome will be written in Rust 🦀 RomeはJavaSc
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
はてなで使用しているRenovateの設定プリセットを公開しました - Hatena Developer Blog
こんにちは。毎年のAppleとGoogleからのお達しのおかげで、開発環境やライブラリのアップデートが大好きな id:ikesyo です。普段はiOS・Androidのモバイルアプリ開発を主にしています。 はてなでは先日、はてな社内で使用しているRenovateの設定プリセットをGitHubで公開しました！ はてな社で使用しているRenovateの共通設定をまとめたリポジトリを公開しました！https://t.co/2mgZNQ3pxw RenovateのShareable Config Presetsという機能を活用しています。— Sho Ikeda (@ikesyo) 2020年6月12日 リポジトリはこちらです。 Renovateについて Renovateについて簡単に説明すると、様々なプログラミング言語やツールに対応したライブラリ・依存性の自動アップデートサービス（もしくはツール）
Ruby/Rails でサーバ書いてたエンジニアが、転職後数ヶ月で TypeScript/React/Redux なチームで書けるようになるまでに参考にしたこと - Qiita
Ruby/Rails でサーバ書いてたエンジニアが、転職後数ヶ月で TypeScript/React/Redux なチームで書けるようになるまでに参考にしたことJavaScriptTypeScriptReactredux 夏に転職して、それまではrubyしか書いてこなかったのですが、 転職後はそれまで全く触ってこなかった TypeScript/React/Redux/Firebase なチームに入って開発できるようになるまでに参考になったものです。 もちろん、実際にはもっと他にも色んなものを参考にしています。 また、ここに書いたものも隅々まで読んだりしたわけではないのですが、振り返ってみて役に立ったなって思い出せるのを書いてみました。 本 りあクト！ りあクト！ TypeScriptで始めるつらくないReact開発 第2版 りあクト！ Firebaseで始めるサーバーレスReact開発 E
Transcript Svelte + TypeScriptͰ Chrome֦ுΛ࡞Δ Sakito ࣗݾհ • ໊લɿsakito • Twitterɿ@__sakito__ • ॴଐ • αΠϘζ גࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ΞδΣϯμ • Svelteͱʁ • ࡞Δͷ • ڥߏங • manifestΛ࣮Λ͢Δ • svelteͰ࣮Λ͢Δ • ·ͱΊ Svelteͱʁ Svelteͱ? • React,Vue,AngularͷΑ͏ʹએݴతʹUIΛॻ͚Δ • গͳ͍ίʔυͰ࣮͕Ͱ͖Δ • https://svelte.dev/blog/write-less-code • ԾDOMͳͲΛ༻ͤͣɺϏϧυ࣌ʹ࠷దͳόχϥJSʹม͢Δ • ͦͷ্ύϑΥʔϚϯε༏Ε͍ͯΔ • TypeScriptͷରԠ͞Εͨ • https://svelte.de
はじめに このエントリは全5回を予定する19卒新人ブログリレーの第4回目です。 はじめまして、リクルートテクノロジーズ新卒2年目の高橋 勇人です。 現在は不動産検索サービスSUUMOのフロントエンドエンジニアとして働いています。新卒入社してからの1年間、SUUMOの新機能開発に携わり、物件を地図から探す機能の開発を進めてきました。 SUUMOではこれまでJavaScript+jQueryで開発されてきましたが、SPサイト上で地図による物件探し機能を実現するために、React+Reduxという技術スタックが採用されました。 （※SP＝スマートフォン） 長期的な開発がされてきたプロダクトで、これまで使ってきていなかった技術スタックでの開発を推し進めるにあたり、継続的な保守性を向上するための取り組みの一環としてテストの整備が進められました。 本記事では、React+Reduxでの地図機能の開発に
2021年もう終わっちゃいましたが、転職と学業と子供のことについて書きます。 TL;DR 転職した。 Ubieに入社して半年経った（別記事） UoPeopleでは21単位取れた。 子供3歳。今が一番かわいい。 転職 やはり2021年の一番のイベントは転職だった。 2月頃から本格的に転職活動を始め、3月末で終了した。 9社応募して結構大変だったので少し詳しく記録を書いておくことにする。 応募した会社 エンジニアとして、より成長できそうな会社 情報発信を積極的にしていたりとカルチャーが魅力的な会社 海外事業をしている、もしくは英語を使うなど職場環境がグローバルな会社 リモートワークがメインなど子育てしながらでも働きやすい環境 をピックアップして9社ほど応募した。 やったこと ポートフォリオの作成 一からデザインしたい気持ちもあったが無限に時間かかりそうなのでテンプレートを探しアレンジした。 ネ
前書き ESLint は JavaScript, TypeScript のための静的検証ツールです。 ESLint を活用することで、コーディング規約やベストプラクティスを機械的に強制することによりコードレビューの手間を省き、本番環境でのエラーやパフォーマンスの悪化を抑制することができます。 TypeScript を使っているプロジェクトでは、パーサーを適切に設定すれば型情報を用いたより精密な静的検証を行うこともできます。 eslint を使う際、 eslint:recommended, plugin:@typescript-eslint/eslint-recommended などの各 eslint plugin の推奨 config のみを使って済ませたり、 eslint-config-airbnb などの config のみに頼ることも多い印象ですが、 recommended conf
- SSL関連の障害がなぜ起きてしまうのか？ - 何で対応端末が変わるのか - 何をすれば障害を防げるのか？ - SSL対応するためにどういう体制を組んでいたらいいのか？ おことわり: 社内向け勉強会のスライドを再編集したものです。社外向けに割愛した結果、ちぐはぐになっている部分があります。
JavaScriptの大きな特徴の1つは、「シングルスレッド」基盤の言語だという点です。スレッドが1つということは、同時に1つの作業だけを処理できるということです。しかし、実際にJavaScriptが使われる環境を考えてみると、多くの作業が同時に処理されていることが分かります。例えば、Webブラウザは、アニメーション効果を見せながら、マウスの入力を受けて処理をし、Node.js基盤のWebサーバーでは、同時に複数のHTTPリクエストを処理したりします。スレッドが1つなのに、どうしてこのようなことができるのでしょうか？質問を変えると、「JavaScriptはどのように同時実行（Concurrency）をサポートしているのでしょうか？」 このとき登場する概念が「イベントループ」です。Node.jsを導入した際、イベントループ基盤の非同期方式でNon-Blocking IOに対応して…」のような
2024-01-01 quick-lint-js is a JavaScript bug finder. Today, version 3.0 makes it also a TypeScript bug finder! quick-lint-js complements TypeScript with beginner-friendly messages and fast linting. install quick-lint-js 🌐 try in browser code on GitHub Example code used in this article has been adapted from various open source projects, including some Copyright Tiny Technologies, Inc. and Copyrigh
CLI用のコマンドを作ってみようと思いたったのですが、CLI開発フレームワークoclifを試してみたらとても簡単で環境構築もすんなりできたのでびっくりしたという話。 概要 ある用途で思いたってCLIのコマンド作ろうと思った oclifというCLI用のフレームワークがあったので試してみた 簡単すぎてびっくりした 追加でPrettierとJestも対応してみました 動機 誰しもCLIのコマンドをつくりたくなることがたまにある。僕はある。 今回はGUIを作るまでもなく、コマンドでシュッと実行したい作業があったので勉強と遊びを兼ねてコマンドを作ることにしました。CLIの開発ツールはいろいろありますが、今回はやりたいことを実現するのにすでに知見としてあるものを流用したい背景aからNode.jsでやることにしまた。 Node.jsにもCLI用を作るためのライブラリがさらにいくつかありますが、今回はoc
Oxlintは、JavaScriptやTypeScriptのコードを調べ、エラーにつながりやすい書き方となっている部分や、必要のない部分を指摘する機能を持っている。この用途では「ESLint」が事実上の標準となっているが、100％JavaScriptで記述してあるため、実行速度が問題となっている。 Oxlintでは、プログラムを記述する言語にRustを選ぶことで処理速度を大きく引き上げた。さらに、並列処理に対応し、コンピュータのプロセッサが搭載するコアの数が増えるに従って性能が上がっていく設計になっている。さらに、テスト結果のメッセージをシンプルかつ分かりやすいものにした点も特徴として挙げられる。 正式版になる前からOxlintを試験的に使っていた米Shopifyの担当者は、ESLintを使っていた頃は自社開発のコードをテストするのに75分かかっていたが、Oxlintを使ったところ、10秒
HSEとは何か
Heterogeneous-Memory Storage Engineについて解説します これは2020年6月6日に行われた カーネル/VM探検隊 online part1での発表資料です 参考文献 Heterogeneous-Memory Storage Engine: https://www.micron.com/hse Don't stack your log on my log: https://www.usenix.org/node/187064 電源を切っても消えないメモリとの付き合い方: https://speakerdeck.com/fadis/dian-yuan-woqie-tutemoxiao-enaimemoritofalsefu-kihe-ifang この資料のサンプルコード: https://github.com/Fadis/hse_demo カーネル/VM探検隊
Serverless FrameworkのExampleを見て、サーバーレスの様々な実装を学ぼう | DevelopersIO
概要 CX事業本部の佐藤です。 Serverless FrameworkではExampleとして、さまざまなサーバーレスの実装パターンを公開しています。実際に業務で使用するようなサーバーレス実装が多数ありサンプルコードが公開されているため、実際に動かしてみたりソースコードを見たりして学ぶことができ、とても参考になります。 サンプルコードはGitHubリポジトリに公開されています。 https://github.com/serverless/examples オーソドックスなサーバーレス実装パターン Exampleのサーバーレスのサンプルパターンの中からオーソドックスな実装パターンを一覧にしてみました API Gateway、Lambda、DynamoDBを使用したシンプルなREST API Cognito、Auth0を使用したカスタムオーソライザー Kinesis Data Streamと
「リアクティブコントローラ」導入がもたらすかもしれないウェブフロントエンド設計の変化 | フューチャー技術ブログ
フロントエンド連載2日目のエントリーです。 あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。 Introducing “Lit” for Web Components 本当はこのLitの紹介をこの連載でしようとしたのですが、上記のウェブサイトがすごく詳しいので、単に紹介するだけの記事だとあまり価値がないので、この中のコントローラ機能のみをとりあげようと思いますが、まずはWeb Componentsとは、というところを説明します。 n回目のWeb Components元年以前次のような記事を書きました。最初のPolymerというフレームワークが推進していたころよりも、ブラウザ対応も進
はじめに この記事はAuth.jsがどのようなものか，どのように実装すればいいかなどをドキュメントを要約しながら紹介するものです． 2024/02/19 追記 Auth.jsはv5で破壊的変更がありました．新たにAuth.jsを学ぶ場合には，特に理由がない限りv5を使うことをお勧めします． Auth.jsはドキュメント整備中です．現在のドキュメントとは内容が異なる場合があります．この記事では旧ドキュメントの内容も交えて解説しています． 今回はNext.js App Router実装編です．前回の記事はこちら 環境構築 JWTを用いたOAuth認証を行うためのNext.js環境を構築します．面倒であれば以下にテンプレートを用意しましたのでご自由にお使いください． まず，Next.jsを作成します．以下のコマンドを実行し，質問に答えながら構築します． √ What is your projec
こんにちは！2022年4月にペパボに新卒入社しました、新卒12期エンジニアズ（通称12th-dev)です。 今年は5月末から8月上旬にかけて新卒エンジニア研修が実施されています。 その中のフロントエンド研修では、ブラウザの仕組みやモダンな環境構築の方法などを学んだ上で、２チームに分かれて実際にWebサービスを作成しました。 この記事では、作ったサービスの概要や使用した技術スタックについてお伝えします。 オフィス内カフェのメニューサイト 新卒12期エンジニアのseiji, keigo, yukyan です。私たちのチームは社内カフェを便利にするサービスを作りました。 GMOインターネットグループには「シナジーカフェ GMO Yours」と呼ばれるカフェが福利厚生として用意されています。しかし、メニュー表がパソコンのみでしか見られず、列に並んでいる間などにメニューをみることができないという問題
id:mizdra は eslint-interactive というツールをメンテナンスしています。このツールを使うと、多数の ESLint エラーを効率的に修正できます (詳しくは以前書いた記事を見てください)。 www.mizdra.net eslint-interactive では「中規模〜大規模なコードベースであってもキビキビ動く」を大事にしてます。その一環として、eslint-interactive には CI (GitHub Actions) でベンチマークを取り、以前から大きく劣化していたら CI を fail させる仕組みがあります。 https://github.com/mizdra/eslint-interactive/actions/workflows/benchmark.yml?query=is%3Afailure しかし CI で実行するためにノイズが大きく、よく
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
tsconfig/bases の紹介！
{ "extends": "@tsconfig/strictest/tsconfig.json", } 以上です！ tsconfig.json ってどんなふうに書いていますか？？ tsconfig.json をこんな感じで書いている人はいないでしょうか { "compilerOptions": { "strict": true, "allowUnusedLabels": false, "allowUnreachableCode": false, "exactOptionalPropertyTypes": true, "noFallthroughCasesInSwitch": true, "noImplicitOverride": true, "noImplicitReturns": true, "noPropertyAccessFromIndexSignature": true, "noU
Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 で発表させていただいたスライドです フラットコンフィグへの移行は最近新卒の方に一部やっていただきました 新卒エンジニアがESLintのFlat Config移行と格闘した話 - ドワンゴ教育サービス開発者ブログ ドワンゴ教育事業採用サイト
TypeScript による Isomorphic な API Client 開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの @koba04 です。 本記事では、kintone の REST API を使うためのクライアントである @kintone/rest-api-client (以下 rest-api-client) の構成や工夫した点について紹介します。 本記事は rest-api-client の 1.6.0 のバージョンに基づいています。 @kintone/rest-api-client とは rest-api-client とは、kintone が提供する REST API を利用するためのクライアントライブラリです。 GitHub 上は kintone/js-sdk の Monorepo の 1 パッケージとして開発されています。 kintone/js-sdk での Monorepo 開発については下記の記事を参照してください。 https://blo
とても簡単にドラッグアンドドロップが実現できる Vue-draggable を使ってみた ｜ Developers.IO
西田@大阪です 以前 v-kansai Vue.js/Nuxt.js meetup #13 に参加させていただいた時に気になっていた Vue.js でドラックドロップでリストを入れ替えることができる Vue-draggable を使ってみました SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js プロジェクトの作成 Vue.jsのプロジェクトを作成します。今回は今流行りの TypeScript を選びました $ vue create vue-draggable-sample ? Please pick a preset: Manually select features ? Check the features needed for your project: TS ? Use class-s
Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
オープンソースをメンテするときに自分が考えていること
@azu さんのブログ記事 Maintainer Month: オープンソースをメンテナンスするコツ を読んで GitHub が Maintainer Month というイベントを主催していることを知りました。 自分は Maintainer Month の Sponsoring の対象でありませんが、自分がオープンソースのプロジェクトをメンテするときに考えていることを書き残しておこうと思います。 オープンソースガイド などにはすごいためになることが書かれていますが、積極的な内容で自分にとっては読むだけで疲れてしまうような内容でもあります。なのでこの記事ではあえて自分が普段考えていることの中でも消極的なことについて書いてみます。 オープンソースのメンテナンスに疲弊している人や、オープンソースに貢献している人、もしくは貢献しようと思っている人に「こんなゆるい気持ちでやってる人もいるんだ」と思っ
はじめに ESLint v8.21.0のリリースでこれまでとは異なるconfigシステム（flat config）が持ち込まれた。 以下の通り、新しいconfigシステムへの一歩というように言及があり、ESLintを利用する上で無視できない影響を受ける変更となりそうなので、どのようなものか確認しておきたい。 We took a big step toward ESLint’s new config system! The new FlatESLint class is now merged. Its API is not yet stable, and not all features are implemented yet, but it is accessible via the Node.js API for early testing. See RFC9 for the origi
TypeScript + Node.jsプロジェクトにESLint + Prettierを導入する手順2020 - Qiita
TL;DR 完成形のソースコードはこちら↑ この記事の趣旨 TypeScript + Node.js プロジェクトのはじめかた2020 で作成したTypeScript + Node.jsのプロジェクトに ESLint / Pretiter / husky & lint-staged を導入する手順を紹介します。 今回導入するツールとバージョンは以下になります。 項目 バージョン
LernaとYarn WorkspacesでMonorepo管理 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 本記事では、Lerna と Yarn Workspaces を使った Monorepo 管理について解説します。 Monorepoとは 本記事では、単一のリポジトリで複数のモジュールやパッケージ（今回の場合は npm パッケージ）を管理する手法を Monorepo と呼んでいます。 有名なところだと、Babel や Jest、Create React App などが後述する Lerna を使い複数パッケージを単一のリポジトリで管理しています。 他にも React も Lerna は使っていませんが単一リポジトリで複数パッケージを管理しています。 また、上記のようなライブラリ以外にも企業で利用している npm パッケージを Monorepo として管理している例もあります。下記は Shopify の例です。 pack
Neovimでのフロントエンド開発環境 2021
最近はフロントエンドエンジニア(主にReact)をしているYano (@yuki_ycino) といいます。 この記事では自分が開発に使っているNeovim周りの環境と、その大まかな構成について書いていきます。 追記 後日、自分がNeovimでフロントエンド開発を行っている理由とVSCode という記事を書きました。 合わせて読んでいただけると幸いです。 はじめに 自分は現在フロントエンド開発のほぼ全てをNeovimで行っています。 個人的にはVSCodeと遜色なく(むしろ効率よく)開発できていると思うのですが、VSCodeではシンプルな設定で開発を始められるのに対し、Vimはどうしても設定のハードルが高いです。 具体的には現在5000行弱のVimの設定ファイルと100個前後のプラグインを導入して開発しています。 ただ、それを他の方に勧めるのは無茶なので、この記事ではほぼ最小構成に近いTy
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】「困難は分割せよ」―― 複雑な画面は小さな機能に分けて実装しよう。 - Qiita
Next.js+TypeScript+AWS Amplify+RecoilでToDoリストを作る - Qiita
【Rome】RomeはJavaScriptをやめてRustにするってよ - Qiita
Svelte + TypeScriptで
chrome拡張を作る
React+Reduxアプリケーション テスト戦略 | Recruit Tech Blog
2021年転職と学業と育児の振り返り - えんぴつぶろぐ
ESLint を使い倒す（おすすめルール紹介）
幅広い環境でSSL対応するために知っておくべきこと
JavaScriptとイベントループ | NHN Cloud Meetup
TypeScript Clearly & Quickly
CLIツールを作るためにoclifを試してみたら簡単すぎて吃驚した | Trial and Spiral
JavaScript／TypeScript向け静的解析ツール「Oxlint」が正式に公開、Rustの採用で大幅に高速化
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita
新卒研修で最高のWebサービスを作りました - Pepabo Tech Portal
CPU シミュレータを用いて継続的ベンチマークを安定化させる - mizdra's blog
「実装例から見る React のテストの書き方」をアップデートする
ESLintのローカルルールで独自のコーディング規約を実装する
ESLintのconfigがどのように変わり得るか（flat configとは何か）