サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
jsnotice.com
こんにちは!SSRを刺されと読むMizutani(@sirycity)です。CSRは腐れです。 今日はFirebaseとAstroとSSRについてです。 結論 Firebase Hosting(とFunctionsとCloud Run)ではAstroをSSRモードで動かすことができます。だが設定が本当にめんどい。 はじめに Firebase hosting(以下hosting)は静的サイトのホスティングサービスです。で、Astroは静的サイトジェネレーターです。つまりAstroで作ったWebサイトはhostingにデプロイできます。まあ当たり前ですね。 hostingのサーバーサイドレンダリング(SSR)について hostingは一部のFWについては例外的にサーバーサイドレンダリング(以下SSR)をサポートしています。サポートしてるFWは以下の通り。 FirebaseExtended/fi
2022/05/06JavaScript【JS】node_modulesはlockファイルがあれば全削除してもほぼ大丈夫だよ! こんにちは!node_modulesをGitHubにpushしたことのあるMizutani(@sirycity)です。あれやるとやばいよね。 今日はそんなnode_modulesを消す話です。物騒ですね。 結論 node_modulesはlockファイルがあれば大抵の場合は全削除しても大丈夫です。復活できます。すいません、消した結果何かがあっても責任はとれません はじめに node_modules、消したくなったことありませんか?僕はあります。ファイルサイズ大きいし。でも、消しても復活できるか不安ですよね。分かりますその気持ち。 node_modulesとは node_modulesとはnpmとかyarnを使ってインストールしてきたライブラリのコードが凝縮された空
こんにちは!雨の日はReact。Mizutani(@sirycity)です。 今日はreact(というかJSX)にCSSを適用する時に使うstyleについてです。styleは無駄にいろんな書き方があるので順番に色々見ていきましょうね 概要 一番簡単な書き方はこう。 <div style={{ color: 'red' }}>りんご</div> style={{ CSSのプロパティ: 'CSSの値' }} みたいな感じ。簡単だね。2つあるブレース{{}}はこんな感じに理解するといいと思う↓ 外側のブレースは「この中にJavaScriptを書く」って意味 内側のブレースはJavaScriptのオブジェクトを表す って感じ。 初級編 styleに書くのは基本的にはcssと一緒。だけどいくつか注意点があります。 まずひとつ目。CSSの値はクォートで囲もう。囲まないとCSSの変数扱いになるからね。こ
こんにちは!メニューは左に寄せる派のMizutani(@sirycity)です。右の方が見やすいって人も結構いるみたいだけどね。 今日はCSSで右寄せする方法をいろいろ試した結果やっぱflexが一番安定すると思うって話です。 結論 こう。このflex使うやつが一番いい気がします。 <div class="foo"> <div>みぎよせ→</div> </div> .foo { display: flex; justify-content: flex-end; } 右寄せの方法色々と所感 text-align使う方法 一番古典的な方法かな? <div class="foo"> <div>みぎよせ→</div> </div> .foo { text-align: right; } text-alignの長所はレガシーブラウザ大丈夫なとことシンプルな所でしょうか。rightって入ってるからわかり
こんにちは!エンジニアになったきっかけはブラッディ・マンデイでした。Mizutani(@sirycity)です。 今回はJavaScriptでmapとfilterを両方使いたくなった時について、4通りの書き方を比較しながら見ていきましょう。 結論 flatMapが使える環境ならflatMap一択 まとめて書きたいならreduce 見やすさ重視ならmapしてからfilter 速度重視ならfilterしてからmap はじめに 今回比較する書き方4通りはこちら。 filterしてからmapする mapしてからfilterする flatMapだけを使う reduceだけを使う 検証 mapとfilter両方使いたいケースって言われてもピンとこない?そうだよね。 例として今回は「都道府県一覧から県以外を除外し、かつ語尾に「知事」を付けて出力」みたいな処理にします。つまりこんな感じ。 const pr
こんにちは!npmはGitHub、そのGitHubはMicrosoftってことでフロントエンド周りをMSが制覇しつつある今日この頃を感じるMizutani(@sirycity)です。あとVSCodeとTypeScriptもMicrosoftだね! 今日はそんなMS帝国の一角、npmとそのライバル yarnについてです。僕は最初npmを使っていて、yarnが出たタイミングで乗り換えたけどまたnpmに戻ってきました。そんな話。 npmとyarnについて npmとyarnについてざっくり説明します。 npmはJavaScriptの公式パッケージマネージャーです。結構昔からあるやつ。yarnはJavaScriptの非公式パッケージマネージャーです。後から出てきたやつで、npmの弱点を補うようなやつです。ソフトウェアあるあるだね。 yarnの方が良い所 機能としてはyarnの方が優秀と言って良いと思
こんにちは!React、Vue、Angularの説明をする時にゼニガメ、フシギダネ、ヒトカゲに例えるとウケが良いことに気づきました。Mizutani(@sirycity)です。 今日はReactとvueそのものの比較ではなく、そいつらを使ったフレームワークとかライブラリの比較です。沢山あるから自分の確認含めてざっくり書いてきますわ。項表題をクリックすると公式に飛べるで。 初心者向け reactとかvueを初めて触る人によく勧められるフレームワーク?です。機能はそんなにないけど分かりやすいやつ。 create-react-app react初心者にぴったり。まずはここから始めよう!ってやつ。僕もフロントエンドエンジニア2年目でこれやった。 逆に言えば、これは完全に学習用にした方がいいです。ルーティングやSSR等、本番運用しようとすると欲しいものがないです。ここでreactの基本を理解したらg
※超長い。 こんにちは!Reactが好きなのではなくJSXが好きなんだと最近気づきました。Mizutani(@sirycity)です。 今回は長いです。国内でVueがReactより人気な理由について考えてみました。真剣に。 Vue「デザイナーもマークアップエンジニアもバックエンドエンジニアも簡単に始められるよ!使いやすいよ!」React「フロントエンド領域なんだからフロントエンドエンジニアが来い俺が最高のパフォーマンス出したる」 適当に分けるとこんな感じ #javascript #reactjs #vuejs #フロントエンドエンジニア — Mizutani@フロントエンドエンジニア (@sirycity) May 29, 2020 結論 本当の所は分からない。ごめん。以下仮説。 おそらくvueがeasy寄りなのが最大の理由(reactはsimple寄り)。 なぜeasyかと言うと vue
2019/09/17VueJavaScriptOthersWordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編 こんにちは!今日は先日書いたブログをNuxt.jsとContentfulベースから Hugoベースに移行した理由について書きます。 まずはWordpressじゃ駄目だった理由 ブログと始めるにあたってまず思いついたのがwordpressです。 シェアも多分WPが圧倒的です。...が、WP使う気はなかったです。 個人的な理由は...↓ DB周り詳しくない WPはMySQL使います。といってもそんな難しくないんだけど、 SQLとかRDBMSにそこまで詳しくない人が触ってるとなんかのエラーが起きたときに対応できない気がするんだよなー 遅そう(MPA) MPAだとやっぱ再描画とかに時間かかりそう(多分) WPは特にDBを基に動的にレン
このページを最初にブックマークしてみませんか?
『JavaScriptに関するお知らせ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く