WebDevelop » 履歴 » リビジョン 2
リビジョン 1 (kanata, 2025/04/13 15:58) → リビジョン 2/3 (kanata, 2025/04/13 15:58)
# WebDevelop
{{rawhtml(<canvas id="map"></canvas><script src="/javascripts/pagemap.min.js"></script><script>pagemap(document.querySelector("#map"));</script>)}}
{{toc}}
# FrameWork
## Article
POSTD - Javaのマイクロフレームワーク ― この新トレンドは見逃せない
http://postd.cc/java-micro-frameworks-the-new-trend-you-cant-ignore/
3つのフレームワークで学ぶエンタープライズJava開発入門（3）：いまさら聞けないRESTの基礎知識、JAX-RSを使ったREST APIの作り方と使い方
http://www.atmarkit.co.jp/ait/articles/1604/18/news020.html
GitHub - takahashiakira - Technology for Web Developers
https://github.com/takahashiakira/tech_for_web/wiki
>Webエンジニアリングに関するトピックで、フロントエンドをメインにバックエンドやインフラ周りまで、個人的にまとめたドキュメントを公開してます。
Qiita - JavaScriptフレームワーク選定の議論
http://qiita.com/azu/items/2921f62127b8d3a1aa03
The best front-end hacking cheatsheets — all in one place.
https://medium.freecodecamp.org/modern-frontend-hacking-cheatsheets-df9c2566c72a
## React
React Cheat Sheet
http://reactcheatsheet.com/
POSTD - 生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず
http://postd.cc/learn-raw-react-no-jsx-flux-es6-webpack/
30分間React入門「いいねボタン」作成チュートリアル
http://c16e.com/1510161700/
yuumi3のお仕事日記 - サーバーサイドプログラマーのためのReact.js 入門 2. 開発環境の構築の続き
http://yuumi3.hatenablog.com/entry/2016/02/15/152357
# Chrome Developper Tool
## Article
最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
http://commte.net/blog/archives/5882
chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法
http://buchineko.website/chrome-devtools-cording/
かちびと.net - Chromeの設定画面等を表示するコマンドをまとめた・「CHROME://COMMANDS」
http://kachibito.net/useful-resource/chrome-commands http://www.chromecommands.com/
ShikousakuGo - リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました
http://daiiz.hatenablog.com/entry/2016/04/06/235000
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本
https://employment.en-japan.com/engineerhub/entry/2017/05/30/110000
Qiita - Chrome デベロッパーツールの Console を使いこなす
https://qiita.com/howdy39/items/c22c2cfafab88fa73d15
Qiita - 驚愕！その先に見えたdeveloper tool
https://qiita.com/ossun/items/0025a72056123e491082
chrome devtools の tips N連発
https://scrapbox.io/mizdra/chrome_devtools_%E3%81%AE_tips_N%E9%80%A3%E7%99%BA
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ
https://blog.jxck.io/entries/2023-11-05/reload-and-cache.html
ブラウザ上でデバッグするときに使えるテクニック
https://gigazine.net/news/20231118-browser-debugging-tricks/
# Headless Chrome
## Article
Qiita - Dockerを使ってHeadless Chromeを動かしてみる
http://qiita.com/dd511805/items/dfe03c5486bf1421875a
# Web制作者向けのオンラインツール
## Article
Web便利ツール@ツールタロウ
http://tool-taro.com/
Dans Tools
http://www.danstools.com/
paiza開発日誌 - Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説！
http://paiza.hatenablog.com/entry/2017/01/06/Web%E4%B8%8A%E3%81%8B%E3%82%89%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%9C%A7%E7%B8%AE%E3%83%BB%E6%95%B4%E5%BD%A2%E3%83%BB%E5%A4%89%E6%8F%9B%E3%81%AA%E3%81%A9190%E4%BB%A5%E4%B8%8A
Unused CSS - scan your website for unused CSS selectors
https://www.jitbit.com/unusedcss/
>URLを入力するだけで、使われてないCSSを検出してくれるサイト
A New Code Editor For The Web
https://scotch.io/bar-talk/a-new-code-editor-for-the-web
>ちょこっと見た目と動作を検証するのに使えそう
CoderTrick - さまざまなソースコードを別の言語に変換できるWebエディタ
https://codertrick.com/
HTMLのタグ内に含めて良いタグかどうかを教えてくれる、HTMLタグのネスト可否チェックツール・「Can I Include」
http://kachibito.net/useful-resource/can-i-include https://caninclude.glitch.me/
お客さんの端末でバグが出た際「OS／ブラウザ教えて」でなく「このURLの結果をコピペして」で網羅的に相手の環境を把握できます。
https://env.mount.jp/ https://twitter.com/kenjiokabe/status/1495572596825509889
1Tools - さまざまなツール
https://1tools.co
Web 開発者にとって必須の 100 の無料リソース
https://qiita.com/violetalexander120/items/22f43bd74209b84303a1
# Other tools
Insomnia - So you can finally GET some REST
https://insomnia.rest/download/
1buran/rHttp
https://github.com/1buran/rHttp
>TUIでHTTPリクエストの調整（メソッド、パス、QueryString、リクエストヘッダー、POSTデータなど）して送信できるツール
# Security
非機能要件のセキュリティのこと
## Document
GitHub - Webシステム／Webアプリケーションセキュリティ要件書 2.0
https://github.com/ueno1000/secreq
Webサービスにおけるファイルアップロード機能の仕様パターンとセキュリティ観点
https://blog.flatt.tech/entry/file_upload_security
開発者が知っておきたい「XSSの発生原理以外」の話（XSSって実際にアラート以外になにができるの？）
https://blog.flatt.tech/entry/xss_risk
XSSの脅威を考察する
https://techblog.securesky-tech.com/entry/20220308/
## Tools
nikto 2.1.5 の利用方法
http://www.checksite.jp/nikto-215/
# Performance
非機能要件の性能のこと
## Article
POSTD - サーバの負荷テストのための、何百万ものHTTPリクエストを発生させる方法
http://postd.cc/how-to-generate-millions-of-http-requests/
> Tsung が一番良いということでFA
RAPID START - 簡単・手軽にWEBサイトを高速化できるCDNサービス
https://cdn.tokyo/
フロントエンドのパフォーマンスチューニングを俯瞰する
https://numb86-tech.hatenablog.com/entry/2021/05/05/224611
手軽に負荷テストができるツール「Taurus」がスゴい
https://zenn.dev/tonchan1216/articles/11afd147ea3dd2734315
>Jmeterのラッパー
# Cache
## Article
ブラウザキャッシュの仕組みについてまとめた
https://zenn.dev/mesi/articles/e218457fc6c52e
# Misc
## Article
テストサーバーへのアップが面倒なときはngrokでローカル環境を外部公開してみよう
http://liginc.co.jp/web/programming/156484
グーグルのJavaScriptツール集大成「Google Closure Tools」
http://itpro.nikkeibp.co.jp/article/COLUMN/20091112/340473/
貳佰伍拾陸夜日記 - APIへのPUTやDELETEもブラウザから試す
http://tarao.hatenablog.com/entry/2016/02/05/141516
Push7(プッシュ通知サービス)
https://push7.jp/
paiza開発日誌 - Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！
http://paiza.hatenablog.com/entry/2016/02/09/Web%E5%88%B6%E4%BD%9C%E3%81%AE%E3%82%AF%E3%82%AA%E3%83%AA%E3%83%86%E3%82%A3%E3%82%92%E9%A3%9B%E8%BA%8D%E7%9A%84%E3%81%AB%E9%AB%98%E3%82%81%E3%82%8BJavaScript%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA10
コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット40個まとめ
http://photoshopvip.net/archives/89320
You Don't Need jQuery
http://qiita.com/tatesuke/items/b9548dd484b01b139b74
Stale-While-Revalidate ヘッダによるブラウザキャッシュの非同期更新
https://blog.jxck.io/entries/2016-04-16/stale-while-revalidate.html
Design Patterns on CodePen
http://codepen.io/patterns/
Web制作の実装や勉強に役立つ便利なチートシートのまとめ
http://coliss.com/articles/build-websites/operation/work/cheat-sheets-for-front-end-developer-201604.html
小江戸プログラム群について - Selenium等を利用した自動実行の例
https://github.com/hirokundayon/koedo
Qiita - フロントエンドにテストを導入
http://qiita.com/howdy39/items/cdd5b252096f5a2fa438
kachibito.net - スタイル変更やグラフの種類の変更も可能でExcelライクに使えるembed対応のチャート生成サービス・「Statpedia」
http://kachibito.net/useful-resource/statpedia
Qiita - そろそろ真面目に、HTMLで帳票を描く話をしようか
http://qiita.com/cognitom/items/d39d5f19054c8c8fd592
coliss - head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など
http://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html
DevDocs API Documentation - DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
http://devdocs.io/
リクルートテクノロジーズ 新人研修特別編を公開します
https://recruit-tech.co.jp/blog/2017/06/07/bootcamp2017/
TechRach - Webアプリのセッション管理とデータ保存を学ぶ#1（社内勉強会）
https://techracho.bpsinc.jp/hachi8833/2018_09_19/61260
これだけは押さえよう！住所フォームの作り方
https://blog.kenall.jp/entry/address-form-best-practice
デザイナーが抱くReact+TypeScriptの疑問を紐解き、フロントエンドに一歩近づこう
https://www.estie.jp/blog/entry/2023/04/10/123339
Webサービス公開前のチェックリスト
https://zenn.dev/catnose99/articles/547cbf57e5ad28