技術メモ

フロントエンド寄り

パッケージガーデニング

• 毎週のように依存パッケージを上げ続ける努力 - VOYAGE GROUP techlog

HTML

• HTML Standard
  • (参考) W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス

HTMLテンプレートエンジン, AltCSS, AltJS

• 【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSのまとめ（随時更新） - Qiita
• フロント周り 必要となる知識を広く浅く学ぶ03 - Qiita

HTMLテンプレートエンジン

• Pug: Getting Started – Pug
• EJS: EJS -- Embedded JavaScript templates

PHPをHTML内で実行

• (参考): htaccessに3行足すだけ！『.html』内でPHPを実行する方法！ | WEB改善事例集(GMOソリューションパートナー株式会社)
• (参考): .htaccessを使ってHTMLファイルでPHPを実行できるようにする | オウンドメディア | 大阪市天王寺区ホームページ制作 | 合同会社デザインサプライ-DesignSupply. LLC-

JSX

• JSX の導入 – React

css

cssフレームワーク

• Bootstrap:
  • はじめに · Bootstrap v5.0
  • Bootstrap5設置ガイド
  • Honoka: Honoka - 日本語も美しく表示できるBootstrapテーマ
    • Umi: Umi - 日本語も美しく表示できるBootstrapテーマ
    • Nico: Nico - "Honoka"を元にした、日本語も美しく表示できるBootstrapテーマ
    • Rin: Rin - 日本語も美しく表示できるBootstrapテーマ
    • Frandre: Frandre - 日本語も美しく表示できるBootstrapテーマ
    • Kochiya: Kochiya - 日本語も美しく表示できるBootstrapテーマ
• Foundation: The most advanced responsive front-end framework in the world. | Foundation
• Bulma: Bulma: Free, open source, and modern CSS framework based on Flexbox

cssルール

• BEM: 一番詳しいCSS設計規則BEMのマニュアル - Qiita
• OOCSS: 知っておきたいCSS設計法 | 第1回 OOCSSの基本 | CodeGrid
• SMACSS: SMACSSによるCSSの設計 | 前編 ベースとレイアウト | CodeGrid
• FLOCSS: GitHub - hiloki/flocss: CSS organization methodology.

スタイルガイド

• (参考) Web制作をぐっと効率化する「スタイルガイド」の作り方とは？ – WPJ
• frontote: GitHub - sable-virt/frontnote: Node.jsを使ったスタイルガイドジェネレーター

AltCSS

• Scss(Sass): Sass: Syntactically Awesome Style Sheets

next css

• (参考) SassからCSS Modules、そしてstyled-componentsに乗り換えた話｜食べログ フロントエンドエンジニアブログ｜note
• JSS: JSS
• css modules: GitHub - css-modules/css-modules: Documentation about css-modules
• styled-components: styled-components
• PostCSS: PostCSS - a tool for transforming CSS with JavaScript
• Tailwind CSS: Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
  • (参考) Tailwind CSSという風と共に走るフロントエンド開発 - メドピア開発者ブログ
  • (参考) TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~ - Qiita
  • (参考) ゆうてん🖖さんはTwitterを使っています 「すげー。ここまで来たらTailwind使う理由になるわー。」 / Twitter
• Stitches: Stitches — CSS-in-JS with near-zero runtime
• vanilla-extract: vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
• (参考): azuさんはTwitterを使っています 「ShopifyのDesign SystemであるPolarisにおけるCSSフレームワークの選定についての議論。 Sassを置き換えるためにTailwind CSS、CSS Modules、Stitches、vanilla-extractを比較している。 vanilla-extractを有力候補として選択している。 "Replacing Sass · Discussion #…" https://t.co/p4P5wQDss1」 / Twitter

JavaScript

AltJS

• TypeScript: TypeScript: JavaScript With Syntax For Types.

タスクランナー

• Gulp: gulp.js
• npm scripts:
  • (参考) Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
  • (参考) Web制作向けnpm-scripts - Qiita
• Codekit (Mac用, 有償): CodeKit - THE Mac App for Web Developers

モジュールバンドラ

• Webpack: webpack
• rollup.js: rollup.js
• Parcel: Parcel
• その他:
  • JSer.infoさんはTwitterを使っています 「"Comparing the New Generation of Build Tools | CSS-Tricks" https://t.co/v0cXG8aHM0 → https://t.co/UlpLHWHdgk esbuild, Snowpack, Vite, wmrを比較した記事。 それぞれのツールの特徴や使い方、サポートしているファイル、production buildなどについて比較している。」 / Twitter
  • Snowpack: Snowpack
  • esbuild: esbuild - An extremely fast JavaScript bundler
  • Vite: Home | Vite
  • wmr: WMR: Tiny all-in-one development tool for modern web apps.

JSライブラリ

• jQuery: jQuery
• スライドショー:
  • slick: slick - the last carousel you'll ever need
  • Swiper: Swiper - The Most Modern Mobile Touch Slider

Greensock

• Greensock gsap: GSAP - GreenSock

PJAX

• Barba.js: barba.js

PixiJS

• PixiJS: PixiJS

D3.js

• D3.js: D3.js - Data-Driven Documents

カウントアップ

• (参考) 数字のカウントアップ・ダウン | 動くWebデザインアイディア帳
• (参考) javascript基礎 特定の数値までのカウントアップを実装する方法 – How to implement a count-up to the target num. | Stronghold Archive

パララックス

• (参考) 【まとめ】パララックスを実装するためのプラグイン6選｜株式会社ParaLux - 新しいあり方を創造する
• (参考) 【パララックスとは？】 Rellax.jsの使い方！｜株式会社ParaLux - 新しいあり方を創造する

JSフレームワーク

• React: React – ユーザインターフェース構築のための JavaScript ライブラリ
• Vue: Vue.js

SSR (サーバサイドレンダリング)

• Next.js (React): Next.js by Vercel - The React Framework
• Nuxt.js (Vue): Nuxt.js - ユニバーサル Vue.js アプリケーション

SSG (静的サイトジェネレータ)

• (参考): Static Site Generators - Top Open Source SSGs | Jamstack
• Gatsby.js (React): Front End Framework With The Speed To Delight | Gatsby | Gatsby
  • GrapQL:
    • GraphQL | A query language for your API
    • (参考) GraphQL とは - 概要、特徴、メリット・デメリット | Red Hat
• React Static (React): GitHub - react-static/react-static: ⚛️ 🚀 A progressive static site generator for React.
• Gridsome (Vue): Modern Site Generator for Vue.js - Gridsome
• Hugo (Go): The world’s fastest framework for building websites | Hugo
• Hexo (Node.js): Hexo
• MetalSmith (Node.js): Metalsmith - simple, pluggable static site generator
• Jekyll (Ruby): Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs
• Middleman (Ruby): Middleman: Hand-crafted frontend development

JAMStack

• (参考): For fast and secure sites | Jamstack
• (参考): Jamstackって何なの？何がいいの？ - Qiita
• (参考): Jamstackとは？ | 株式会社ピクセルグリッド

Headless CMS

• Contentful (SaaS): API-first content platform to build digital experiences | Contentful
• Strapi (SaaS): Strapi - Open source Node.js Headless CMS 🚀
• microCMS (SaaS): microCMS｜APIベースの日本製ヘッドレスCMS
• Cockpit (PHP + SQLite (or MongoDB): Cockpit
  • Requirements
• WordPress REST API (PHP + MySQL): REST API Handbook | WordPress Developer Resources

検索

JSでの検索

• List.js: Search, sort, filters, flexibility to tables, list and more! - List.js

外部サービス

• Googleカスタム検索:
  • (参考) Google Site Searchが終了へ、サイト内検索は2018年までに他のサービスに乗り換えを | 初代編集長ブログ―安田英久 | Web担当者Forum
  • (参考) Googleサイト内検索有料版（Google Site Search）が2018年終了 ｜ WEB上手
    • 企業向け有償の Google Site Search は終了したが、無料のGoogleカスタム検索エンジンは継続
• Algolia: Site Search & Discovery powered by AI | Algolia

自前

• WordPress
• 全文検索:
  • Namazu: 全文検索システム Namazu
    • MeCab: MeCab を使う
  • Elastic Search: Elasticsearch | オフィシャルの分散型検索/分析エンジン | Elastic | Elastic
  • Solr: Welcome to Apache Solr - Apache Solr
    • (参考): Apache Solr - Wikipedia
  • Groonga: Groonga - カラムストア機能付き全文検索エンジン

VRT (ビジュアルリグレッションテスト)

• Cypress: Visual Testing | Cypress Documentation
• reg-suit: GitHub - reg-viz/reg-suit: Visual Regression Testing tool
• BackstopJS: GitHub - garris/BackstopJS: Catch CSS curve balls.

バックエンド寄り

CMS

• WordPress: ブログから大規模サイトまで作れる CMS | WordPress.org 日本語
• baserCMS: baserCMS - 国産オープンソース！フリー（無料）でコンテンツ管理に強いCMS
  • (PHPフレームワーク) CakePHP
• EvolutionCMS: Home / Evolution CMS
  • (PHPフレームワーク) Laravel
• ConcreteCMS: Concrete CMS - 最高のウェブサイト運営を実現するCMS 【日本語公式サイト】
  • (PHPフレームワーク) Synfony

PHPフレームワーク

• CakePHP: CakePHP - Build fast, grow solid | PHPフレームワーク
• Laravel: Laravel - The PHP Framework For Web Artisans
• Symfony: Symfony, High Performance PHP Framework for Web Development

アーキテクチャ

• MVC: (参考) MVC（Model-View-Controller）とは - IT用語辞典 e-Words
• ドメイン駆動設計: (参考) ドメイン駆動設計 - Wikipedia

概念

• O/Rマッパー: (参考) O/Rマッピング（O/Rマッパー）とは - IT用語辞典 e-Words
• DI:
  • (参考) DI・DIコンテナ、ちゃんと理解出来てる・・？ - Qiita
  • (参考) DIコンテナ（Dependency Injection container）とは - IT用語辞典 e-Words

SNS

Twitter

• Twitter API: ドキュメントホーム | Docs | Twitter Developer

認証

• OAuth:
  • (参考) 一番分かりやすい OAuth の説明 - Qiita
  • (参考) OAuthとは？その仕組みを徹底解説〜便利と危険は裏返し〜｜テクの雑学｜TDK Techno Magazine
• TwitterOAuth (PHP): TwitterOAuth PHP Library for the Twitter REST API

reCAPTCHA

• v2: reCAPTCHA v2  |  Google Developers
• v3: reCAPTCHA v3  |  Google Developers

CORS

• オリジン間リソース共有 (CORS) - HTTP | MDN

サーバ寄り

htaccess

• (参考) htaccessとは？