HTMLのサイトだけどコンポーネント指向でつくりたい（Vue3）
前提条件 新しいウェブサイトを立ち上げる。 今後の保守運営を考えてコンポーネント指向で設計する。（シンプルな操作で素早い更新とデザインの統一性が保たれるようにしたい） 今後メインで更新業務を行うのはマークアップしか知識のない人なのでHTMLファイル・CSSファイルだけいじれば更新が行えるようにする。 そのため、Node.jsでの環境構築などはできない。（ターミナルが使えない） ただし、将来的にメンバーの技術力アップがあったときにViteやNuxtに移行する可能性も考えて設計する。 以上のような条件でサイトを制作した過程をご紹介します。 かなり特殊ケースかもしれませんが、これから本格的にVue.jsを導入したいがチーム内の技術力にばらつきがある場合などの参考にしていただければ幸いです。 なお、開発環境はVSCodeでLive Serverなどのプラグインを利用します。 やること script
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
CORSまとめ - Qiita
今更ですが、CORS (Cross-Origin Resource Sharing)を色々試していたら、思っていた以上に色々パターンがあることに気づいたので、改めてその扱い方についてまとめてみました。 そもそも 現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。 例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。 しかし、アクセス元が悪意あるWebサイトならともかく、データ
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
100秒で理解するPromise
そもそも非同期処理とは？ Promiseについて知るためには、まず非同期処理について知っておく必要があります。 以下の動画で、非同期処理について100秒で解説しているので、そもそも非同期処理をよく知らないなぁという人はぜひ確認してみてください！ Promiseとは では、本題です。 Promiseとは、ES2015で導入された、非同期処理の状態や結果を表現するオブジェクトのことです。 PromiseはES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。 非同期処理はPromiseのインスタンスを返し、そのPromiseインスタンスには状態変化をした際に呼び出されるコールバック関数を登録できます。 jsprimer - 非同期処理:Promise/Async Function 例えば、出前アプリでピザを注文することをイメージしてみましょう。 ピザを注文すると、
『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA
株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難しいと我々は課題感を持っていました。そこで、この書籍ではICS MEDIAでは発信の難しかった、フロントエンドの全容を一冊で伝えることを目指しています。 2023年11月24日の発売で、Amazonや書店や電子版で購入できます。 Amazon サポートページ 2023年4月に執筆を開始し、フロントエンドのトレンドをまとめてキャッチアップできるようテーマを選定しました。344ページで、紙面はフルカラー。内容の厚みにたいして、定価2,860円（本体2,6
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
Babylon.jsをはじめよう
概要 AEC and Related Tech Advent Calendar 2021の3日目の内容です。 babylon.jsをはじめてさわってみたという記事です。Web系の３Dといえば、three.jsが有名ですが、Unityなどゲームエンジンに慣れた人におすすめなbabylon.jsについてハンズオンします。babylon.jsには、playgroundがあり、中身をみることができますが、ステップバイステップのチュートリアルが用意されていないため、断片的にプログラムがみれますが、特徴がわかりにくくなっています。今回は、その特徴や利点がわかるように説明ができれば思います。 環境 vs codeなどお好きなテクストエディタ babylon.d.tsのダウンロード https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/
Make a smart webcam in JavaScript with a TensorFlow.js pre-trained Machine Learning model | Google Codelabs
Make a smart webcam in JavaScript with a TensorFlow.js pre-trained Machine Learning model 1. Before you begin Machine Learning is quite the buzzword these days. It's applications appear to be without limit, and it seems poised to touch almost every industry in the near future. If you work as an engineer or designer, front end or back end, and you're familiar with JavaScript, this codelab was writt
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
ブラウザ / Browser - Speaker Deck
2021年度リクルート エンジニアコース新人研修の講義資料です
ブラウザでBase64で受け取ったファイルをダウンロードする | 株式会社エイチ・オー・エス
受託開発担当のRyuです。 先日、サーバからBase64で受け取ったPDFをそのままダウンロードしたい場面に出くわしました。 難なく出来るだろうと高をくくっていたのですが、つまづいたのでメモとして残します。 簡単に流れを説明すると、Base64をBlobへと変換し、それをBlob URL Schemeとしてリンクタグに動的に埋め込み、強制的にそれを叩きます。 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function() { $ajax(～中略～) .done(function(data, type) { downloadPdf(data); }); }); /** * Base64とMIMEコンテンツタイプからBlobオブジェクト
VueにAWS Cognitoのログインをamplifyを使わないで作り込む
最近ではちょっとしたwebアプリなら、サーバーサイドを使わずに、Node環境でReactやVueなどを使った開発が多くなってきました。 しかし、SPAではなく、ちゃんとしたショッピングサイト的なものを作ろうと思うと、どうしてもログイン機能などが必要になって来ると思います。 せっかくならクライアントサイドだけの開発でサーバーサイドはクラウドサービスにお任せしたくなってきましたので、ログインも便利なCognitoにおまかせして実装してみようということで、やってみました。 Amplifyは？ 最近良く耳にしたり、記事を目にしたりすることが多いですが、個人的には、まだまだ怖いので、使いたくない印象です。というのも、勝手に作成されるIAMに、ルートのスーパーユーザーの権限を与えたり、見えないところで勝手に色々設定をされるので、ちょっと嫌だなーという印象を受けたので、まだ実サービスでは、使うのはやめて
touch, click, pointerの実装 | 前編 タッチイベントとマウスイベント
touch, click, pointerの実装 前編 タッチイベントとマウスイベント このシリーズでは、タッチ／マウスイベント系の実装を考えます。第1回目はタッチイベントとはなにか、また、タッチイベントとマウスイベントの判別について解説します。 はじめに iPhone、Androidが登場したのはもう何年も前ですが、さらにWindows8も登場し、いろいろと状況が変化してきました。Windows8を搭載したPCの多くはタブレットデバイスのように、画面に触れることができるようになっています。 しかしながら、これらのデバイスはマウスを使っても操作できるようにもなっています。今後、どのようにタッチ／マウスのイベントを扱っていけばよいのかは、これからのウェブ開発において、より重要になっていくはずです。 そこでこのシリーズでは、タッチ／マウスイベント系のブラウザへの実装を整理し、それらのブラウザに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】
JavaScript Promiseの本
Amazon.co.jp: みんなのVue.js: 野田陽平, 門脇恒平, 山田敬美, 高橋和樹, 藤川淳史, 韓徹: 本
動画をブラウザーだけで変換 ～「FFmpeg」をWebAssembly/JavaScriptへ移植した「ffmpeg.wasm」に期待／クロスプラットフォーム、ポータブル、高速な「WebAssembly」（WASM）が熱い！【やじうまの杜】
How to perform multiple HTTP Requests with Javascript using Axios | Storyblok
vue-test-utils | Vue Test Utils