チーム個々人のテックブログをRSSで集約するサイトを作った（Next.js）
先日、こんな記事を見かけました。 テックブログは続かない - note.com 採用目的でテックブログを始めたものの、時間の経過とともに古い記事ばかりになる or すでに退職している社員の記事ばかりになる…というのはよく見かける光景です。 目の前のタスクが積み上がっている状況で、業務時間内にブログを書く時間を取るのはなかなか難しいと思います。 そうは言っても業務時間外に無償で会社のブログに書くのもなかなか気乗りしません。「数年以内に転職するかもしれない」という気持ちがあればなおさらです。記事が転職しても自分のものとして残るのであれば、書くモチベーションは上がるのかもしれません。 その後、こんなツイートを見かけました。 企業のテックブログと言えば「会社がひとつブログを作って、みんなでそこに投稿する」という形が当たり前になっていますが、たしかに個々人の投稿を集約する場所を用意するだけでも良いの
フロントエンド開発環境の継続的なリファクタリング | MEDLEY Developer Portal
2020-10-20フロントエンド開発環境の継続的なリファクタリングこんにちは、第二開発グループエンジニアの西村です。主にCLINICSの開発を担当しています。 はじめにCLINICS は電子カルテ、オンライン診療、予約システム、患者アプリなどを含む統合アプリです。CLINICS がローンチしてから現在に至るまで常に新機能開発と定常改善が行われており、開発環境のメンテナンスは後手になりがちでした。今回はそういった状況を改善すべく、開発環境のメンテナンス、リファクタリングを行った過程から得られたプラクティスについて紹介していこうと思います。 モチベーションプロダクトの新規開発時に行われる技術選定は非常に難しく、業務要件やチーム状況など総合的に考慮してその時点でのベストな選択をする必要があります。 しかし、選択した技術で長期運用をしていくうちに、メンテナンスが行き届かなくなったコードやライブラ
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
jestのテストが遅い場合に確認すべきこと - ishikawa_pro's memorandum
こんにちは。 急に寒くなりましたね。 僕は最近iPad Air4 を予約しました。 今日は、javascriptのテストフレームワークのjestについてです。 業務では去年くらいから新規サーバーアプリケーションはjavascriptではなくTypeScriptを使っています。 それに合わせてテストフレームワークもmochaからjestへ移行しました。 jestjs.io jestの特徴の１つは、一意なグローバル状態を持つことを保証しつつ、複数のテストを別プロセスで並列に実行してくれるため、安全に高速なテストをすることが可能なことです。 しかし、僕が前にいたチームでjestのテストにかかる時間がやたら長いことが話題になってました。 今日は、この高速なはずのjestがやたら遅い問題が社内で話題になっていたので調査してまとめてみたので、もしjestが遅くて困っている方は参考にしてみてください。
blitz-js prisma rails 倒し方
この記事の内容 blitz-js が生まれた背景 prisma の紹介 blitz で簡単なブログを作ってみる blitz を vercel にデプロイしてみる tldr blitz-js は next.js + prisma で rails を再現しようとしているフレームワーク Prisma ORM それ自体が良い。blitz の理解のためにも、まず Prisma を学べ blitz-js 自体はまだ α 品質だけど、今から注目しておく価値はある。デファクトになるかは不明。思想は継承されそう。 はじめに next.js はとても良いフレームワークだが、永続層を持たない。なのでフロントエンドとフロントサーバーに閉じている。 永続層、つまり DB を持たないので、初学者や流行りのプログラミングスクールの教材に選ばれない。また、JavaScript の学習資料が散らばっている。 要は Rail
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました JavaScriptのプラグインシステムについて書いた小さな電子書籍であるJavaScript Plugin Architecture 2.0をリリースしました。 1.0(初版)公開時の記事は次のページから参照できます。 JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた | Web Scratch 2.0の詳しい変更点についてはリリースノートを参照してください。 Release v2.0.0 · azu/JavaScript-Plugin-Architecture 2.0リリース時にGitBookからHonKitに移行しました。 そのため、公開するURLが次の場所に変更されています。 https://a
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita
「な、なんじゃこりゃあああぁあっtっt！！！！」 ・・・ ・・・ ・・・ 非同期処理を"ちゃんと"理解して使いたい 『非同期処理なんとなくの理解で書いている...』 『動いてるし、ヨシ！』 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついついなんとなくで書いてしまいそうになります。 （*1: 令和になってからプログラミングを知った人。初心者のこと。） ちなみに冒頭のコードは、「並列でいける処理をつい直列でやってしまっている」 例です。 実際に手を動かしながら非同期処理の理解を深める 本記事は以下の構成で、順を追って非同期処理を学習し、明日から自信を持って非同期処理が書けるようになるためのハンズオンです。 JSの非同期処理について知る Promise について知る Async / Await を使えるようにする 冒頭のコードがリファクタリングできるようになる 実際
![【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4bf449aecedd4337da846b0aadc121a2a1f5652e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTM4MCZ0eHQ2ND00NENRU21GMllWTmpjbWx3ZE9PQWtlYWNyT2FYcGVhY3F1YVlqdU9BZ1ZzZ1lYTjVibU1nTFNCaGQyRnBkQ0JkNDRHVjQ0S1Q0NEdNNXEyNzVMMlQ0NEduNTVtNjZLYUw0NEdWNDRLTUxpNHUmdHh0LWNvbG9yPSUyMzMzMyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NCZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249Y2VudGVyJTJDbWlkZGxlJnM9MDQxOGFmOThjYjQ3NmY0NTJjNzNkMWUyZThmNmQxOWU%26mark-align%3Dcenter%252Cmiddle%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTUwMCZ0eHQ2ND1RR2x0Y0d4ZmN3JnR4dC1jb2xvcj0lMjMzMzMmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NDUmdHh0LWFsaWduPXJpZ2h0JTJDYm90dG9tJnM9NTYzMWFlYzJkN2M0MWMwYTI1MDRiZWZhOTk2OTliNGU%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Db39e38892a91f7de69ef1909da2cf5f1)
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
2020/08/25 の #v_tokyo11 で話した登壇スライドです。
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
Best of JS
Coming soon! { "projects": [ { "name": "React", "slug": "react", "added_at": "2015-04-25", "description": "The library for web and native user interfaces.", "stars": 231271, "full_name": "facebook/react", "owner_id": 69631, "status": "featured", "tags": [ { "code": "framework", "counter": 52, "description": "Libraries and frameworks to build UI running in the browser", "name": "UI Framework" }, {
作って理解する Babel プラグイン - Techtouch Developers Blog
エンジニアの伊藤です。 ようやく梅雨が開けたと思ったらすでに立秋。残暑は残るどころか日に日に増している感じさえあります… 🥵 。 この記事では、普段の開発で非常にお世話になっているツール Babel のプラグインを作成する方法と、Babel プラグインの例としての処理時間を計測するプロファイラを紹介します。Babel プラグインに踏み込んでいきたいのですが、理解を助けるためにまず Babel が何をするツールなのかから説明します。 Babelとは Babel の処理の流れ AST (Abstract Syntax Tree) Babel プラグイン Babel プラグイン プロジェクト最小構成 Hello World 「プロファイラ」で何をするのか まとめ Babel プラグイン開発に参考になったサイト おまけ Babelとは フロントエンドの開発を行っている方にはお馴染みな Babel
究極のReact向けルーターライブラリ「Rocon」を作った - uhyo/blog
こんにちは。先月くらいからReact向けのルーターライブラリ「Rocon」を作っていて、この度alphaリリースという形で公開まで漕ぎ着けたので宣伝します。 現在のところ、以下のURLでチュートリアルを読むことができます。 このチュートリアルサイトはRoconを用いて作られています。 Roconチュートリアル: https://rocon.uhyohyo.net/Roconの特徴は非常に型安全であることです。 何よりも型安全性・型周りの快適性を優先してAPIが設計されています。 当然、TypeScriptと一緒に使うことが前提です。 また、Roconはreact-router-domの代替となることを意図しています。 そのため、Roconを使うべきとき・使うべきでないときをまとめると以下のようになります。 Roconを使うべきとき: 今react-router-dom等を使ってSPAを作っ
JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？
この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること
fetch,async/awaitでAjax通信 - Qiita
前提 fetch Fetch 概説 - Web API インターフェイス | MDN XMLHttpRequestの代替。 PromiseベースのAjax仕様のAPI。 polyfillを忘れがちなので注意。 https://github.com/github/fetch async function async function - JavaScript | MDN - Mozilla 関数定義の前にasyncをつけることで、その関数をAsyncFunctionにする。 暗黙的にPromiseを返す関数。 await await - JavaScript - MDN - Mozilla async functionの実行を一時停止し、関数のPromiseの結果を待つ。 fetchはPromiseを返すので相性が良い。 サンプル お天気のAPI（OpenWeatherMap）を叩くサンプル
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try
はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer 迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ
JavaScriptライブラリを読むときのコツ
少し前からライブラリを読むトレーニングを始めたのですが、最近ようやく読み方がわかってきたので、やり始めた頃に知っておきたかったことをまとめます。 これから JavaScript/TypeScript で書かれたライブラリを読んでみようと思っている方の助けになれば嬉しいです。 「私はこういう道具を使ったり、こういう工夫をしています」みたいな感じの内容ですので、もし「もっといい読み方があるよ」みたいなのがありましたらIssueなどで教えていただきたいです。 （※ライブラリを読むにあたって、ブラウザの話と NodeJS の話があるのですが、似てる点がほとんどなのでごった煮します。） エントリポイントを探す ライブラリを読むにあたって そのライブラリが持つ module がどう協調して全体が作られるのか その関数は正確にはどういう挙動をするのか などを考えると、ユーザーから渡された入力や呼び出しが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://inertiajs.com/
JSからTSへの移行ツール、ts-migrateを試してみた - Qiita
