マークダウン形式のスライド作成ツール Slidev を試したら、とても良かったので紹介です。 Slidevとは？ Slidev はVue UseやType Challengesの作者であり、Vue.js のコアチームメンバーでもあるAnthony Fuが開発しているマークダウン形式でのスライド作成ツールです。 Vite、Vue3、WindiCSSを用いて開発されています。 まだ Public Beta ですが、リリースからわずか数日で 7,000 を超える GitHub スターを集めています。 実際にどのようなスライドが作成可能なのかは、Slidev のデモや、作者の Anthony が Slidev を用いてプレゼンした VueDay2021 の資料が分かりやすいです。 デモ動画 VueDay2021 でのプレゼン 使い方 任意のディレクトリで以下コマンドを実行するだけで環境は整います。
IE11 サポート終了の歴史 | blog.jxck.io
Intro IE11 が役目を終えていく流れを記録として残す。特に MS からのアナウンスや、それに準じた各サービスの反応、特に IE サポート終了アナウンスをまとめることで、 IE11 というブラウザがどのように終了していったのかのを記録することを目的とする。 もともとは Google Docs にまとめていたものである。 日付はアナウンスの公開日 サポート終了日ではない サポート終了日も書いておけばよかったけど今からやり直す気力はない、、 赤字 は MS 関連もしくはサポート終了の影響が大きそうなアナウンス Windows における IE11 自体のサポート終了については以下を参照 https://www.atmarkit.co.jp/ait/articles/1503/11/news134.html できればある程度の結論が出るまでこのエントリを更新していきたい 追加リクエスト 本エ
@testing-library/cypressの存在を知らずに、それっぽいものを作ろうとしたときにいろいろ調査した記録です。Cypressにはテストコードが縦と横に短くなる工夫がされており、そのメカニズムにしたがった独自コマンドを実装するにはコツが必要です。 実装は次のところにありますが、@testing-library/cypressの方がメンテされているので、こちらは実際には使わないのをお勧めします。 https://gitlab.com/osaki-lab/cypress-aria Cypressのテストが縦横に短く書けるわけCypressはWebDriver系(Selenium)やChrome DevTool Protocol系（Puppeteer)のツールとAPIの粒度が異なります。Seleniumはそもそもウェブサイトのタイトルに「Browser Automation Too
Astro
One frontend architecture with endless possibilities Step into the future with Islands — Astro's next-gen frontend architecture. Supercharge your development with automatic JS-to-HTML streaming and a beloved developer experience. Content-first websites Fetch data from your CMS or work locally with type-safe Markdown and MDX APIs. Astro automatically removes unused JavaScript and renders to HTML fo
待機状態のUIについて整理してみる(デザイン編)
正しいIT用語の読み方
最近の若者は物を知らない。 IT企業に就職したのに、IT用語の読み方を間違える恥ずかしいやつが多くて困る。 新入社員でもこれぐらいは抑えておいてほしい。 nginx: んぎぃぃっんくすhtml: はとむるAlt: あるとhidden: ひでんheight: へいとnull: ぬるUbuntu: うぶんつPHP: ぺちぷUPnP: うぴんぴPPPoE: ぽぽぽえーIEEE: いえぇぇーHDMI: はどみUSB: うさびーWi-Fi: うぃっふぃーLaTeX: らてっくすPython: ぴちぉんDjango: どじゃんごNode: のでVue: ぶえーAngular: あんぐらGitHub: ぎふはぶSourceForge: そーすふぉげQiita: ちーたーPRML: ぷれもるGAN: ぎゃんDQN: どきゅんMCMC: もこもこASUS: あざっすAirBnB: えあぶんぶApp: あぷぷ
この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれる。どういう時に関数内の()が省略できるか等を覚えなくて良い useEffectの最適な第二引数を自動で補完してくれる コンポーネントのimport文を自動で挿入してくれる なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、React開発においてはもはやデファクトスタンダードです(長年愛用しているエディタがある方も、是非一度VSCodeを試してみてください)。 さて、VSCodeはそのままでも素晴らしいエディタです。しかし、使用するフレームワークや用途に応じて拡張機能を入れるとさらにその卓越した機能性を発揮します。VSCodeがなぜ世界中の
はじめに これはQiitaで開催されている「新人プログラマ応援 - みんなで新人を育てよう！」イベントの投稿記事です。 前回は「学習用のプログラムと仕事で書くプログラムは何が違うか」というタイトルで、お勉強用に作るプログラムと仕事で書くプログラムはこんなところが違うんだよ〜、というお話を書いてみました。 今回の記事ではみなさんが無事にプログラマとして就職できたと仮定して、「○○さん、このタスクお願いね」と開発タスクをアサインされたときの対応手順を説明してみます。 この記事を書いている人 仕事で20年近くプログラムを書いているプログラマ 現在は株式会社ソニックガーデンでRubyプログラマをやっている Rubyの入門書「プロを目指す人のためのRuby入門」を出版している プログラミングスクール「フィヨルドブートキャンプ」のメンターでもある 対象読者 新卒、または業界未経験の中途入社で最近プログ
WebComponents でログインコンポーネントをつくってサービス横断で使えるようにした話 - 一休.com Developers Blog
こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により会員基盤が分散してしまっていたので、ひとつにまとめる狙いもありました。 会員基盤 Before/After その一環として、一休のサービスで横断して使えるログインコンポーネントを WebComponents で実装しました。 このコンポーネントにログインや会員登録の処理を集約し、新会員基盤へのインターフェースとするようにしました。 また、電話番号認証や2段階認証設定のモーダルも実装しました。下記が実際の画面です。
Layer0というJamstackプラットフォームを試してみた記事です。 Jamstackプラットフォームが何かは表現しにくいですが、Netlify、Vercel、Cloudflare PagesみたいなSPAなアプリケーションとかをホスティングしてくれるサービスです。 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる Layer0はMoovweb XDNという名前のプロダクトでしたが、2021年4月にLayer0へリブランディングしています。 Moovweb is officially Layer0! 📝 XDN = Experience Delivery Network Layer0は、Netlify、Vercel、Cloudflare PagesのようにSPAアプリケーションをホスティングできるプラットフォームです。 他のプラットフォーム
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
はじめに はじめまして、ユーフォリア開発部エンジニアの山本未知彦です！ このたび、ユーフォリアではJRFU(日本ラグビーフットボール協会)協力のもと、ラグビー選手の育成・強化のためのフィジカルデータベースシステムSCOTのリリースを行いました。（詳しくはこちらのプレスリリースをご覧下さい） 本記事では、SCOTのWebアプリケーション部分のアーキテクチャ紹介について、その技術選定理由と実際に開発してみて感じた良い点・気になった点をご紹介したいと思います。 SCOTのアーキテクチャ選定 まず技術選定の話をするに際して前提となるユーフォリア開発部の体制を説明します。当時、開発部にはエンジニアが２名しか在籍しておらず、SCOT開発に際しては業務委託の方々に協力いただいての開発となりました。そのため、技術選定においてはコードのレビューのしやすさと、仮にプロジェクト途中で人員の入れ替えが発生した場合
会員数10万人のレガシーなコミュニティサイトを一から全部作り直した舞台裏 - エス・エム・エス エンジニア テックブログ
はじめに 規模の大小を問わず、レガシー化したサイトには色々な課題が存在します。課題の根本的な改善のためにソースコードをゼロから書き直してリニューアル（以後、このことをフルリニューアルと呼称します）するということは、とても魅力的な一方でリスクもあります。フルリニューアルすなわちアンチパターンとされていることも多いですね。ここでは「中規模程度のコミュニティサイトをフルリニューアル、すなわち一から全部作り直す」という選択をした背景や、その進め方について書いていきます。 なお、書きやすさのために筆者一人で思考・実行したように書いていますが、実際には事業部所属のもう一人のエンジニアもしくは二人の考えや行動をミックスしたものとなっています。 TL;DR PHP 5/Ethna & Smarty/オンプレ/オフショア開発7年ものを引き継ぎ/ツライ ↓ PHP 7/Laravel & Vue.js, El
JAMスタックを実現する国産サービス「Kuroco」正式リリース。GitHub Actionsでビルドし、Webホスティング、APIサーバなど提供。月額1100円分まで無料
最近のこと - ogijun's blog
Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. What’s new We’ve added four new components to the React library, and five new components for Vue. Dialog (modal)
こんにちは、 @mugi_uno です。 Misocaがサービスローンチされたのは 2011年です。実は2021年は10年目ということで何気に節目の年だったりします。 10年もあれば世の中的にもさまざまな技術変遷があり、Misocaもその波に乗っていけるよう、日々改善を繰り返してきました。 というわけで今回は、私自身がフロントエンド側の作業を多くやってきたこともあり「この10年間でMisocaのアーキテクチャがどのように変わってきたのか？」をフロントエンド側に焦点を絞って振り返ってみたいと思います。 ※ 意思決定に関する資料が無いものも存在するため、一部は情報に基づく推察になる点をご承知おきください。 年表 いきなりですが、ざっくり年表を書いてみました。 上部の黄色いラインは、フロントエンドに大きい影響を与えたMisocaの機能です。 これをもとに、サービスローンチから順を追って見てみます
「Cloudflare Pages」が正式版に。JAMスタックによる高速なWebサイトを構築、CDNに展開へ
Cloudflareは、JAMスタックを用いてWebサイトを構築する新サービス「Cloudflare Pages」が正式版として提供開始されたことを発表しました。 JAMスタックによるWebサイトの構築とは JAMスタックとは、JavaScript、API、Markup Language（HTML）を主な構成要素としてWebサイトを構築する手法を指します。 WordPressに代表される多くのCMSでは、ユーザーからのリクエストに反応して動的にHTMLが生成されることで、動的なWebサイトを実現しています。この場合、HTMLの生成に一定の時間がかかるため高速なWebサイトの構築が容易ではないこと、サーバへの負荷によりスケーラブルなWebサイトの構築も容易でないことなどが課題です。 JAMスタックでは、HTMLの生成はWebサイトの生成時に行うことで、基本的には静的なWebサイトと同様の高速
こんにちは。Finatextでエンジニアをしている塚本です。 証券プラットフォーム「BaaS」や、それを利用して開発されたアプリケーションのフロントエンドを担当しつつ、現在はバックエンドの実装も行っています。 Finatextに入る前は大手メーカーでSEを3年ほど、その後フリーランスを1年ほどしておりました。フリーランスになってからエンジニアを目指すことを決め、独学でコーディングの勉強を始めています。 ジュニアエンジニアとしてFinatextに入社した私が、約1年半でどの程度成長したのかを振り返りたいと思います。 まず入社当時と現在でどう変わったかがこちらです。 Finatext入社当時コーディングは１人でするのは到底無理。。デベロッパーツールどうやって開くの？rebaseって何？Laravelなら少しだけ知っているVue.js, Go（弊社使用言語）書いたことない ↓1年半経った現在ヘル
こんにちは！LayerXの mosa_siru (榎本) です。 LayerX インボイスでは、もともと github.com/go-swagger/go-swagger を利用してREST APIを開発していましたが、最近開発したワークフロー機能 のコンポーネントではGraphQLを取り入れました。 GraphQLには様々なメリットがあり、RESTとの比較記事は多くありますが、なぜ僕らは移行したのか、その結果どうなったのかを紹介していきます。 GraphQLのメリット GraphQLのメリットは、様々な箇所で語られています。例えばこの記事によれば、 強力に型付けされたスキーマであること アンダーフェッチとオーバーフェッチがないこと（後述） Apollo, Relayなどの、クライアントライブラリにより、フロントエンド開発が迅速になること 複数のGraphQL APIからの統合が可能 強力
BASE株式会社 ServiceDev Payment Group 所属の田仲です。 現在はエンジニアリングマネージャーを担当していますが、以前はサーバーサイドエンジニアとして開発をしていました。その頃の経験を紹介したいと思います。 BASEのエンジニアはPM・ディレクターから要件を聞き、設計を行います。 仕様や設計を元にサーバーサイドエンジニアはサーバーサイドの実装し、フロントエンドに関してはフロントエンドエンジニアが実装しています。 少し前のプロジェクトになるのですが、「送り状データダウンロードApp」の開発プロジェクトを担当した際にサーバーサイドだけではなくフロントエンドの開発にも携わることになりました。 普段、サーバーサイドエンジニアとして開発を行っているエンジニアがフロントエンドの開発も行うことで良い経験になったという話を紹介したいと思います。 送り状データダウンロードAppにつ
業務委託で STORES の開発をしている @inouetakuya です。 先日 STORES のフロントエンドチーム内でクライアントサイドのバリデーションについて見直す機会があり、特にバリデーションエラーのデータ型をどうするかについての議論が興味深かったので、共有させていただきます。 背景 議論の背景について簡単に触れておくと、STORES のクライアントサイドでは、バリデーションのライブラリとしてこれまで joi-browser を使ってきました。 しかしながら、本家の Node.js 版の joi がブラウザ対応したことにより joi-browser が deprecated になったことを受けて、今後も joi を使い続けるかを検討したところ、 joi-browser と joi の最新バージョンとの間で API の差異がいくつかあり、joi-browser から joi への乗
サーバーサイドからみたGraphQL Serverlss Meetup#19 2021/03/31 に行われた Serverlss Meetup#19 で上記のタイトルで登壇してきました。サーバーサイドの話をしようと思ったけどGraphQLの解決している話をしようと思ったらクライアントの事もかなりはいってしまったので記事のタイトルは変えました。 以下内容です。記事の最後に資料を書くにあたって参考になった資料のリンクを置いてます。 GraphQL and me この1年書いたQiita記事 GraphQLの特徴を分解する ~API インターフェース・Universal BFF・API Gateway~ GraphQLはサーバーサイド実装のベストプラクティスとなるか GraphQLの全体像とWebApp開発のこれから 今回話す事 そもそもGraphQLはなんで作られたのか、何を解決しようとして
Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a
こんにちは。歴１０年のアプリエンジニア（Best of AppStore🏅受賞歴あり）です。 neeboor🗯という位置情報を使った新しいSNSアプリを作りました。 toC向け＆コンテンツ系＆モバイルアプリというサービスの特性上、最初からある程度高い完成度のサービスを提供しないとユーザーの手に取ってもらえないなと思い、UI/UX中心にかなりこだわって開発した結果、開発に２年以上かかってしまいました。 今回はサービスの紹介をしつつ、開発で苦労した点や工数をかけた点について記事にしたいと思います。 サービスの紹介 neeboor🗯は、「あなたの生活圏をもっとおもしろくするSNS (Make your living area hackable)」というコンセプトの位置情報系SNSアプリです。従来のローカル系サービス（＝地域情報サイト、半径◯メートルでお店や友達探す系、出会い系、ナビ系、トラ
【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する | DevelopersIO
こんにちは。AWS事業本部のKyoです。 簡単に静的サイトを構築・管理したいといった場合、Amplifyが選択肢の１つに上がってきます。 Amplifyと聞くと「ReactとかVue.jsとか必要なんでしょ？」そんなイメージをお持ちの方も多いのではないでしょうか。 今回紹介するAmplify Consoleはそれらの知識はナシに、従来CloudFront + S3構成で対応していた静的サイトをより簡単に構築・管理することができます。 また、本ブログではホスティングに加えて、カスタムドメインの設定や開発環境の追加、Basic認証にも触れます。これらに関してはCloudFront + S3構成で実装するよりもはるかに簡単に設定することができます。 具体的なユースケースとしては、コーポレートサイトなどにハマるのではないかと思っています。 Amplify is 何？ まず、言葉を整理しましょう。
Denoのフロントエンド開発の動向【2021年春】
はじめに ここ最近、Denoのフロントエンド向けのエコシステムについて、色々試してみたり、調査などをしていました。 そこで、この記事では、2021年現在のDenoのフロントエンド開発の状況であったり、所感などについてまとめます。 フレームワークについて Node.jsにおけるフロントエンド開発では、以下のフレームワーク[1]が使われることが多いと思います。 React Vue.js Preact これらのフレームワークは、すでにDenoでも動作します。 またこれらをベースにしたフレームワークがいくつか開発されています。 Aleph.js Aleph.jsはNext.jsに影響を受けたReactベースのフレームワークです。 以下のような機能が提供されています: HMRをサポートするdevサーバを提供 ファイルシステムベースのルーティング SSR/SSGをサポート CSS Modules 開発
Vue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blog
前書き はじめまして、ANDPADでフロントエンド開発を担当している小泉です。入社から2年弱ですが、ここ1年の社員数の増えるペースが速すぎてすっかり古株になりつつあります。 自分は入社当初からVue.js・Nuxt.jsを使って開発を行っているのですが、2020年7月頃よりスタートしたプロジェクトで、Vueの新しい記法であるVue Composition APIを全面的に採用しています。 この記事では、Composition APIを実際に製品開発に導入するまでの流れから、9ヶ月ほど使っていく中で気づいたComposition APIのメリットとデメリットなどをまとめています。 昨年秋にVue 3.0が正式リリースされ、今年はNuxt 3.0も控えており、これからVue 3.0やComposition APIを本格導入するチームや会社も多いと思いますので、その際の参考になれば幸いです。 技
【感想】『Amazon Web Servicesを使ったサーバーレスアプリケーション開発ガイド』：Lambdaで本格サービス開発まで - Rのつく財団入り口
サーバーレスアプリケーション開発ガイド Lambda関数を用いたサーバーレス開発をもっと知っておこうと思って読んだ本の感想です。2018年4月刊行、サーバーレスの主要サービス解説にコードはPython、のみならずフロントはVue.jsを使った本格開発まで、実践的な内容が詰まった本です。 作者は現Amazon Web Services Japan所属のKeisuke69こと西谷圭介さん。Twitterでもよくお見掛けします。(@Keisuke69) サーバーレスアプリケーション開発ガイド Chapter1 サーバーレスアプリケーションの概要 1-1 サーバーレスアプリケーションとは 1-2 ユースケースとアーキテクチャパターン 1-3 サーバーレスアプリケーションのライフサイクル管理 Chapter2 Amazon Web Services（AWS）利用の準備 Chapter3 インフラを自
サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
オフェンシブセキュリティ部の山崎です。サーバサイドレンダリング（SSR）の導入によってSSRFが発生する問題を見つける機会があったため、本記事では実例を交えながら紹介したいと思います。 サーバサイドレンダリング（SSR）とは？ 本記事で扱うSSRとは「サーバ上でHTMLを出力すること」を指しています。ただしerbやjspのようなテンプレートからHTMLを出力するのとは異なり、一般的には以下のようにクライアントサイドレンダリング（CSR）の文脈で使われることが主です。 近年のVue.jsやReactを代表するようなWebフロントエンドフレームワークはブラウザ上で動的にDOMツリーを構築して画面を描画（CSR）するのが主流となっています。これによってページ遷移を挟まずユーザ体験のよいシングルページアプリケーション（SPA）が作ることができるというメリットがあります。 ただ、単純なSPAにはデメ
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
iCARE Dev Meetup #19 2021/03/17
JS 状態管理ライブラリ探索記 - Introduction
これから何回かに分けて、Redux に代表される JS の状態管理ライブラリをいくつか見ていきます。 早速本題に入りたいところですが、その前になぜいくつもライブラリを知っていた方がいいのか、当たり前のように思うことをあえて考えてみる必要があります。 なぜなら、状態管理ライブラリがたくさんあるために、次のような疑問が出てくるからです。 どれでも好きなものを使えば開発がうまくいくのか？ 今までうまくいっていたライブラリを使い続ければ今後もうまくいくのか？ 選ぶとしても、何を基準に選べば良いのか？ 今回は少し立ち止ってこういった疑問について考えてみます。 ではそもそも状態管理とは、一体何のために、何をすることなのでしょうか？ 状態管理が目指すもの – 読みやすさの基本定理 状態管理をする目的は様々ですが、最も大切なことはリーダブルコード（読まれて無い方は是非一読を！）の中で「読みやすさの基本定理
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
認証用トークン保存先の第4選択肢としての「Auth0」
【Flutter】個人開発でゲームレビューアプリをリリースした話
開発者のためのスライド作成ツール Slidev がすごい
Cypress - 書きやすいテストの秘密と独自コマンドの実装 | フューチャー技術ブログ
Slidev
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
【新人プログラマ応援】開発タスクをアサインされたらどういう手順で進めるべきか - Qiita
JamstackプラットフォームのLayer0へNext.jsのアプリをデプロイしながら試す
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
Next.js + NestJS で新サービスを作った話 | EUPHORIA DEV BLOG
クライアント側のJavaScriptを最小限にするHotwire
デザイナーからみた爆速開発 - LayerX エンジニアブログ
Headless UI v1.0 - Tailwind CSS
Misocaフロントエンドの歴史と未来 - 弥生開発者ブログ
ジュニアエンジニアとして入社してからの1年半を振り返る
GraphQLでバックエンドのコードをすっきりさせた話 - LayerX エンジニアブログ
「元ネタわかったときの嬉しさ」映画の歴史を1分でまとめたアニメーションに集まる映画愛の声
サーバーサイドエンジニアがフロントエンドの開発に参加してみた話 - BASEプロダクトチームブログ
クライアントサイドのバリデーションエラーのデータ型についての考察 - STORES Product Blog
GraphQLが解決する問題とその先のユースケース
ユーティリティーファーストとTailwind CSSのススメ - Qiita
２年かけて個人で全く新しいSNSアプリを作ったお話し - Qiita
Svelte + TypeScript のベストプラクティスを考える
Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ