サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「#文学」
fwywd.com
【Azure App Service | Node.js】GitHub Actions を利用して継続デプロイしてみよう【 トラブルガイド付】
みなさんは STUDIO というデザインツールをご存知でしょうか。 ノーコードツールというと流行りに乗っている感じがありますが、Web サイトの実装をプログラムを書くことなく公開まで行うことができます。 そんな記事を書いている私はプログラミングに触れて早 15 年。 ノーコードツールに頼ることなく Web サイトの実装ならサクッと行える私が、この度、STUDIO で Web サイトを実装してみました。 ノーコードってプログラムを書けない人のためだと思われがちですが、実はエンジニアの方が恩恵が大きいのでは...? と思うぐらい慣れると快適でした。 そんなプログラミング大好き人間から見たノーコードで実装できる STUDIO を採用した背景やメリットを紹介します。 また単に実装できるできないの話だけでなく、「ビジネスで使える使えない」といったビジネス視点での STUDIO のメリット・デメリット
記事を書き始めた人あるある「タイトルの付け方がイマイチわからない・・・」 そのお悩み、解決してみせましょうっ！
fwywd（フュード） でもバックエンドとして利用している Microsoft Azure に用意されている認証・認可機能などを兼ね備えた Azure Acitve Directory B2C (AADB2C) がめちゃくちゃ良いのです。その一方で、まだ情報が少ないからか使われていない印象を受けます。初期設定に関する情報が少ないだけでなく、実際に React や Next.js での実装にまで踏み込んでいる記事となるとほとんどありません。 そこで、今回はそんな非常に使いやすい AADB2C をみなさまに使っていただけるように、ログインの認証機能をバッチリと使っていただけるところまで紹介していきます。この記事を読んでいただいた後に、なんで今まで自前で認証や認可を実装していたのだろうと後悔間違いなしです。
これからの時代のアプリケーション開発に必須である一方、意外と知られていない機能。それが IDaaS (Identity as a Service) です。 fwywd（フュード） でもバックエンドとして利用している Microsoft Azure に用意されている認証・認可機能などを兼ね備えた IDaaS である Azure Acitve Directory B2C (AADB2C) がめちゃくちゃ良いのです。
現在募集を開始している起業家育成コースの『fwywd（フュード）in 淡路』は受講料が無料です。今回はこの『受講料無料』に込めた思い、そして、これが最終的に私の考える真の教育像に近づいていく話も含めて丁寧に背景を紹介させてください。
現在、起業家育成コース『fwywd（フュード）in 淡路』の立ち上げにあたり、これから起業を志す起業家の卵のアイディアを壁打ちする機会があります。 地方、医療、介護、教育格差など社会課題の解決を目指し、戦う姿を日々見ることができます。 さて、話は変わりますが、私は好きになれないタイプの人がいます。 １つ目は『他人の批判はするのに、自分は行動しない人』です。 そして、もう１つは『儲からないのに夢だけ語る人』です。 前者に関しては理解が容易かもしれませんが、私は後者の罪も大きいと感じています。 この『儲からないのに夢だけ語る人』が生まれやすい領域が社会課題です。 教育格差をなくすために、無料で小中学生向けにプログラミング体験会などを開くといった話をよく聞きます。 その行動自体は素晴らしいことだと感心していますが、ここで少し立ち止まって考えてみませんか。
NewsPicks の創刊編集長であり、現在 PIVOT の創業者として活動している佐々木紀彦さんが手がけた最新の一冊『起業のすすめ さよなら、サラリーマン』を紹介します。 この本は『起業を検討している人への後押し本』でもある一方で、『起業家としての一歩を歩み始めた人の How To 本』でもあります。 この本では起業をキャリアの１つに入れてみてはいかがでしょうか、と提案をしています。 ただし、佐々木さん自身も元々は起業を待ってく考えていなかったところからスタートしていたそうです。 その中で、なぜ起業家という選択をしたのかという点の説明が最初にあり、これが起業を検討している人への後押しになります。 その中で印象に残ったものが、サラリーマン化の弊害です。 日本はサラリーマンを過度に守るシステムを作ってきてしまい、それが結果的に他責主義の社会を生んでいるという話です。 日本のような資本主義社会
早速ですが、多くの起業家にとって一番最初に訪れる絶望であり、困難とはなんでしょうか。 ビジネスの知識が足りないことでしょうか、それともプロダクトの作り方がわからないことでしょうか。 これらはインターネットで検索すれば、ある程度の指針は見つかります。 一方で、インターネットで調べても、全然進まないことがあります。
株式会社キカガクの新規事業であるfwywd（フュード）が手掛ける起業家育成の fwywd in 淡路の募集がついに始まりました。 この企画では、自身が抱える社会の課題と向き合う起業家を育成および支援していく、これからの日本の成長に欠かせない取り組みだと自負しています。 今月の 11/12（金）から募集を開始しており、続々と起業を志す優秀な方からの応募をいただいています。 この起業家育成の特徴である『社会課題』に関して課題意識はあるものの、どうやってビジネスに繋げていくと良いかわからないと悩んでいる人に向けて、この記事を書きました。
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js に Chakra UI を導入する方法を紹介します。また、設定しておくと便利な Tips も触れていますので、ぜひ参考にしてみてください！ バージョン情報 node：15.11.0 react: 17.0.2 react-dom: 17.0.1 next: 11.1.2 @chakra-ui/react: 1.6.7 @emotion/react: 11 @emotion/styled: 11 framer-motion: 4 Chakra UI とは？
どーも、入田 / ぐるたか @guru_taka です！ 本記事では React/Next.js (TypeScript) における Chakra UI の基本的な使い方を紹介します。レスポンシブ対応や独自 CSS の記述方法など便利な Tips もまとめていますので、ぜひ参考にしてみてください！
今回は Next.js において、相対パスではなく、特定のディレクトリパスにあるモジュールを絶対パスでインポートできるようにする方法を紹介します。
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js (TypeScript) を環境構築し、ESLint（読み方：イーエスリント）と Prettier（読み方：プリティア）を導入する方法を紹介します。Next.js のバージョン 11 に対応しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。 ESLint と Prettier を駆使することで、コードが綺麗になるため、導入することを強くオススメしたいです。本記事では、VS Code 上で、ESLint で構文解析しながら、ファイル保存時に ESLint + Prettier によるコード整形する方法をハンズオン形式でまとめています。
日本時間で本日発表された Next.js の Ver.11 ですが、これまでの Ver.10 で開発していた私目線でまとめてみました。 すぐ使える嬉しい変更点 next/image => 面倒だった width と height から解放！ Conformance => 実装が UX 的に良いか ESLint と統合して確認できるように！ Script Optimization => 外部の JS ファイルのパフォーマンスを調整可能に！ 使う人を選びそうな変更点 Next.js Live => みんなでリアルタイムに開発しよう！ CRA Migration => create react app ユーザーからの移行を楽に！ 後ろ側の変更点 Improved Performance => 開発者体験さらに上がったよ！ Webpack 5 => Webpack 4 から 5 がデフォルトに！
キカガクでは、社内に記述方法のガイドラインを設けており、誤字脱字のチェックなど、コンテンツ開発者とレビュアーが文章の校正を行っています。 参考：絶対に間違えたくない。括弧（かっこ）と句読点にある、たった１つのルール | fwywd（フュード） しかし、文章を隅々まで読んで、手動で校正をすると非常に大変です…。なんと textlint（読み方：テキストリント） というパッケージを使うと、ある程度、文章を自動で校正できます（超便利）
Tailwind CSS には、デフォルトで濃薄含む様々な色が登録されていますが、実際にはデフォルトに存在しない色を使用したいケースも多々あるはずです。
本記事では husky を導入し、コミットする前にステージングしたファイルに対して、Lint 系を実行し、コードの品質を保つようにします。またコミット前に、全体テストも実行。成果物は以下の通りです。
GitHub Actions は GitHub で用意されている CI/CD（継続的インテグレーション / 継続的デリバリー）が実現できるサービスです。 簡単にいうと、テストしたりビルドしたりといったサーバー側の処理を Push や Pull Request のタイミングで行うことができるサービスです。 GitHub Actions の最もわかりやすい使用用途としてはビルドからの公開です。 Next.js の場合 GitHub へ Push すると GitHub Actions が next build でビルドを行い、ビルド後のファイルを main リポジトリへアップロードし、GitHub Pages で公開するように設定できます。 ここで、GitHub Pages も GitHub で用意されている静的ホスティングサービスです。 fwywd（フュード） ではデプロイ先として Verce
まずはじめに fwywd（フュード） で公開している採用の１次試験の内容を簡単に紹介します。 React / Next.js / Tailwind CSS を使って、準備されたデザインで１ページの自己紹介サイトを作っていただきます。 フロントエンド実装に慣れている人には簡単ですが、日頃はバックエンドを中心に書いている人にとっては Tailwind CSS を含めた CSS の書き方の勉強が必要となります。 また、HTML / CSS のフロントエンド実装に慣れている人には React / Next.js を学んでいただく必要があります。 問題設定こそ簡単ですが、どのような役割の人にとっても学びのハードルが少しある良い問題となっています。 ２次試験以降はフロントエンドも含めたバックエンド実装を課している中で、わざわざフロントエンドの実装も習得していただきたい理由があります。 新規事業の We
React や Next.js を採用して Web アプリケーションを開発していく際に必ず欲しくなる検索機能ですが、自前での実装は意外と困難です。 その一方で、algolia や Elastic Search を用いることで比較的用意に実装が可能かつある一定量までは無料で使用できるため、初期のプロダクトへの導入がオススメです。 今回は fwywd（フュード） のページへの検索機能を追加する具体的な手順を解説します。
Next.js(TypeScript) に Google Analytics（以降、GA）を導入し、PV を計測する方法を紹介します。!公式リポジトリ のサンプルコードに沿って、設定しています。 GA を導入し、PV を計測する手順 env ファイルに GA の ID を定義 GA で PV やイベントを計測するための関数を定義 GA スクリプトの埋め込み 画面遷移のとき、PV カウントを発火させるイベントの実装 1. env ファイルに GA の ID を定義
This document is for Next.js versions 9.4 and up. If you’re using an older version of Next.js, upgrade or refer to Environment Variables in next.config.js. 引用：Basic Features: Environment Variables | Next.js
パブリッククラウドの Microsoft Azure ではユーザー認証などの Auth を担当する ID as a Service (IDaaS) として Azure Active Directory が用意されています。 その中に、Business 向けの Azure Active Directory B2B (AADB2B) と、Consumer 向けの Azure Active Directory B2C (AADB2C) があります。 fwywd（フュード） では C 向けのビジネスを想定しているため、AADB2C を使用してユーザーの認証 (Authentication) から API などの認可 (Authorization) の仕組みまで構築していきます。 AADB2C はログインや新規登録の User Interface (UI) を基本的には一切作る必要がなく、今まで使っ
GitHub ではリポジトリを作成した時のデフォルトのブランチが main ですが、Git Flow などのブランチモデルを適用すると、main は基本的に本番環境運用のためだけに存在させるべきです。 デフォルトのブランチが main のままだと Pull Request を出すときの base となるブランチが常に main となってしまい、変更の手間が面倒であったり人為的なミスが生じてしまいます。 そこで、今回はデフォルトのブランチを main から develop へ変更する方法を紹介します。 また、単にデフォルトのブランチを変更しただけでは、hotfixes の変更などを main から develop へ Pull Request でマージした時にブランチを誤って削除してしまう危険性があります。 そこで、main ブランチを人為的なミスで削除から守る方法も併せて紹介します。
fwywd（フュード） では主にバックエンドを構築するためのインフラ環境として、パブリッククラウドである Microsoft Azure を採用しています。 現在パブリッククラウドのシェアが１位である Amazon Web Service (AWS) や元々利用していた Firebase と繋がる Google Cloud Platform (GCP) ではなく、Microsoft Azure を選択した理由をこの記事では紹介します。 先日投稿した Vue.js & Nuxt.js から React & Next.js へ移行した理由 が賛否両論はあるも多くの方に読んでいただき、その中で『バックエンドとして Azure を採用した理由を知りたい』といった声が寄せられたことが本記事を執筆したきっかけとなりました。
ブログを購読していただくために便利な RSS と Atom のフィード情報を生成する方法を紹介します。 Next.js 向けにカスタマイズされたパッケージは現状で見つからないため、Node.js 向けのパッケージである feed を今回は利用します。
一見問題なく動作していますが、実は不必要なレンダリングが行われています。React Developer Tools でレンダリングを可視化してみると、一目瞭然です。
PC もスマホも全体的にパフォーマンスが良くなりました！本記事では、ブログページのパフォーマンスを向上させるために行ったことを紹介します。
次のページ
このページを最初にブックマークしてみませんか？
『起業したい人におすすめのアイデアを紹介する Web メディア | fwywd（フュード）』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
