Vol.208

Code readability matters by by the Guardian’s internal Digital team Jump to heading #

コードの可読性に影響するポイント Jump to heading #

可読性はソフトウェア開発において非常に重要な要素となる。この記事では、その目標を達成するためにGuardianで行っている内容について紹介する。

• コードレビュー
  • GuardianではGithubのPull Requestを使ってコードレビューを行っている
• コードを簡潔に保つ
  • YAGNIの法則
• Linterの使用を検討する
  • GuardianではJavaScript用のESLintやScala用のScalaStyleを使用している
• ドキュメンテーションとしてのテスト
  • テストがコンパイルされるたびに実行され、それがドキュメントとなる
  • Guardianでは、JavaScript用にJestとScala用にはScalaTestを使用している
• 意味のある変数名と関数名
  • 命名するときには数分考える
  • ロジックを書き直す場合には、変数名も更新が必要がないか確認する

Rendering on the Web By Jason Miller and Addy Osmani Jump to heading #

Webでのレンダリングに関して Jump to heading #

Webパフォーマンス改善のために、サーバーサイドレンダリングを検討することがあるが、どのような場面で行っていけばよいのかについては議論がある。この記事では、大枠としてレンダリングへのアプローチを深掘りし、まずどういった描画処理が考えられるのか、それぞれの特徴は何か、どういった目的をもって選択を行っていけばよいかについてのヒントを与えてくれる。

Paying tribute to the web with View Source by DHH Jump to heading #

https://m.signalvnoise.com/paying-tribute-to-the-web-with-view-source/

View SourceのあるWebに敬意を払う Jump to heading #

Webは誰でも簡単にソースコードを見ることができる。DHH氏がWeb開発のキャリアを出発させたのは、Webサイトのソースコード表示(View Source)であるという。View Sourceは他の開発者がソースコードを理解し勉強することに非常に有用である。彼のBasecampにおいても、HTMLは単純であり、CSSはBEMで記載され、人が読みやすいコードであることを保ち続ける努力を続けている。例え、バンドル化されたソースコードであっても、プロダクションにソースマップを公開し、他の開発者の学習を手助けすることがWebというプラットフォームを成長させるために必要ではないかと訴える。

What can I do for the web? One answer: Protect and promote View Source.

Designing for the web ought to mean making HTML and CSS by DHH Jump to heading #

Webをデザインするということは、HTMLとCSS作るということを意味するべき。彼がBasecampの業務を行う中で感じた、Webデザインについての考察。Basecampでは、Webデザイナーは全員が、HTML、CSS、そして必要であれば、JavaScriptやRailsのコードを書き、初回の実装を行っている。Webデザイナは、90年代後半のようにPhotoshopと格闘するのではなく、自分のデザインを動かし、変更でき、デプロイできるようになるのが、現代のWebをデザインするために必要ではないかと問う。

Understanding Service Workers and Caching Strategies Jump to heading #

サービスワーカーについての基本を紹介し、特にキャッシング戦略について深掘りする。

• Cache only
  • 全てのリクエストがキャッシュに送られる
  • サイトがStatic Assetsのみの場合に有効
• Network only
  • Service Workerがリクエストをネットワークに送る
  • オフライン関係の実装が必要ない場合に有効
• Cache falling back to network
  • リクエストが成功しなかった場合に、Service Workerがキャシュを要求する
  • オフラインファーストのアプリを作成している場合に有効
• Network falling back to cache
  • まずネットワークに要求し、成功した場合にはキャッシュに送る
  • キャッシュされているデータよりも、最新のデータの優先度が高い場合に有効
• Generic fallback
  • まずキャッシュに要求し、失敗した場合にはネットワークに要求、それでも失敗した場合には、フォールバックを表示する

In Brief Jump to heading #

• React as a UI Runtime by Dan Abramov: Reactのプログラミングモデルについての解説。UIライブラリとしての使い方ではなく、より深くReactを理解するための記事
• Writing Maintainable and Readable Javascript: Design Patterns by JavaScript January: JavaScriptデザインパターンの紹介。実際のコードを交えながら解説する
• CSS Position Sticky - How It Really Works! by Elad Shechter: CSSの position: stickyについての解説。現在はあまり使われることはないが、ブラウザサポートも整ってきており、スティッキーヘッダー・フッターを実装する際には採用を検討していきたい
• Working with GraphQL using Vanilla JS by Shlok Desai: Vanilla JSでGraphQLクライアントを実装する
• Object.assign vs Object Spread in Node.js by Valeri Karpov: Object.assign とスプレッド構文の比較。どちらも同じ機能を有しているが、スプレッド構文の方がパフォーマンスの観点で利点があることを指摘する