画像ファイルを用意する(Optional) UI 上に表示する画像を準備します。今回はめそこスタンプをドラッグ＆ドロップできるようにしました。 publicディレクトリ下にimagesフォルダを切ってその中に画像データを保持します。 charactersData.ts にドラッグ＆ドロップするデータを登録 caractersData.tsに以下のデータを保持します。 idは後にreact-beautiful-dndを導入する際に必要になるので一意のものを付与してください。 export const CHARACTERS = [ { id: "gambaruzoi", name: "がんばるぞい", thumb: "/images/1.png", }, { id: "gyp", name: "ぎょぱー！", thumb: "/images/2.png", }, { id: "iine", n

ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン

本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Nuxt.jsの非同期データ機能について説明しました。今回は、Nuxt.jsを利用して作成したWebページをインターネット上に公開する方法を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Nuxt.jsでは、作成したWebページをインターネット上に公開するための機能が提供されています。この機能を利用すると、Node.jsが実行できないWebサーバー向けに静的ファイルを生成できます。また、Node.jsが実行できるWebサ

フロントエンドを Next.js 化する機会が多くなってきた昨今。いざ取り組むにしても、スタイリング込みで実装出来るエンジニアが不足気味ではないでしょうか？また、縦割り分業している現場ではこれまで、マークアップ（フロントエンド）エンジニアが html + css を納品し、それを元にサーバーサイドエンジニアがテンプレートエンジンに組み込むという業務フローも少なくありませんでした。 この様な業務フローの場合、同じリポジトリで作業してもらうという事が難しいこともあります。Next.js 移行期のこれからも同様のことが多々起きると予想しており、完全分業するうえでの最適化を考える必要があります。この件について少しまとめたくなったので、メモ書きとして残します。 前提条件 以下の座組みは React Component 分業で最適だと考えている組み合わせです。マークアップエンジニアはこれまでと変わらず

Amazon Web Services ブログ 米国 海軍は７兆円超のリソース管理を行う最大の基幹システム(ERP)をAWSに移行完了 アメリカ海軍（U.S. Navy）が、”最大”の基幹システム(“U.S. Navy’s largest SAP ERP system”)をAWSへ移行した事例が公開されました。今回のブログでは、AWSジャパン・パブリックセクターより、この事例から読み取られるべきインパクトについて、ご紹介します。 ７兆円超の巨大な資源管理をするERPシステムをAWSへ移行 戦闘準備の整った海軍を維持・訓練・装備を充実させることを使命とする米海軍（U.S. Navy）は、軍のメンバーが十分な情報に基づいた意思決定を行い、目前のタスクに集中できるようにするため、テクノロジーやサービス、人事に関連する多くのバックオフィス機能を自動化しています。ただし、これまで整備されてきたオンプ

この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か？ SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリです。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられています。そのため、SWR はstale-while-revalidateに基づいた処理と設計になっています。 stale-while-revalidateについて解説したい所ですが、解説するとすごく長くなってしまうため、ここでは「 キャッシュをなるべく最新に保つ機能 」

こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。 本記事ではここまでに至った過程も含めお伝えします！ 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ

この記事について 本記事は、Docker を使って Node.js 開発を始めるための方法について記載しています。 対象読者 Node.js を使って開発を始めたい方 Docker コンテナ上で Node.js アプリケーションを動かしたい方 ホスト OS を綺麗なまま Node.js の開発を行いたい方 はじめに 以前、npm パッケージ n を使って Node.js のバージョン管理を行う方法を投稿しましたが、正直なところ、開発は全部 Docker コンテナ上で行いたいのが理想でした。 そのため、今回は Docker Compose で定義したコンテナで Node.js を実行しようと思います。 環境構築 Docker インストール OS が Windows または macOS の場合は、Docker Desktop をインストールします。 OS が Linux の場合は、以下の記事を

この記事について この記事では、Node.js のバージョン管理マネージャーである Nodist をアンインストールして、ホストの Windows OS に Node.js を綺麗に再インストールまでの方法について記載しています。 環境 この記事の内容は、以下の環境で検証を行いました。 OS: Windows 10 Pro 10.0.19042 N/A ビルド 19042 Nodist: 0.9.1 この記事を作成した背景 職場の同僚が、新しく Node.js をインストールする機会がありました。 ホスト OS は Windows を使用しており、Docker ではなく、ホスト OS に Node.js をインストールしようとしていましたが、ネット上の情報は知見が古く、参考にしてはいけない 情報が多く存在していました。 そのため、過去の情報に従って Node.js をインストールした結果、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめまして。個人でWebサービスの開発をしているさとうたです。 この記事は「個人開発の『失敗の本質』」と題して、僕が2ヶ月ほど前にリリースしたサービスが見事にスベった経験をもとに、それを反省して、個人開発で既に成功されている先人達の数々のエントリーを読み漁り、「自分の何が悪かったのか？」「何を改善すればいいのか？」を徹底的に洗い出してまとめてみたものです。 筆者プロフィール 開発歴は約4年。今ままでリリースしたサービスは4つ。最大アクセスは月1.5万程度。「失敗の本質」は未読。 絶賛爆死中のサービス カムナビ－地図の上に好きな書き込み

はじめに 私は学習メモやに日々のタスクを「Notion」と呼ばれるオンラインノートアプリを使って一元管理しています。 Notionを自分専用のWikiのように活用し、一箇所で必要な情報を取得できるようにすることで生産性の向上に繋がります。 以前投稿したこちらの記事でNotionをプログラミングノートとして運用する方法について書いていますのでよろしければ合わせてご覧ください。 今回はVSCode内でNotionを使うことができる「VSCode Notion」という便利な拡張機能をご紹介します。 Notion の課題点 私は普段主にプログラミングノートとして学んだことをまとめることや、Zennで記事を書くときのアイデア出し、タスク管理として使っています。 私は、Microsoftが開発しているVisual Studio Code（VSCode）というエディタを愛用しています。隣には、いつもNo

こんにちは、カミナシの浦岡です。 最近、弊社のメンバーとしてUIデザイナーが新たに加わり、プロダクトのUI改善を進めています。 以前は、AntDesignなどUIライブラリーのコンポーネントをそのままプロダクトで使用する機会が多かったのですが、UI改善を行う上で、UIライブラリーそのままでは要件を満たすことが困難なケースも出てきました。 その結果、独自のReactコンポーネントを実装する機会が増えているのですが、 この記事では、その独自コンポーネントを「ヌルヌル動く」仕上がりにするために気をつけている点を架空の題材を使って書きます。 題材 今回、「空を舞うカレンダー」（ペルソナ５風!?）のUIがデザイナーから提示されたと仮定して進めます。 極端な題材ですが、UIライブラリのカレンダーをベースには実現できそうにないので、独自コンポーネントとして作りましょう！ 先に、ヌルヌル動かす上で気をつけ

Vue.jsにはOption APIやClass方式があり、Vue.jsバージョン3からはComposition APIも増え、さまざまな作り方があります。Vue.jsを基礎としているフレームワーク、Nuxt.jsも同様にNuxt Composition APIとしてNuxt.js用に拡張されたものがリリースされています。 さらにNuxt.jsには静的サイトジェネレートという強力な機能があります。Nuxtの静的化のための機能はOption APIで提供されていましたが、Composition APIでの使い方はあまり解説記事がありません。本記事ではNuxt Composition APIを使って静的サイトを生成する方法を解説します。 下記は実際にNuxt Composition APIで静的化したものと、非同期処理を比べたデモです。 サンプルを別ウィンドウで開く コードを確認する Nuxt

スピーカー自己紹介、『JavaScript コードレシピ集』を出版池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こんなところでやっていました。 JavaScriptに関して2年ほど前に『JavaScript コードレシピ集』という本を出しています。この本はまだ役に立つ内容もあるかなと思いますので、もし書店で見かけましたらぜひご購入を検討ください。宣伝でした。 Webの劇的な変化は少なく

Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScript） import type { AppProps } from 'next/app' import { useEffect } from 'react'; function MyApp({ Component, pageProps, router }: AppProps) { + useEffect(() => { + // ここに全ページ共通で行う処理 + },[router.pathname]) return <C

WEBサービス開発歴7ヶ月目に突入しましたにこと申します。 先日、GithubにAWSアクセスキーをあげてしまいました。 その時は事の重大さをわかっておらず、言われるがままにコマンドをうち対処が出来たのですが、調べれば調べるほど「とんでもないことをしていた・・・！」ということがわかりました。 AWSで不正利用され80000ドルの請求が来た話 初心者がAWSでミスって不正利用されて$6,000請求、泣きそうになったお話。 もう今後アクセスキーをあげることはないですが、愚かな人間なのでまた何らかを間違えてやってしまうかもしれません・・・。 二度とないことを誓いつつ、もし万が一やらかしてしまった場合、また同じようにアクセスキーをあげてしまったような方に向け、手順をしっかり残したいと思います。 まずはAWSのアクセスキーを無効化 ※2021/1/30追記 Githubの手順よりも先にAWSのアクセ

回答 (13件中の1件目) 英語版で聞けば、頑張れば全然大丈夫だよ〜、とか回答くるでしょうね。アメリカンオプティミズムってやつで。 ま、アメリカは年功序列じゃないので、とか言っても、英語系のサイトでアメリカ人が年齢差別されたって話はよく聞きますので、他人にはとりあえず楽観的ななかでも、一番楽観的な意見を出してきますね。よくある、”Everything is going to be alright”ってヤツですね。死ぬ間際の人にも言いますから。 でも、本当に天才っています。で、なんか世の中のことを知らないで埋もれている人。これも、英語版の回答で読んだのですが（いろいろ楽しい回答がいっぱ...

回答 (5件中の1件目) Arene は、トヨタとはいえ、TRI-AD という先端開発組織の成果物です。そこから容易に想像できる通り、現場の一歩先を見据えたものと捉えるのが妥当でしょう。 … 既に回答がついている通り、現行の車載システムは、複数のサプライヤが提供する多数の ECU がネットワークで疎結合されている構成です。開発言語は一つに規定できません。 ネットワークも、インフォテイメント系(カーナビとか)、ボディ系(ワイパーとかドアミラーとか)、パワー系(エンジンとか)、セーフティ系(衝突回避とか)に分かれていて、それぞれ使うバスが異なります。流れているパケットも異なります。各ノ...

プレゼンテーションレイヤ、いわゆるフロントエンドがクライアントサイドで実装・実行されるアーキテクチャ (注 1) において、管理画面/管理機能をあとから追加する際にどのような実装パターンがあるのかを整理してみます。 注 1: Presentation Domain Separation の実践の中でも、物理的にプレゼンテーションロジックとドメインロジックを分離しているアーキテクチャです。 用語の整理 プレゼンテーションレイヤ 三層アーキテクチャにおける、システムの利用者へユーザインターフェイスを提供する層です。本記事では"フロントエンド"とほぼ同義で使います。 OSI 参照モデルの第六層ではないです。 バックエンド Web API とは プレゼンテーションを持たない Web API (HTTP プロトコルを用いてネットワーク越しに呼び出すアプリケーション) とします。 プレゼンテーションレ