STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge
はじめに Rustと言語処理系の勉強のため、簡易的なマークダウンパーサーをスクラッチで実装し、生成したWASMをNuxt3+Viteの環境で動かしてみました。 言語処理系の概要 マークダウンパーサを実装する前に、一般的な言語処理系について考えてみます。 コンパイラやインタプリタに代表される処理系の構成は以下のようになっています。 字句解析 テキストを字句の列(トークン)に分解すること 字句解析を行うプログラムを 字句解析器(lexerまたはtokenizer) と呼びます。 構文解析 トークン列を 抽象構文木(abstract syntax treeまたはAST) に変換する。抽象構文木とは、言語の構文を解釈し、データ構造を取り出した(抽象化した)木構造のこと たとえばDOMツリーは、HTMLの構文を解釈(構文解析)し、要素(タグ)を木構造で表現したものです。 How browsers w
面倒な仕事やサイト作成がたった2日でマスター可能！人気のPythonやWordPressでスキルアップできる「Udemy」初夏のビッグセール
「新たなスキルを身につけて年収UPを目指したい」「プログラミングで仕事を自動化して楽に稼ぎたい」と日々思っている人は少なくないはず。しかし、いざ学習を始めようとしても忙しい毎日の中から時間を確保するのは難しいものです。ちょうど講座をムービー形式で受講できる学習プラットフォームの「Udemy」が5月27日(木)まで初夏のビッグセールを行っており、丁寧で分かりやすい解説講座が1270円～受講可能とのことで、忙しい毎日を送っていても週末の2日間だけで学習を完了できそうな短期集中型の講座をピックアップしてみました。外出がおっくうになる梅雨の季節や、ステイホームをうまく活用するために、この機会に買いだめしておくのがオススメです。 オンラインコース -世界最大級のオンライン学習プラットフォーム- Udemy https://www.udemy.com/ ・目次 ◆1：WordPressの使い方を習得し
JavaScript / TypeScript全体研修を実施 ~歴史あるサービス保守からモダンフロント開発まで幅広く手掛ける為に~ | NIJIBOXのフロントエンドエンジニア
フロントエンドグループ JavaScript / TypeScript全体研修を実施ニジボックス フロントエンド開発室の高橋です。 3月4日、3月11日の2日間にかけて弊社、株式会社ニジボックスのフロントエンドグループ全体を対象にJavaScript, TypeScriptの全体リモート研修を実施しました。講師にはリクルートから３名のプロフェッショナルをお招きしました。参加者は総勢で50名近くになりました。 今回この研修の企画運営メンバーの一人として携わりましたので、研修当日の雰囲気や研修後の成果を含めてご紹介させていただきます。 ニジボックスフロントエンドグループの現状と課題ニジボックスフロントエンドグループはSUUMO, ゼクシィをはじめとしたリクルート内のWebサービスのフロントエンド業務に幅広く関わっています。 業界も様々ですが、使用している技術や開発フローもプロダクトによって大き
Nuxt.js(SPA)+FirebaseなWebサービスで強制的に更新する(リビジョンアップ対策) - Qiita
SPAはとてもすてきだけど、Hostingにアップロードしてもすぐに更新されない。。 たとえば、メンテナンス画面に変更しても、キャッシュが残っててメンテナンスモードにならないとか。。 この記事をみると、Reactで強制的にリビジョンアップする方法が載っていたので、 Nuxt.jsでもできないかやってみたときの備忘録。 追記 2018/10/17 @hecateballさんの記事によると、あまりよくない方法のよう。。 PWAでキャッシュ戦略を設定するか、Remote Configがよさそう(´ω｀) - Nuxt.js(SPA)とFirebaseで強制リビジョン（バージョン）アップするならPWAモジュールを使おう - Qiita ざっくりとした流れ 流れとしては、こんな感じ。 staticディレクトリにJSONファイルでバージョン番号を用意 環境変数にリビジョン番号を保持するように設定 JS
この記事は GraphQL Advent Calendar 2020 14 日目の記事です。 前回の記事は @joe-re さんの 「ライブラリの実装からCursor-based paginationにおけるcursorのフォーマットのベストプラクティスを探る」 でした。 前置き GraphQLは2010年代後半に出てきた技術の中でも個人的に特に強力なアプリケーション実装パターンの一つだと思っているのですが、シンプルな実装なのに利用用途が豊富にあることと利用する立場が違うと全く印象を抱く事から全体像を掴みづらく、本来持つべきポテンシャルに対してまだ認知が広がっておらず利用されていないように感じます。 今回はサーバーサイドからの視点を中心にGraphQLを構築する要素を分解して解説するのとともに、それを利用した際にWebアプリケーション開発やそれに関わるエンジニアに起きうる変化について書いて
なぜPWAなのか PWA(Progressive Web Apps)はひと言で説明するとWebがアプリのようになる技術です。 個人的にはとても魅力的な技術だと思うのですが、2015年に発表されてから今まであまり活用されていないような気がします。もちろんネイティブアプリには及ばないですが、情報がまとめてあるのが中心で少しの機能だけの場合はPWAで事足りるのではないかと思ったので作ってみました。 作ったサイトはこちら https://mdtakaoka.info まず結論から言うと、Webサイト的には成功したのではないかと僕は思います。下の画像GoogleAnalyticsの解析ですがPWAユーザ（ホーム画面に追加したユーザ）はページ/セッション、平均セッション時間、直帰率がすべてのユーザに比べて良くなりました。今回はWebサイト上にはホーム画面に追加できることを記載しなかったので、１割程度の
UnoCSS を知る、まずは経緯から
👋 はじめに ナイトウ(@engineer_naito)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います。 (なぜならばぼく自身が CSS フレームワークを使ったモダンフロントエンド開発の経験がないからです 🙋♂️) 🗾 UnoCSS と日本 UnoCSS は軽量かつ柔軟な Atomic CSS エンジンであり、現在最も注目を集めている CSS ツールの一つです。 人気調査サイトの結果によると、ここ 2, 3 年で確かに人気や知名度が上昇しています。 しかし、日本ではどうでしょうか？ Zenn で「UnoCSS」と検索してみま
Back to articlesWinterJS 1.0Announcing WinterJS 1.0, the fastest Javascript web server now also supporting Cloudflare applications and React Server Components WinterJS 1.0 is finally here. WinterJS is an incredibly fast WinterCG-compatible Javascript runtime written in Rust using the SpiderMonkey engine to execute JavaScript, and Tokio to handle the underlying HTTP requests and JS event loop. Wint
2022年9月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン AdobeのFigma買収とAdobe XDのこれから 9月の大きなニュースは、やはりAdobeによるFigma買収だと思います。このブログでも記事にしています。 関連: Adobe、Figmaを約2.9兆円で買収へ デザインコラボツール大手 フォトショップの作業が楽になる、覚えておきたい小技テクニック18選 とても有益ですが、レイヤーの複製はoption+ドラッグではなくcommand+Jの方が速いと思います。 ちょうどいいWebデザインギャラリー そのWebサイトのいいところが言語化されているギャラリーサイトです。 Screen Sizes iPhone・iPadなどのスクリーンサイズま
3年くらい前にWEB屋の自分が機械学習株価予想プログラムを開発した結果 | マサムネットって記事を書いたっきり、機械学習にも株にもあんまり手を付けていなかったのですが、この年末年始、思い切っていろいろ進めてみました。 それで、なかなかに良い感じの結果が得られたので、そのままサービスとして稼働するまでに至った技術的経緯を書いていきます。 サービスそのものへのリンクは、有料サービスですので宗教上の理由などでリンクしたら見られない人もいるかと思いますのでここには張りません。個人的な考えとしては、技術者が適切に稼げる仕組みを作っていくことは重要だと思いますが、つまりは有料だろうと成果物であるサービスへの案内くらい張ったらええやんと思うんですがここではそういうことを論じる場ではありませんのでとにかくサービスそのもののリンクは控えておこうと思います。とはいえ、実際のサービスを見ないと判断しようが無いと
Vuex ストアに TypeScript の型を付ける（2020年12月版） - STORES Product Blog
業務委託で STORES の開発をしている @inouetakuya です。 下記の記事（2020/09/14）にあるように、STORES では TypeScript の導入を進めています。 プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog 現状、新規に記述するコードについては TypeScript で書いていっているのですが、既存のコードではまだ JavaScript のままになっているものも残っています。 今回の記事ではそれらの既存のコードのうち、Vuex ストアに関するコードをどのように TypeScript で書き換えていったかをお伝えしたいと思います。 環境 対象とした環境は下記のとおりです。 TypeScript v3.9.7 NuxtJS v2.14.5 Vue.js v2.6.12 Vuex v3.5.1 Vuex Type H
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
心配性の僕がユビーに入社するまで｜issei
3月からソフトウェアエンジニアとしてUbie（ユビー）株式会社にジョインしたissei(@igreenwood)です。現在はAI受診相談ユビーの開発を担当しています。入社してそろそろ1ヶ月が経とうとしているので、入社エントリ的なものを書いてみます。 こんな人に読んで欲しい・ユビーに興味があるけど、持っているスキルがマッチしてないので今一歩踏み出せない人 ・ユビーに興味があるけど、強い人たちの中に飛び込むことに不安を感じている人 自己紹介ソフトウェアエンジニアになって2021年で約9年になります。スタートアップを中心に、いくつかの会社でtoC向けのAndroid/iOSアプリケーションを開発してきました。ユビーではAI受診相談ユビーの開発を担当しています。 心配性でアガリ症の33才です。 10年目にして未経験の分野に移るのは不安がいっぱい10年近い間Androidメインのエンジニアとしてやっ
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
実際にコードを用いてスタック領域とヒープ領域の概念を説明します。 person オブジェクトを宣言した時、JavaScript エンジンはオブジェクトの実体をヒープ領域にメモリ割り当てを行い、ヒープ領域にある実体への参照をスタック領域にメモリ割り当てを行います。 const person = { name: 'Taro', age: 24 }; 次のように新しい変数(newPerson)に再代入をすると参照がコピーされ、newPerson も person もヒープ領域に割り当てられた同じ実体に対する参照を持ちます。 const newPerson = person; Object.assign を使って新しいオブジェクトを生成するのは、参照コピーをしないための方法の一つで、よく使われる手法の1つです。 function getName(person) { return person.na
気づいたら個人開発5周年なので振り返ってみた - Crieit
どうもきらぷかです。 この記事は、Crieitのアドベントカレンダー、なんでもの13日目の記事です。 「なんでも」と言われると何を書けばいいかわからなくなってしまう 典型的日本人なので、徒然に振り返ってみようかと。 ふと思うと、最初の個人開発から5年も経っていたらしい。。 (徒然に書いたら、オチもなく、長くなってしまいました...ごめんなさい...) はじまりは5年前 昔のコミットを見てみたら、初アプリの初コミットは2014年9月17日だった。 はてなブログの最初の記事は2014年2月8日。 ちょうど、入社3年目のおわり。 社会人がどんなものか、会社がどんなところかなんとなくわかってきたころ。 IT企業ではあったけど、技術の話題で盛り上がることなく、 最新の技術動向はRSSで受け取るだけだったあの頃。 3年目あるあるな漠然とした不安と焦りだけあった。 「最近コード書いてないな...なまって
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
自己紹介 はじめまして。DELISH KITCHENバックエンドチームのマネージャーをやっている内原です。 本日はDELISH KITCHENにおける、バックエンド観点でのシステム紹介を行います。この紹介によりDELISH KITCHENの開発に興味を持ってもらえると嬉しいです。 はじめに DELISH KITCHENのサービス全体像とバックエンドシステムの構成や仕様などを紹介します。 ご覧の通り、複数のマイクロサービスが様々なミドルウェアを利用しつつ、DELISH KITCHENサービスの提供を実現しています。 DELISH KITCHENのサービス全体像 DELISH KITCHENの一番主要な機能は、レシピ動画を提供することでお客様の料理体験をよりよいものにすることです。 これだけ聞くと、単に動画を配信しているだけのサービスのように思われるかもしれませんが、実際には料理にまつわる様々
はじめに インターンしている小林です．この記事では，DRF（Djangoのいい感じのフレームワーク）を使って，APIを作るまで行います．記事は二編構成とし，一編はDRFによるAPI作成，二編はNuxtを用いてユーザが実際に入力することを想定してフロント作成します．具体的には，PyTorchのresnetを用いて，入力フォームから受け付けられた画像を推論して上位10位までの結果を表示させます．一編では，詳細な機械学習のアルゴリズムは説明せずに，APIを作る工程に重きを向けます．読者の対象はDRFを初めたての人が対象であり，機械学習の画像処理をある程度把握している人が対象となります． 構築したAPIは以下のような感じになります． 今回作るAPI画面 結果で返しているのはresnet-18に入力した画像を推論させ，確率値が高い上位10個を表示させています．用いてるモデルはImageNetの学習済
AstroとmicroCMSでつくるブログサイト
=== 更新履歴 2024/1/10: MicroCMSQueriesをインポートするときにType-Only Imports and Exportを使用するように変更しました。 === こんにちは、microCMSの松田です。 今回は2022年8月に1.0バージョンを公開したAstroを使ったチュートリアルをお届けいたします。 Astroとは？Astroは静的サイトジェネレーターの一つです。 そのGitHubリポジトリには2022年9月時点で2万弱のスターが付けられています。 https://astro.build/ 数ある静的サイトジェネレーターの中でなぜAstroを選ぶのか公式のドキュメントで解説されています。 https://docs.astro.build/en/concepts/why-astro/ ここで書かれていることを簡潔にまとめると以下のような内容です。 Astroはウ
この記事は ANDPAD Advent Calendar 2022 の 4日目の記事です。 ごあいさつ はじめましてアンドパッドでQuality Controlをやっている冨士川です。 1974年生まれのアンドパッド内でもかなり年齢高めのメンバーとして頑張っております。 先日、ジブリパークに行きとても楽しかったので写真を貼ってみました。 シータを助けたり、カプローニと夢を語り合ったり大満足でした！ アンドパッドラップを始めたわけ さて、私は2021年7月にアンドパッドにJoinしました。 新しい会社に入ったばかりの私は、何か新しいことに挑戦したいなと考えていました。 「アンドパッドには製品がたくさんあり、それぞれの製品について知りたい」 「前からラップをやってみたかったな」 この2つの思いを融合させ、アンドパッドの各製品でラップをすると良さそう！という結論にたどり着き、 毎朝アンドパッドに
ヘッドレスCMSの全体観を掴む | ヘッドレスCMSの本質
コンテンツ管理システムの歴史 なぜ、このような新しい性質を持つコンテンツ管理システム（CMS）が求められるようになったのでしょうか。その理由を知るためには、CMSの歴史と時代背景について知ることが一番の近道になります。 1990年代中頃: CMSの誕生 1990年にWorld Wide Webが登場してから、しばらくの間、WebサイトはHTMLの手動編集によってのみ管理されていました。しかし、次第にWebサイトの規模や複雑性が増していき、手作業でのコンテンツ管理が困難になります。 そして、1990年代中頃、HTMLの手動編集によるWebサイト運営の非効率を解消するためのソリューションとして、最初のCMSが登場します。この時、多くの企業が自作のカスタムCMSを作り、いくつかのエンタープライズ向けCMSも登場しました。 2000年代初頭: オープソース化による急速な普及 2000年代前半になる
「Offersエージェント」では、業界で活躍するプロフェッショナルがあなたの転職を徹底サポート。CxO経験者を含む現役エンジニア・デザイナー・プロダクトマネージャーが在籍し、職種に特化した専門的なアドバイスをご提供・非公開求人の紹介も可能です。 →【かんたん30秒】無料登録で転職相談する ▲イベント登壇時の写真 これまで本業の傍ら、フロントエンドの副業を複数受けてきました。今回はその経験から得られたものや、これから副業を検討される方に向けての注意点を紹介します。 まず私が副業を始めた理由は2つ。家賃を副業の収入でまかなえるようにすることと、本業では経験できないことに挑戦してスキルアップを図りたいと思ってのことでした。 副業を始めようと思った当時、私はクライアントワークをメインとしているWeb制作会社に所属していました。クライアントワーク自体は楽しかったのですが、納品して終わりという業務を
【2023年総まとめ】特に秀逸だったWebサイト｜9組のキュレーターでお届けする特別版｜田渕 将吾 (Shogo Tabuchi)
2023年もあと数日ですね⛄️🎍 毎年この時期になると、その年に印象的だったサイトをご紹介する記事を書かせていただいていましたが、なんと今年は、僕だけではなく、日頃からWebデザインへのアンテナの感度の高い『8組のゲスト』をお招きした特別企画をお届けします。 毎年楽しみにしていた方も、初めて見てくださる方も、 S5-Style Presents 「2023年総まとめ 特別版」をお楽しみください！😃 それでは、まずこちらの方からからです！ -- 01 平尾 誠 (ARUTEGA Inc)👤💬 素晴らしいサイトの中から、題材が難しいサイトや、情報設計が秀逸なサイトを気づいたら選んでいました。今回の企画に参加するにあたり、普段からいろんなサイトに追いつきたくて、モチベーションをいただけている事に気づけました。 株式会社HA-RUhttps://ha-ru2017.co.jp/島根のダクト
こんにちは、エムスリーエンジニアリンググループ Unit5 (Consumer) チームの園田です。 今回は大きな実装ではなく、TypeScript のちょっとしたテクニックを Next の API ルートを題材に書いてみます。 想定読者は TypeScript 初心者の方です。TypeScript 強者の方はどうぞ温かい目で見てください。 はじめに モチベーション 実装のポイント 試行錯誤 関数で何度も囲む形式 引数指定 + オーバーロード 実際に辿った実装手順 最終的なコード Class 構文での実装 まとめ We are hiring はじめに まずは何を作ったのかご覧ください。 NextApiHandler の Factory できた メソッドチェーンで引数が増えてくやつ hono の zValidator を意識したけど、ハンドラの引数として Zod を渡すのではなくメソッドチェ
最近Nuxt.jsでWebアプリを作ってるけど、 度重なる改修でVueコンポーネントが乱立。。 使ってないのもたくさんありそうなので、調べるスクリプトを作ってみた。 スクリプトはこんな感じ #!/bin/bash # vueコンポーネントの一覧を取得 FILES=`find components -name "*.vue"` for i in $FILES; do # 全体からコンポーネントをインクルードしている行の数を取得 NUM=`grep -r "$i" * | wc -l | sed -e "s:[^0-9]*::g"` # ファイル名と見つけた件数を表示 echo "** ${NUM}: ${i}" # grepした結果を表示(確認用) grep -r "$i" * echo "" done ** 1: components/Hero.vue pages/index.vue:im
PRPLパターンで「ロリポップ！」「ヘテムル」のWordPressを爆速にしよう - Pepabo Tech Portal
リモートワークを長期的に続けるには、何かと工夫が必要だなと感じていて、ずっと筋トレ不足を解消したいと考えていました。昨日、懸垂バーを買ったらネジが一本しか入ってなくて、全く使えない鉄屑を前にネジが一式送られてくるのをまだかと待ちわびているlinyowsです。みなさん元気にお過ごしですか？ 今日は、「GitHub Actionsで「ロリポップ！」「ヘテムル」をもっと便利に使おう」の記事の続編？にあたる、ブログやサイトを作る上で欠かせないWordPressを、低コストに爆速にする方法をご紹介します。少し、難易度は上がるかもしれません。 WordPressは、利用方法の一つとしてレンタルサーバーに設置して使います。レンタルサーバーは、サーバーリソースを利用者と共有することで安価になるのですが、リソースを共有している以上、パフォーマンスに優れているわけではありません。Googleは、マルチデバイス
複数の開発チームの機能開発を止めずに Nuxt3 へアップデートしました - ANDPAD Tech Blog
はじめに 背景 1. 大きなリリースによるアップデートに失敗した 2. 機能開発を止めずにお客様へ価値提供したかった 課題 リリース管理の複雑さ 取り組んだこと 1. 変更予定の内容と実施時期を透明化する 2. アップデート作業による変更量を小さく頻繁にリリースする 2.1. Nuxt Bridge を利用してアップデートする 2.2. 互換レイヤーを作成してアップデートする 2.3 codemod script を作ってアップデートする おわりに はじめに SWE の sunecosuri です。 アンドパッドでは多くのプロダクトで Nuxt を使用しており、 使用していたバージョンの Nuxt2 が EOL を迎えたため、 Nuxt3 へアップデートしました。 この記事では、複数のプロダクトチームが開発する環境でどのように 機能開発を止めずに Nuxt のメジャーアップデート に取り組
働く女のワーク＆ライフマガジン「Woman type」が女性エンジニア限定コミュニティ『Code Polaris(コード ポラリス)』とともに、女性エンジニア向けオンラインイベントを開催しました。テーマは「女性エンジニアのキャリアのお悩み相談室」。女性エンジニアの「長く働く」を阻む壁、自分らしいキャリアを築いていくための秘訣について、大平かづみ氏、松井菜穂子氏、千代田まどか（ちょまど） 氏が自身の経験も踏まえて話しました。全4記事。2回目は、視聴者が一番感じている最新技術のキャッチアップの不安について。 世代を問わず一番不安を感じる技術のキャッチアップ 司会者：今回セミナーをやるにあたって、女性のエンジニア約100名にアンケート調査を実施しています。大きく2つ、今後のキャリア不安というところで出てきたものをピックアップしたので、みなさんにもご意見をうかがっていければなと思っています。 20
Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。 参考用のプロジェクトとして以下レポジトリを用意しました。 Vue 2からの移行を体験してみたい場合には、vue2-todo-appのタグにチェックアウトしてください。 移行ビルドを使用する Vue 2からVue 3へ移行するためのツールとして、公式から@vue/compatが提供されています。 @vue/compatを使用すると、Vue 2モードで動作するため、Vue 3で削除や非推奨になったAPIも一部の例外を除いてそのまま使用することができます。Vue3 で削除で非推奨になった機能は実行時に警告が出力されるようになります
本文書ではVue.jsのフレームワークであるNuxt.jsを使ってアプリケーションの開発を効率的に行いたいという人を対象にNuxt.jsのインストールを行った実環境を利用して動作確認を行いながら基本機能の説明を行っています。 Vue.jsのシンプルなコードで記述していますがVue.jsの知識があることを前提に説明を行なっているためVue.jsを知らない人には少し難しい内容になっています。Nuxt.jsを使いこなためにはvue.jsを理解する必要があるのでNuxt.jsを学習する前にVue.jsを先に学習することをお勧めします。 動作確認を行っているNuxt.jsのバージョンはv2.15.7です。現在はNuxt 3のRelease Candidateを利用することができます。最新バージョンのNuxt 3のチュートリアルではないので注意してください。Nuxt 3がリリースされたのでNuxt 3
CodeGuessr
Welcome to CodeGuessrA game for nerds, by a nerd (@healeycodes) What popular open source repository is this code from? Round 1/10, Score 0 airbnb/javascriptangular/angularangular/angular.jsansible/ansibleant-design/ant-designapple/swiftatom/atombabel/babelbitcoin/bitcoincaddyserver/caddychartjs/Chart.jscypress-io/cypressd3/d3denoland/denodjango/djangoelastic/elasticsearchelectron/electronethereum/
ここのところ、Nuxt.jsを試しているのですが、PhpStorm環境でコーディングしていると、コード中にESLintからのエラーメッセージがあふれます。 敬愛するPhpStormさんなら、ReformatショートカットでESLintのフォーマットでReformatしてくれるかと期待しましたが、残念ながら適用されず。 ESLintフォーマットで調整したものをうっかりReformatしてしまうと、ESLintフォーマットが破棄されてPhpStormで設定しているフォーマットでRefomatされてしまします(´・ω・`；) なんとか、ESLintでReformatしてくれないものかと、情報を探していたら、以下のページを見つけました。 How to make WebStorm format code according to eslint? 以下、ESLintフォーマットでReformatしたい
「Nuxt3でのISR対応について調べる」や「Serverless FunctionsのCustom Runtimeを構築する」を経て、Vercelだいたい分かった状態になったため更に発展させてRailsでISRを動かす実験をしてみた。 条件 VercelのServerless Functionのruby27ランタイム(AWS Lambdaと同等)上で動かす a. Custom Runtimeで全部やるのはたいへんそうなので考えない Build Output API (v3) を使ってOn-Demand Incremental Static Regenerationする a. JavaScriptフレームワーク以外でもできるんじゃない？ という部分を検証したい せっかくRailsアプリケーションなのでViewやARも使ってMVCしたい データベースはPlanetScaleのMySQL互換サ
STORESのダッシュボードをリニューアルしました
娘と机を並べて仕事をし、天気が良ければ昼の休憩時間に散歩をする。毎日顔を合わせて議論をしてきた仲間たちが、画面の向こうにいるなんて想像だにしていなかったけれど、それでも前を見て進めていること、大きな混乱もなく今日を迎えられたことにホッとしています。 この半年ほど、STORES のデザインチーム、フロントチームとともに、STORES のダッシュボード（ストアオーナーさん向け管理画面）のリニューアルに取り組んできました。 8 年続く STORES というプロダクトの全体を理解するところからはじまったリニューアルプロジェクトでしたが、ようやく 2020 年 5 月 19 日にリニューアルを迎えることができ、まあここからが本当のはじまりなわけなんですけど、区切りとしてこのテキストを書いています。 このテキストは、リニューアルにあたりどんなことをしたかを書いていますが、プロジェクト/デザインのリード
Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた
Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。 Superflare 自体はフレームワークを謳っておりません。実際に、Superflare は Remix、Next.js、Nuxt.js などのフレームワークと組み合わせることで効果を発揮します。 Getting Started Cloudflare Workers アカウントの作成 Cloudflare Workers を動かすためには（ローカル環境も含めて）Cloudflare Workers のアカウントを作成する必要があります。アカウントを作成するには下記サイトから「Sign up」をクリックします。 プランの選択は無料プランである「Free」プランで問題ありません。
2015年3月に入社し、9年4ヶ月在籍したnoteを卒業（退職）することにしました。本日7/24が最終出社で、退職日は7/31となります。 これまでnoteで関わって頂いた方への感謝の意を伝えるとともに、入社から退職に至るまでの話を振り返っていこうと思います。 noteへの入社のきっかけ2014年。私の人生に大きな転機が訪れます。 青森に住む義父が癌（ステージ4）を患い、サポートする必要が出てきました。当時神奈川県に住んでいた私たち家族は、介護問題に直面し、仕事をどういった形で続けていくべきか、いくつかの選択肢を検討することになりました。選択肢としては、 青森で就職する 青森で起業する 都内の会社に勤めながらリモートワーク の3つがありました。 当時、リモートワークを採用する企業は今ほど多くはありませんでしたが、ソニックガーデンさんやKAIZEN PLATFORMさんなど少しずつ事例が出始
![約9年在籍したnoteを卒業します！ [退職エントリ]｜福井 烈](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a54a51cdfc53a9d18c24fe21ec40291e9d05de4/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F148345582%2Frectangle_large_type_2_8b2ee6bac00490f99ae6c8dbe2b03c8f.jpeg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
April 25, 2022 Four Eras of JavaScript Frameworks April 25, 2022 I started coding primarily in JavaScript back in 2012. I had built a PHP app for a local business from the ground up, a basic CMS and website, and they decided that they wanted to rewrite it and add a bunch of features. The manager of the project wanted me to use .NET, partially because it’s what he knew, but also because he wanted i
App Router でのパンくずやナビメニューの作成に useSelectedLayoutSegments が便利
Leaner Techonologies の @corocn です。 最近 Nuxt.js のアプリを Next.js + App Router に載せ替えたのですが、メニューの描画に useSelectedLayoutSegments が便利だったので軽く紹介します。 実は App Router のドキュメントをちゃんと読んでいくと、Functionsの最後で紹介されています。 何ができる？ メニューを描画するときに、現在のページのメニューだけ下線や太字で装飾したいケースがありますよね。このとき普通に実装しようとするとURLからベースとなるパスを除いた上で分割して...など若干面倒です。 useSelectedLayoutSegment(s) を使うと、レイアウトを起点として、URLをいい感じにパースして返してくれるのでスッキリ書くことができます。 単数形（segment）と複数形（se
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog
Rustでマークダウンパーサーを自作して、WASM+Nuxt3+Viteで動かしてみた
GraphQLはサーバーサイド実装のベストプラクティスとなるか - Qiita
イベントの情報サイトをPWAで作ってみた【Nuxt.js】 - Qiita
WinterJS 1.0 · Blog · Wasmer
機械学習したデーターを爆速で販売するサービスをDockerで構築してみた - Qiita
Vue / Vite 関連ライブラリー名の読み方 2024
JavaScriptがブラウザでどのように動くのか | メルカリエンジニアリング
Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！
DELISH KITCHEN のサービスとバックエンドシステムのお話 - every Tech Blog
DRFとNuxtを使って画像分類（機械学習）をする① - atma-inc__blog
ANDPADで韻を踏む - ANDPAD Tech Blog
Vue.js を使った副業のリアル。スタートアップでの働き方と注意点 | Offers Magazine
TypeScript でメソッドチェーンしたら推論される引数が増えていくやつ - エムスリーテックブログ
Nuxt.jsで未利用のVueコンポーネントを探すシェルスクリプト - Qiita
「アウトプットが大切」「FBがもらえるものを作る」 3人の女性エンジニアそれぞれの最新技術キャッチアップ法
Vue2のプロジェクトをVue3へマイグレーションする
【完全ガイド】ゼロからしっかり理解したい人向けのNuxt.js入門 | アールエフェクト
PhpStorm(またはWebStorm)でESLint設定でリフォーマットしたい時の設定メモ - mlog
RailsアプリケーションをVercelにデプロイしてISRする
約9年在籍したnoteを卒業します！ [退職エントリ]｜福井 烈
pzuraq | Four Eras of JavaScript Frameworks