TatamiGalaxyBlog

独り言

Java 学習メモ

Javaの概要

https://qiita.com/KenyaSaitoh/items/22f32b9d7aea5844d77

JavaとTypeScriptの比較

なぜ僕たちはサーバレスでJavaを諦めTypescriptを採用したか #AWS - Qiita

Springとは/Spring Bootとの違い

https://codezine.jp/article/detail/11310

  •  

0513 メモ

calc(var(--example-name) * 100)

0511メモ

HTTPレスポンスのcontent-dispositionからファイル名を取得する

AxiosResponseHeaders['content-disposition']

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Disposition

  • マルチパート
    • ヘッダ部にあるContent-Typeヘッダの値「multipart/alternative」がマルチパートメール（ボディ部が複数のパートに分けられている）であることを表しています。
    • 各パートは「boundary」で指定された文字列で区切られ
    • 各パート内のContent-Typeの値によりテキストパート（text/plain）とHTMLパート（text/html）を識別できます
    • このような内容のメールを受信したメーラは設定や機能に応じてテキストパートもしくはHTMLパートを選択的に表示します。
    • https://sendgrid.kke.co.jp/blog/?p=8262
  • MIME メッセージ
    • TCP/IPネットワーク上でやり取りする電子メールで、ASCII英数字以外のデータ（各国語の文字、添付ファイルなど）を取り扱うことができるようにする拡張仕様。
    • また、画像や音声、動画、コンピュータプログラムの実行ファイル、HTML文書、オフィスソフトの文書ファイルなど、テキスト（文字）以外のバイナリデータを含む様々な形式のデータ
    • マルチパートやメールヘッダの形式があり、HTTPにも流用されている
    • https://e-words.jp/w/MIME.html
  • Content-Disposition: 
    • attachmentの場合、ダウンロードすべきであることを示します。
      • filename
        • attachmentと併用すると、「名前を付けて保存」ダイアログの既定のファイル名として使用されます。
        • 例：Content-Disposition: attachment; filename="filename.jpg"
      • filename*
    • マルチパートの場合は常にform-data

No.1 Reactアプリをつくる。

事前知識

crate react app でreactアプリの雛形をつくることができる。
上記はfacebookが提供しておりtypescriptでの構築も可能。

調査

create react app(以下CRA)はなにをしてくれている？

参考記事①

create-react-app が裏で何をやっているか理解する - Qiita
npm run ejectを行いファイルを比較している。
npm run ejectってなにいい？？

npm run eject

引用
npm run eject で create-react-app はアプリケーションの長寿を保証する - valid,invalid

  • create-react-app の裏側で react-script を介して使われている諸々のツール・スクリプトをコピーしたり、依存関係を package.json に書き込んだりして、自分で用意したのと同じ状態にするコマンド。実行以降、好きにカスタマイズし放題となる。

  • これがいつでも出来るのでロックインを回避できる、create-react-app が死んでもアプリケーション側で自前でこれらのツールを制御することが出来る。 つまり、create-react-app はこのツールよりも、アプリケーションの方が長いライフサイクルを持てることを保証するということ。

わかったこと
→ 様々な依存関係をいい感じに設定してくれるもの。ロックインのデメリットもあるが回避可能なコマンドが用意されている。

参考記事②(WebpackやBabelってなに)

Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita

CRAが出るまで(2016/07/22)と出たあとでの変化

アプリを作る際はWebpackやBabelなどの設定をいじる必要があり、導入障壁が高かったのですが、create-react-appを使えばそれらのステップをすっ飛ばせます。

CRAが出た背景

JSXやES6を使うにはBabelやWebpack、ESLintなどのツールが必要不可欠なので、学習コストが増加した。どのパッケージを入れればいいか悩んだり、依存管理が面倒になる

派生疑問

裏では何が使われている？(公開当時)
  • webpack、webpack-dev-server、html-webpack-plugin、style-loader
  • Babel (ES6/ES2015)
  • Autoprefixer
  • ESLint
(公開時点で)入ってないもの

わかったこと
→ JSXやES6からの手法として加わったconstやアロー構文に対応するために、WebpackやBabelがReactでも必要だったが個人で行うには参入難易度が高くなっていた。それらの問題を解決するべきCRAが誕生し、全てをいい感じにしてくれる。

参考記事③(SSG/SSRってなに)

Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳
内容が難しいかつ分量が多いので、断片的にしか読めていません、、、 ただ今後のReact、CRAについて詳しくまとめられているようだったので頑張って全部読もう！(To 自分)

CRAが出る以前

CRAをリリースする以前は自分で一連のツールをインストールして(中略)JSXを使うための正しいプリセットの設定や開発環境と本番環境で異なる設定、アセットのキャッシュのための正しい設定、linterの設定などがありました。

当初のCRAの目的
  • 設定なしで新規のReactプロジェクトを始めるための簡単な方法を提供する
  • コンパイル関連の依存関係を統合し、簡単にアップデートできるようにする
  • Reactチームがツールのアップデートをできるだけ広く展開できるようにする(例えば、Fast RefreshやHooksのlintルール)
CRAの問題
  • 代替品より遅い(viteとかのこと？)
    • 次世代バンドルツールについて
      • Turbopack、Vite
      • こちらも回り道がすぎるので調査は略。簡単にwebpackよりめちゃくちゃ早い
  • 定番のツールをサポートしていない

関連参考記事(引用)
脱 create-react-app! webpackでReact ×TypeScrip開発環境構築からHello World!まで

  • 重要な設定部分がブラックボックス化してしまう: 本来しっかりと理解して運用すべきであるバンドルの設定の箇所が見えなくなり、カスタマイズ等がやりづらい
  • 不必要なdependenciesが生まれる(バンドルサイズが膨らむ)
  • 依存関係の問題で新しい機能(新しいverがサポートされていない)が使えない。

分かったこと
当初の目的以外の様々な問題（動作の軽さ・ツールのサポート）がCRAに生じてきている。ただ、webpackなどの設定に頭を使わずReactを使えう分にはとても優秀である。CRAで困ったら他の候補について調べるくらいで良いのかも、、、ただCRAに生じている問題点を解消するために？それらを中心に？新たな開発ツールが出てきている。

派生疑問
記事に度々出てきていた単語が分からなかったので、、

  • SSG/SSRってなに
    参考記事
    Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する - Qiita
    とても丁寧に書かれている記事のため、ほとんどそのまま引用させていただいています。ただ、こちらも量が多く内容が難解なのでかいつまむ程度読みました、、

    • SSR(Server Side Rendering)、CSR(Client Side Rendering)
      • JavaScript の最も素朴な使い方は、HTML ファイルの中でscriptタグの中に JavaScript のコードを記述して、ブラウザ上で JavaScript が動作させること
      • (そのため？)React や Vue.js などの JavaScript ライブラリやフレームワークも基本的にはクライアントサイドでのレンダリングを行うのは納得できる話
      • CSRの場合、ユーザが使っているデバイスに依存するためJSの容量が膨大になるほどレンダリングの時間が長くなる可能性がある。すなわちサーバーサイドレンダリングを採用すれば、JavaScript を大量にクライアントに送信するという問題は回避できる。
      • React でサーバーサイドレンダリングを行えるフレームワークが Next.js
      • ただ、SSRであってもオーバーヘッドが発生する。そこで脚光を浴びているのが静的サイト生成(SSG)。
    • SSG (Static Site Generation)
      • クライアント側で処理を行う CSR も、サーバー側で処理を行う SSR も、ユーザーからのリクエストに応じてその場でレンダリング処理を行うことが速度を下げてしまう主要な原因のひとつだった。
      • SSGの発想:あらかじめレンダリングを行なっておいて、ユーザーからのリクエストに対して、すでに構築済みの HTML を返却するだけという形を取れば高速な応答を実現できるはず
      • SSG の真の力を引き出すためには、その構築済みの HTML を都度アプリケーション・サーバーから返却するのではなく、CDN に HTML ファイルのキャッシュを配置しておき、各ユーザーに近い CDN からそのキャッシュを返す、という方法を取ることが有効
        • CDN（Contents Delivery Network）
        • 参考サイト
          CDNとは？ ～ノンエンジニア向けにわかりやすく解説～ - Ｊストリーム
          • インターネットコンテンツを高速配信するために連携する地理的に分散されたサーバー
          • CDNは提供されたコンテンツをキャッシュ（コピー）して保持し、コンテンツの閲覧時にサーバーにかかるはずだったアクセス負荷を代わりに受け止めコンテンツを提供する。
      • アプリケーションをビルドするタイミングでデータ取得を行う。そのためユーザーからリクエストがあったタイミングでは、データは取得済み。
    • CSR(クライアントサイドレンダリング)再考
      • 取得したデータをクライアント側でキャッシュするReactライブラリについて
      • SWR(stale-while-revalidate)、react-query
        • 回り道がすぎるのでこの違いには触れない。
    • SSGとCSRの使い分け(簡単に)
      • 結果整合性（最新ではないデータが表示されることを許容する）でじゅうぶんである場合はインクリメンタル静的再生成（Next.jsの機能(SSG側)）で対応すればよい
      • 強整合性（つねに最新のデータが表示されてほしい）を求める場合は、都度のサーバーサイドレンダリングあるいは SWR 等（CSR側）を用いたクライアントサイドでのデータ取得を行う。

公式ドキュメントを読む

https://github.com/facebook/create-react-app

CRA以外のreactアプリの構築方法

Babel、webpackを自力で導入する。

参考サイト

webpackからviteなどに移行する。

参考サイト

今回色々調べたたが、
今回学ぶ主題としているのはReactの基礎的な構文や触れて学ぶことなので、CRAで行う。またCRAで作成したプロジェクトをyarn ejectやreact-app-rewiredにより拡張しviteなどに移行できるみたいなので、今後の課題として行いたいと思う。

構築(今回はCRA)

myPCの環境の確認とコマンドの確認

構築

さいごに

追記
State of JavaScript 2022: フロントエンドフレームワーク

No.0 ブログ作成サービスを決める

目次

どんなブログ作成サービスがあるのか

打ち消し線の有無は両サイトに記載のあるかどうか。

参考URL : ブログを作成におすすめなサービスは？選び方とともにご紹介│教えて！レンタルサーバーのこと - ロリポップ！レンタルサーバー

主要7選

  • WordPress【本気でブログ運営したい人向け】
  • はてなブログ【初期アクセスがほしい人向け】
  • ライブドアブログ【データを大量に使う人向け】
  • Ameba【ユーザー同士の繋がりを作りたい人向け】
  • Blogger【Google運営のブログを使いたい人向け】
  • Seesaa【1アカウントで複数ブログを作りたい人向け】
  • note【クリエイター向け】

参考URL : 【どこがいい？】ブログ作成サービスのおすすめ11選！無料で使えるサービスや選び方も紹介 | 初心者のためのブログ始め方講座

主要11選

  • WordPress：本格的にブログを運用したい人向け
  • はてなブログ：初動からアクセスを期待したい人向け
  • Amebaブログ：読者と強いつながりを持ちたい人向け
  • FC2ブログ：幅広いジャンルでブログを運営したい人向け
  • 楽天ブログ：主に楽天アフィリエイトで稼ぎたい人向け
  • note：クリエイターとしてコンテンツを発信したい人向け
  • Tumblr：ブログを拡散したい人向け
  • ライブドアブログ：容量を気にせずに投稿したい人向け
  • 忍者ブログ：アクセス解析や広告運用を試したい人向け
  • Blogger：無料で強制広告のないブログを運営したい人向け
  • gooブログ：すぐにブログを立ち上げたい人向け

参考URL : 技術ブログを始めるのにおすすめな無料のブログサービス2つ - applis

技術ブログとしての候補

ブログ作成サービスの違いは何か

こちらも同様の参考URLから: ブログを作成におすすめなサービスは？選び方とともにご紹介│教えて！レンタルサーバーのこと - ロリポップ！レンタルサーバー

  • ブログの運営目的から決める
  • サービスの機能面
  • 運営リスク
  • アフィリエイトができるか
  • 強制広告があるか

参考URL: 【どこがいい？】ブログ作成サービスのおすすめ11選！無料で使えるサービスや選び方も紹介 | 初心者のためのブログ始め方講座

  • ブログ作成の目的を明確にする
  • デザイン性・カスタマイズ性
  • ブログのコミュニティ
  • アフィリエイトの可・不可
  • 強制広告の有無

他サイトもほとんど同様の内容だったため割愛

以下技術ブログについて
参考URL: 技術ブログを始めるのにおすすめな無料のブログサービス2つ - applis

  • Markdownで書けること
  • 表示速度が早いこと
  • SEOに強いこと
  • 書ける内容に制約がないこと
  • 日本語で発信しやすいこと
  • 運営の継続面で信頼できること

何を基準に決めるか

ブログ作成の背景を考えた結果

  • 手軽に始めることができる
    • サーバーの選択や、デザインのカスタマイズをしないで良い
    • 月額使用料を取られない
      • → WordPressではなく無料サービスに決定
  • ただ書くだけ(収益化はまだ考えない)
    • ただしマークダウンに慣れたいのでmdに対応していること
  • 特に書く分野は考えない
    • → 情報共有コミュニティ的側面の強いZenn、Qiitaは除外

はてなブログに決定！！！

その他

気になるブログがなんのサービスでできているか調べたいと思った
WordPressで作られたサイトかどうか調べる方法をご紹介 - wagtechblog
で紹介されている https://www.isitwp.com/にURLを貼り付けると簡単に調べることができた