Twitterにも上げましたが、作ってみました。 ときどきこういうのを作っては温泉欲を満たしたり、みなさんの温泉欲を高めたりしています…。なんでもそうですけど、お金が落ちないと存続できないので、私がなにか書いたり発信したりすることで温泉にお金が落ちるようになればめっちゃ幸せなので…。 〜〜〜 （追記） 海派？山派？がわかりにくくてすみません…！完全に寝ぼけてました。 海派→はい、山派→いいえです。 あと「箱根は電車でもバスでも行けるよ」と多くご指摘いただいておりますが、個人的には車で行ったほうがよいと思っているので右側に置きました。日帰り温泉や観光スポット回るとき、登山鉄道やバスだけだと結構たいへんなので…。箱根湯本だけ楽しむ、なら電車でもよいですが、箱根湯本駅から奥へ行くのであればけっこう手間だったりします。 草津・伊香保・四万も「車で行ったほうがよいのでは」とご意見いただいていますが、
リンク yuru-to.net ゆる～と - 全国日帰り温泉・銭湯マップ ゆる～とは、全国の日帰り温泉・銭湯マップです。日帰り入浴可能な施設（日帰り温泉や銭湯、温泉宿、足湯など）が、15,000件以上登録されています。一番近い銭湯を探したり、温泉地マップを表示したり、料金などの条件で検索することができます。Googleに登録された100万件以上のクチコミと100万枚以上の写真にアクセスできます。 42 users 540
1. ごはんが美味しい！ ２食付き1万円以下で泊まって「2万円くらいの宿よりご飯が美味しい」とか「こんなに美味しい定食屋もめったにないよな〜」という宿によく出会います。 ホントにボロいい温泉宿に、ご飯がとびっきり美味しいところが多いのです。 記事後半で、具体的にご紹介します！ 2. 人情を感じる（家族経営で良い人ばかり！） ボロいい温泉宿は、長いことご家族で経営されているところばかり。 １人の人間として大切にしてくれている「人情」を感じて、「あ〜いい旅だったな〜」と思わせてくれるところが本当にたくさん。 親戚のおじさんやおばさんの家に泊めていただくような気分で、癒されますね。 3. 温泉は極上！ 温泉好きの方ばかりではないと思うので、極上の温泉についてまとめると、 こういった特徴をもつ、極上の温泉は小さなボロいい宿に多いです。 大型の旅館だと、どうしても浴槽が大きいので、温泉の鮮度が落ちが
【2食付き2万円以下】2021年に1人で泊まったコスパ最強の温泉宿ベスト10を今更ながら発表する - 温泉ブログ 山と温泉のきろく
1泊2食付き2万円以下の宿で、コスパ重視の総合ベスト10を選出した 2022年も終わりに近づくタイミングでの公開となり恐縮ですが、本稿は「2021年に泊まった温泉宿」の振り返り記事です。 2021年に泊まった宿の中から「2食付き2万円以下で1人で泊まれる」比較的リーズナブルな宿限定でご紹介しています。 先に公開済みの「2021年に泊まった温泉宿で｢部屋｣｢風呂｣｢食事｣が良かったおすすめ宿ランキングを発表する」では、2021年に泊まった宿の中で「部屋・建物」「風呂」「食事」の3項目について「突出して良かった宿」のベスト3をそれぞれ選定しました。 「食事」や「部屋」部門では特に、宿泊料金の高い宿が上位に入りやすい傾向がありますが、私自身、たまにいいお値段の宿に泊まることもあるとは言え、普段は1泊2食付きで1万円台で収まる宿を中心に宿泊しています。なので「すごく印象が良かったけど項目ごとのラン
リクルートテクノロジーズ エンジニアコース新人研修の内容を公開します！（2020年度版） | Recruit Tech Blog
こんにちは！ リクルートテクノロジーズでセキュリティエンジニアとして活動している、藤原 巧です。 毎年恒例となっており、大きな反響をいただいている、エンジニアコースの新人研修の内容を紹介させていただきます。 研修の概要 リクルートテクノロジーズでは、新卒採用の新人向けに３ヶ月間の技術研修を行っています。この技術研修では大きく分けて２つのコースが設けられています。 1. プログラミングやWebサービスの構造の基礎を体系的に学び、その後一人につき、ひとつのスマホサイトを企画からリリースまで行うコース 2. 一定以上のプログラミングスキルと開発系経験がある新人に向けた、実際の開発で必要となる様々な技術要素をより深く学び、その後実際のサービスでチーム開発にてOJTを行うコース 今回公開するのは 2. で使用した資料です。 この技術研修は、そのほとんどの部分を内製で実施しています。 この研修の最大の
Webページがブラウザに表示されるまでに何が起こるのか？
## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 上記で「127.0.0.1 localhost」とあるように、[IPアドレス] [ホスト名]というフォーマットで書かれます。 HOSTS.TXTが使われていた当時 ( 1970年代 ) では、わずか数百台のホストしかなかったので、ネット上の全てのホスト情報の記載が可能でした。 しかし、インターネットが普及していくにつれてHOSTS.TXTは肥大化していき、1983年には、ホスト数はおよそ数万台になりました。もはやHOSTS.TXTによる名前解決は不可能となったので、現在のようなDNS
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
新しいフレームワークを学ぶならTodoMVCではなくRealWorldを参考にしよう - Runner in the High
よく新しいフレームワークを学ぶにはTodoアプリを作ってみるのがよい、と言われる。実際、Todoアプリを様々なフレームワークで作ってみたサンプルをまとめたサイトもあったりする。 ところが、実際に業務で作るようなアプリケーションはTodoアプリの範疇を超えている。とくにSPAにもなると、画面遷移やWebAPI連携、大規模な状態管理などなどの条件が増えるので、Todoアプリを作っているときには考慮できていなかった大変さが出てくる。 そこで参考になるのが RealWorld example apps と呼ばれるプロジェクト 端的に言うと、TodoMVCの大規模版。 規定のスペックに沿って、様々なウェブフレームワークで作られたアプリケーションのリポジトリがリストアップされている。 スペックについて "Conduit" is a social blogging site (i.e. a Medium
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜 - Qiita
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜JavaScriptRailsJWT認証React SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外では
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
こちらのスライドは以下のサイトにて閲覧いただけます。 https://www.docswell.com/s/ockeghem/ZM6VNK-phpconf2021-spa-security シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXkRead less
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった？みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは？ SPAとstaticなwebサイトの違い static
2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
車で行きたい関東近郊の秘湯10選。2,500ヵ所以上の温泉を巡った秘湯探検家のおすすめ #くるまも - くるまも｜三井住友海上
はじめまして。秘湯探検家の渡辺裕美です。 私は会社員時代にハードワークで体調を崩したとき、「温泉」と「自然」に心身を癒やされました。それをきっかけに温泉にハマり、これまでに国内外の温泉2,500ヵ所以上を巡りました。 特に「秘湯」など自然豊かな場所にある温泉が好きで、現在でも月の半分は、関東近郊の未開の温泉探しや子どもとの秘湯巡りを車で楽しんでいます。 自然の中にある「温泉プール」付きの秘湯（北温泉）都内にあるスーパー銭湯も気軽で良いのですが、人が多過ぎたり、子ども同伴の場合は周りの目が気になってリラックスできなかったり……。 でも、「秘湯」ならそんな心配をせずに、静かに温泉を楽しめる場合が多いです。また、山・川など自然環境にも恵まれていることが多く、癒やし効果が倍増します。 そこで今回は、私がおすすめしたい「初心者向け関東近郊の秘湯」をご紹介します。東京から車で2～3時間走れば、個性的で
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
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。
なぜ僕が「SPAはコストが高い」と考えているのか
どうもみなさんこんばんは ちょっと前に「個人開発者やスタートアップの初期からSPAで開発するのはコスト高いっすよね」みたいな事を書いたらフロントエンドエンジニアの皆様からバチバチに叩かれた僕です 彼らには彼らの考えがあるのでそれはどうでもいいのですが、どういう理由があってその発言をしたのか～と言う部分が気になっている方もいたようなので説明しておこうと思います ちなみに今でも全く意見は変わっておらず、この発言に同意できるかできないかは単純に視点の違い、規模の違い、スキルの違いだと思ってます 追記: もちろんSPAじゃないと実現できないようなサービスを作りたい場合はSPA一択ですし（インタラクティブにHPつくるサービスとか。でも世の中の95%くらいのサービスはそうじゃないと思います）、サイトの利用はログインした人にだけ提供するような業務系ツールなどはまた話が別です 前提の話 こういう記事ではコ
コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog
こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開
はてなブログ10周年特別お題「好きな◯◯10選」 あの温泉に行きたい！と心から思えた10箇所の温泉地 はてなブログ10周年特別お題に参加して何か書こうと思いたち、いくつかある特別お題の中で「好きな○○10選」について書くことにしました。 私は「温泉地」より「温泉宿」にこだわりがあるタイプなので、最初は「好きな温泉宿10選」で書こうと、宿を10軒選ぼうとしたのです。ですが、好きな宿が多すぎてどうがんばっても10軒に絞れません！23軒ぐらいから減らせない……。 ですがひとたび「温泉地」について考えてみると……ああ私、温泉地には別にこだわりはないと思っていたけれど、気がつくとあの温泉には何度も行ってるなあ。泊まった宿も、お気に入りの1軒だけというわけじゃなく、何度もおとずれて何軒もの宿に泊まってるわ。つまりこの温泉地が好きなんだよな、と気がつきました。 そんな「よく考えると大好きだった」温泉地を
こんにちは。 マネーフォワードの新卒Railsエンジニア、きなこ と申します。 マネーフォワードX という組織で、日々プロダクトの開発に勤しんでおります😊 突然ですが皆さんは JWT という技術をご存知でしょうか？ 私は趣味でCTFというセキュリティコンテストに出場するのですが、最近ホットだと感じるのがJWTに関連する攻撃です。 今年の1月に初めてJWTを題材にした問題に遭遇し、その後JWTの出題頻度が強まっていると感じ、社内に向けてJWTにまつわる攻撃を通して学ぶための記事を書いたところ、たくさんの反応をいただきました。 今回の記事はその内容を社外向けにアレンジし、ハンズオンを通して実際にJWTを改竄し、受け取るAPIを攻撃することでJWT自体を学べるようにしたものです。 本記事はJWTに興味があるWeb開発者を想定していますが、そうでない方も楽しんでいただけるようにハンズオンを用意し
こんにちは、ISC 1年 IPFactory 所属の morioka12 です。 この記事は IPFactory Advent Calendar 2020 の10日目の分になります。 IPFactory という技術サークルについては、こちらを参照ください。 本記事の最後に記載されている余談でも IPFactory の詳細を紹介しています。 はてなブログに投稿しました #はてなブログ IPFactory Advent Calendar 2020 の10日目の記事を書きました#JWT #security セキュリティ視点からの JWT 入門 - blog of morioka12https://t.co/g1MYe77hAF — morioka12 (@scgajge12) 2020年12月10日 普段は Web Security や Cloud Security 、バグバウンティなどを興味分
バックエンド Web API に管理画面/管理機能を追加するアーキテクチャパターン - valid,invalid
プレゼンテーションレイヤ、いわゆるフロントエンドがクライアントサイドで実装・実行されるアーキテクチャ (注 1) において、管理画面/管理機能をあとから追加する際にどのような実装パターンがあるのかを整理してみます。 注 1: Presentation Domain Separation の実践の中でも、物理的にプレゼンテーションロジックとドメインロジックを分離しているアーキテクチャです。 用語の整理 プレゼンテーションレイヤ 三層アーキテクチャにおける、システムの利用者へユーザインターフェイスを提供する層です。本記事では"フロントエンド"とほぼ同義で使います。 OSI 参照モデルの第六層ではないです。 バックエンド Web API とは プレゼンテーションを持たない Web API (HTTP プロトコルを用いてネットワーク越しに呼び出すアプリケーション) とします。 プレゼンテーションレ
Angular と Firebase で月間 3.5億PV になった PWA の収益性改善とコストカット - Qiita
と、振り返ってみると毎年綺麗に 300% 成長でこれていますね。 （流石に来年はきついと思います＾＾； 今回は、そんな サービスを拡大する上で欠かせない収益の話 と 成長したからこそ表面化したコストの話 をまとめていきたいと思います。 収益の話 参照：https://jp.freepik.com PWA は稼げない 昨年の Advent Calendar にて、私はたいそう嘆いておりました（ＴДＴ） Web 側の広告は MPA（マルチページアプリ）を前提にしているものがほとんど Web 側では広告の表示を最適化できない（MPA 前提の規約上バックグラウンドで読み込んでおけない それに加えて、SPA のページ遷移が早すぎて広告が表示される前に通過してしまう アプリ側にはインタースティシャル広告やリワード広告といった単価の高い広告商材が豊富に存在する そういった要因から、PWA におけるページ
「再訪したい度5点満点」をつけた宿の中でも特に好きな10軒 先日、はてなブログ10周年特別お題キャンペーンに参加して「好きな温泉地10選」という記事を公開しました。 「好きな○○10選」というお題から書いた記事でしたが、私は「温泉地」よりも「温泉宿」に思い入れがあるタイプなので、最初は「好きな温泉宿10選」で書こう！と思っていたのです。ところが、好きな宿が多すぎてなかなか10軒に絞ることができないまま時間が過ぎてしまい「温泉地を10箇所選ぶほうが楽じゃないか！」と気づいたので、温泉地10選の記事を書き上げて公開しました。 お題キャンペーンは終わってしまいましたが、悩み抜いた末に「温泉宿10選」もピックアップできたので、せっかくだから公開しよう！と思い、この記事を書いています。 単純に「好きな宿」ということで考えると、20軒ぐらいから減らすことができず難儀しましたが、この記事では「ブログ（山
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。
2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜コンサルティング・システム開発・Web制作
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 こんにちは、エンジニアのづやです。 突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。 出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、 フレームワークは何を使えば良い？ どうやって導入したら良い？ など、意外とハードルって高くないですか？ そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。 でもfrourioはそ
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA（Single Page Application）でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
【激怒】巨乳に仕事を潰された【宇崎ちゃん】
赤十字コラボ第3弾（京都赤十字では第2弾）が進行してたのに、巨乳が遠因で消滅した…… こんなことが許されていいのか……！？ 日本人！ 目覚めろよ！ 日本人！ おーい！ おーい！！ 乳！！！ --------------------------------------------------------------- ◆twitter（フォローせよ） https://twitter.com/AkatsukiUNI ◆BOOTH https://akatsukiuni.booth.pm/ ◆Pixiv FANBOX https://www.pixiv.net/fanbox/creator/31380019 ◆Fantia https://fantia.jp/fanclubs/6380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
「Cloudflare Pages」が正式版に。JAMスタックによる高速なWebサイトを構築、CDNに展開へ
Cloudflareは、JAMスタックを用いてWebサイトを構築する新サービス「Cloudflare Pages」が正式版として提供開始されたことを発表しました。 JAMスタックによるWebサイトの構築とは JAMスタックとは、JavaScript、API、Markup Language（HTML）を主な構成要素としてWebサイトを構築する手法を指します。 WordPressに代表される多くのCMSでは、ユーザーからのリクエストに反応して動的にHTMLが生成されることで、動的なWebサイトを実現しています。この場合、HTMLの生成に一定の時間がかかるため高速なWebサイトの構築が容易ではないこと、サーバへの負荷によりスケーラブルなWebサイトの構築も容易でないことなどが課題です。 JAMスタックでは、HTMLの生成はWebサイトの生成時に行うことで、基本的には静的なWebサイトと同様の高速
Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 Discord Channel: #track1-8-spa-security
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東京から1泊2日で行けるおすすめ温泉チャートを作りました - いつか住みたい三軒茶屋
「何で今まで知らなかったんだ」日帰り温泉・銭湯マップ「ゆる〜と」があまりにも便利すぎて温泉通いが捗りそう！
【激安】ボロいい温泉宿→「食事はうまい＆温泉は極上…オススメあり」
レガシーおじさん、SPAを始めてみた。そして限界を知る
SPAセキュリティ入門～PHP Conference Japan 2021
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
なんでもSPAにするんじゃねぇ！という主張のその先 - console.lealog();
私の好きな温泉地10選 気がつけば繰り返しおとずれていた大好きな温泉地 - 温泉ブログ 山と温泉のきろく
攻撃して学ぶJWT【ハンズオンあり】 - Money Forward Developers Blog
セキュリティ視点からの JWT 入門 - blog of morioka12
私の好きな温泉宿10選 絶対再訪したい！極上湯の宿を10軒選びました - 温泉ブログ 山と温泉のきろく
本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった - fsubal
私たちはなぜ SPA で開発するのか / Why you choose SPA
TypeScript + React: Component patterns
フロントエンドエンジニアのためのAWSアーキテクチャ
Web フロントエンドの実装において本来の機能を損なってはいけない
htmxとは何なのか？ その背景にある思想について - Qiita
SPAセキュリティ入門
news.yahoo.co.jp
yokotashurin.com
news.goo.ne.jp
7-24blog.com
news.livedoor.com
newsdig.tbs.co.jp