図解 CSR, SSR, SG(SSG), ISR
何周も遅れてしまっているのですが、フロントエンド周りの勉強に取り組んでいます。色々と遠回りをしつつ、Next.jsに流れ着きました。SSRとかSSGとか分かりにくい言葉が多くて難しそうに感じたので、自分なりの理解を図にしてみました。 Server Side Application サーバーはリクエストを受けると動的にHTML文書を生成して返却する。 1993年にCGIが登場した時から基本的に同じ仕組みであり、今でも主要なアーキテクチャです。 Ajax クライアント（ブラウザ）側のJavaScriptでサーバーから追加データを取得し、DOM操作でページの内容を書き換える。 ページ遷移することなくコンテンツを書き換えることができる手法です。このアーキテクチャが登場してから、Webアプリケーションで実現できるUIや表現の幅が飛躍的に広がりました。 CSR (Client Side Renderi
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
Web Developer Roadmap 2018が2019年版になっていたので比較してみる - Qiita
偉大なるリポジトリ 昨年に引き続き、Webエンジニアのためのロードマップが2019年版へ更新されています。2018年の間に大きく様変わりしていて、他の投稿者による翻訳記事がQiitaにもあがっているので詳しくはそちらをご覧ください。 この記事では2018年版と2019年版を比較して、技術トレンドの推移をそれなりに把握する事を目的としています。また、技術選択の際に迷った時も指針として活用していただければ幸いです。前回書いた記事はこちら 内容が充実しすぎていることもあり、すべてに触れたくても触れられません。一部ピックアップをしながら進めていきます。 ではさっそく見ていきましょう！疲れるので今回はあまりふざけません。 🚀Introduction 2018 2019 Choose your path に変化はないですが、左右の四角に変化があります。2019年版にはlicenseやSOLID,KI
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
SAFE
Productive Develop full stack web applications entirely in F#. Benefit from the power that F# and functional programming brings both on the server with .NET Core but also in the browser. Share types and functions seamlessly - no more manual mapping between browser and server languages!
はてな教科書 JavaScript編
はてな教科書JavaScript編 講義の目的 JavaScriptについて、自分で調べて学習するための基礎知識を身につける リファレンスをひけば良い部分は覚えない 話の流れ JavaScriptの言語コア部分 構文とか WebとJSにまつわるあれこれ DOM 非同期プログラミング Ajax jQuery フロントエンド設計 Node.js 駆け足で進めるので、速すぎるなら遠慮せず言ってください！ LICENSE この作品は クリエイティブ・コモンズ表示 - 非営利 - 継承2.1日本ライセンス の下に提供されています。
GitHub - hatena/Hatena-Textbook: はてな研修用教科書
Hatena-Textbook はてな教科書は、はてなのエンジニアとして最低限必要とされる技術を身につけるための教科書です。 Web開発における重要なトピックを順番に学びながら、課題をといていくことで、Webアプリケーションをひととおり構築できるようになります。 実装言語としてPerlとScalaのどちらを選ぶことができます。 トピックごとに学びたい言語の方の教科書を読み進めてください。 目次 プログラミングの基礎 Perlによるプログラミングの基礎 Scalaによるプログラミングの基礎 データベースの基礎 Perlによるデータベースプログラミング Scalaによるデータベースプログラミング Web開発の基礎 PerlによるWebアプリケーション開発 ScalaによるWebアプリケーション開発 Webフロントエンド開発 はてな教科書JavaScript編 hatena/Hatena-Tex
AWSで避けるべき5つの間違い | POSTD
今年からAWS（Amazon Web Services）クラウドコンサルタントとして、中小規模のAWSデプロイの相談を受けています。その多くは典型的なWebアプリケーションです。ここで、ぜひ避けたい5つのよくある間違いを紹介します。 インフラストラクチャを手動で管理する。 Auto Scaling グループを使わない。 CloudWatchのメトリクスを分析しない。 Trusted Advisorを無視する。 仮想マシンを活用しない。 典型的なWebアプリケーションにおける間違いを防ぎたい人は、次に進んでください。 典型的なWebアプリケーション 典型的なWebアプリケーションは最低限次の要素で構成されているものを指します。 ロードバランサ スケーラブルなWebバックエンド データベース そしてこのアプリケーションは、次の図のような仕組みを持っています。 注釈：（左から）DNS、CDN、静
初心者Webアプリケーション開発者がチェックすべき情報源2015 - ハニーポッターの部屋
毎年恒例の「初心者Webアプリケーション開発者がチェックすべき情報源」を集めているので、皆さんにもご紹介。 去年に引き続き、最低限のものに絞ってみた。 上から重要な順。★の付いている「重点」がとりあえず読んどけ、の必須。 必須のポイントは、短期間で大雑把に網羅的にポイントが整理されているものを選択。 書籍としては、徳丸本「体系的に学ぶ 安全なWebアプリケーションの作り方」、「めんどうくさいWebセキュリティ」と「実践 Fiddler」を掲載したけど，他に良い本があれば情報プリーズ。 この情報もあったほうが良いんじゃね？という情報も大歓迎。 ■重点 ★Webサイト構築 安全なウェブサイトの作り方 http://www.ipa.go.jp/security/vuln/websecurity.html 安定の第7版２刷。Web開発の委託先仕様書の代わりにも使える。 セキュリティ実装 チェックリ
いまさら聞けない、Webアプリケーションの常識
いまさら聞けない、Webアプリケーションの常識：Webアプリの常識をJSPとStrutsで身につける（1）（1/2 ページ） Webアプリケーションの“常識”を知ってますか？ 6月になり、Javaの文法などを一通り覚え、JSP／サーブレット＋StrutsのWebアプリケーション開発をやることになった新人プログラマーの皆さん！ Webの知識がまったくなく、何から学べばいいか分からず焦っている……。なんてことはないでしょうか？ 本連載は、JSP／サーブレット＋StrutsのWebアプリケーション開発を通じて、Java言語以外（PHPやASP.NET、Ruby on Railsなど）の開発にも通用するWebアプリケーション全般の広い知識・常識を身に付けるための連載です。 Webアプリケーションの開発プロジェクトに当たり前のようにアサインされたものの、「Webアプリケーションの基礎知識なんて、いま
hifive - HTML5企業Webシステムのための開発プラットフォーム
これからあなたが開発する「Webアプリケーション」について、その基本的な仕組みを学びましょう。 Webアプリケーションとは？Webアプリケーションクライアントを記述するための言語(1) HTML (エイチティーエムエル：HyperText Markup Language)タグは必ず包含関係にする属性の記述HTML文書の動的な変更とDOM (ドム／ドキュメントオブジェクトモデル：Document Object Model)HTML文書を木構造として扱う表示内容を変える＝DOMを操作して構造を変える(2) CSS (シーエスエス：Cascading Style Sheets)セレクタ：スタイルを適用する対象の選択スタイル宣言：具体的な設定内容(3) JavaScript (ジャバスクリプト)HTML, CSS, JavaScriptの役割分担その他、よく使われる技術用語Ajax (エイジャック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Building a Website with C++
GitHub - SAFE-Stack/SAFE-BookStore: Working sample of a SAFE-Stack project with hot reloading
マイクロソフト、OfficeのUIフレームワークを「Office UI Fabric」としてオープンソースで公開