令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
学園祭で売上をリアルタイムに公開するサイトを雑に作ると盛り上がる - いなにわうどん
先日の学園祭で友人のオタク達とやきそばを焼いて原価ギリギリで売ったところ予想以上の盛況でした*1。色々と工夫点はあったのですが、その一つとして売上杯数を Web 上で登録してリアルタイムで雑に public internet に公開するという試みをしてみところちょっと盛り上がったため、その経緯を書いていきたいと思います*2。 つくったもの 会計を登録するシステムとその集計結果を表示する Web サイト（＋付随する簡単な API）を作りました。フロントエンド側のコードは GitHub 上に公開しています*3。 github.comサイトは以下のページから構成されます。フロントエンドはすべて public になっているため、簡易的な認証として API 側で Authorization ヘッダ内のトークンの有無を検証し、不正なトークンが送付された場合は 401 を返す設計としました*4。 トーク
井上俊之が語る『君たちはどう生きるか』- ロングインタビュー - fullfrontal.moe
井上俊之が語る『君たちはどう生きるか』- ロングインタビュー by Matteo Watzky | Oct 20, 2023 | インタビュー | 0 comments Fullfrontal.moeでは、宮崎駿監督の新作『君たちはどう生きるか』について、もっと知りたい、情報を共有したいとずっと考えていました。そのため、映画のスタッフにインタビューするのは当然のことだった。そこで、伝説のアニメーター、井上俊之にインタビューをいただきました。 井上俊之は、日本アニメーションで最も偉大な職人の一人であり、最も作画の歴史に詳しい人物の一人でもある。井上氏は、『アキラ』、『攻殻機動隊』、『千年女優』、『電脳コイル』、『おおかみこどもの雨と雪』など、日本アニメーションの最高傑作のいくつかに参加していましたが、『魔女の宅急便』と『君たちはどう生きるか』の間にに宮崎監督と仕事をしたことはない。 そこで今
日本スポーツ振興センター給付金請求について
・生徒が学校の管理下（登下校中、授業中、部活動中、学校行事等）で「ケガ」などをし、医療機関で治療を受けた場合に、保護者の皆様に対して医療費・見舞金等の給付を行います
RxJSのconcatMap, mergeMap, switchMapの違いを理解する(中級者向け) - Qiita
(2021/06/02 update: RxJS 7 対応) ちきさんです。趣味はRxの再実装です。 さてRxJSの数あるオペレーターの中でも3大謎オペとして知られるconcatMap, mergeMap, switchMapについてお勉強しましょう。 (これらのオペレーター以前の段階で躓いている方にはちょっと難しい内容かもしれません) この中でもよく使われるのはmergeMap(flatMap)かなと思いますのでとりあえずはこれを中心に話を進めていきます。 mergeMapの極意1 ～新たなストリームを生み出す～ mergeMapの第一の特徴は、引数の値を使って新たなObservableを生成できるという点です。 例えば、 const { of } = rxjs of(5) .subscribe(value => { console.log(value) })
[Angular][状態管理]NgRxチュートリアル+α
はじめに 今回はNgRxの学習を兼ねて、公式チュートリアルをまとめました。 また、作成したチュートリアルに@ngrx/effectやSelectorやActionReducerMapを取り入れてみました。 なお、NgRxの基本は別記事にまとめましたので興味のある方は見ていただけたらと思います。 今回の開発環境 Angular CLI: 13.3.8 Node: 16.10.0 Package Manager: npm 7.5.6 OS: win32 x64 Angular: 13.3.11 rxjs: 7.5.5 typescrip: 4.6.4 @ngrx/store@13.2.0 @ngrx/storeを使ったTutorial まずは公式チュートリアルに沿って開発を進めて行きます。 このアプリケーションはカウンターの状態を管理する方法と、Angularコンポーネント内でカウンターを選択
![[Angular][状態管理]NgRxチュートリアル+α](https://cdn-ak-scissors.b.st-hatena.com/image/square/d62d344ec3cb3770ff48f9f6aefdab981cc8b7f3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--X5Bw4waR--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BAngular%25255D%25255B%2525E7%25258A%2525B6%2525E6%252585%25258B%2525E7%2525AE%2525A1%2525E7%252590%252586%25255DNgRx%2525E3%252583%252581%2525E3%252583%2525A5%2525E3%252583%2525BC%2525E3%252583%252588%2525E3%252583%2525AA%2525E3%252582%2525A2%2525E3%252583%2525AB%25252B%2525CE%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Acha%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JkY2Y3ZTM3YjIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
定期グループレッスン – 子どもオンライン日本語スクール 光JS
定期グループレッスン『プロジェクト型日本語レッスン』 「日本語で伝えたい」と自ら思い、日本語で自身の考えを表現できるようなグループレッスンをご用意しました！ 「日本語を勉強する」の一歩先、「日本語で勉強する」にフォーカスを置き、お子様の「伝わった！」という成功体験、「もっと日本語で伝えたい」という好奇心を引き出すレッスンです！ プロジェクト型日本語レッスンは・・・ ★週1回45分のオンライン定期レッスン ★レッスン録画視聴で欠席時の補習が可能 ★レッスン開始前に安心。担当講師との面談あり。 こんなご家庭におすすめ！ ✔家族以外と日本語で話す機会がない ✔「家族と話す日本語」の次のレベルにまでもっていきたい ✔楽しみながら、更に日本語力を伸ばしたい ✔「勉強」になりすぎず、グループで協力し合いながら日本で伝える練習をしたい このコースで伸ばす4つの言語スキル 読む👀：文章や友達が書いたこと
TypeScriptを使ってノベルゲームを作ろう - Qiita
こちらはQiita夏祭り2020の「〇〇（言語）のみを使って、今△△（アプリ）を作るとしたら」というテーマに沿って投稿した記事です。 完成イメージ 0. はじめに この章は読み飛ばして「1. 環境構築」に進んでも問題ありません。 要約：Phaser3を使うならTypeScriptで書くのがおすすめです。 やってみたいとは思いつつも中々難易度が高いゲーム制作。 Unityなんかにも挑戦してみたいけどハードルが高く、webに慣れ親しんだ身としてはTypeScriptでゲームを書きたい…。 そこでこの記事ではHTML5/JavaScriptでゲームが作れるフレームワーク「Phaser3」と「TypeScript」でシンプルなノベルゲームを作っていきます。 Phaser3もリリースからしばらく経って成熟してきたので、今ならTypeScriptで快適にゲームが作れると感じこの記事を書き始めました。
ライブラリゼロの20行でReduxもどきを実装して、Reduxを完全掌握しよう！！
はじめに Reduxは遠い昔に誕生したものなので、いまReduxを使っていない人も多いかもしれません。 Reduxは、出現当時はそれほど大きなソフトウェアではなかったのですが、ときが経つにつれて、いろいろな便利関数たちが現れてきて、そのせいで今からReduxを調べる人は、何が本質なのかを調べるのが難しくなっていると思います。 そこで3分でReduxもどきを実装しました。こちらです。20行！！ じゃーん！ JavaScriptでうごきます！！ // 実装 const createStore = (reducer) => { let state = 0; const listeners = []; const dispatch = (action) => { const newState = reducer(state, action); state = newState; listeners
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
“VPS” の検索結果 | さくらのナレッジ
VScodeの設定（settings.json）まとめ【2023年4月更新】
微信公众号开发看这篇就够了 - 掘金
利用規約｜フリー無料のBGM素材・音楽素材「甘茶の音楽工房」
Working with Phaser, TypeScript and webpack – step 3: TypeScript | Emanuele Feronato
Working with Phaser, TypeScript and webpack – step 2: publishing your game | Emanuele Feronato
Working with Phaser, TypeScript and webpack – step 1 | Emanuele Feronato
「もちろん売名だよ」杉良太郎の痛快すぎる福祉論
Cocos Creator 3.8 Manual - Scene