サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ニコニコ動画
fwywd.com
【Azure App Service | Node.js】GitHub Actions を利用して継続デプロイしてみよう【 トラブルガイド付】
みなさんは STUDIO というデザインツールをご存知でしょうか。 ノーコードツールというと流行りに乗っている感じがありますが、Web サイトの実装をプログラムを書くことなく公開まで行うことができます。 そんな記事を書いている私はプログラミングに触れて早 15 年。 ノーコードツールに頼ることなく Web サイトの実装ならサクッと行える私が、この度、STUDIO で Web サイトを実装してみました。 ノーコードってプログラムを書けない人のためだと思われがちですが、実はエンジニアの方が恩恵が大きいのでは...? と思うぐらい慣れると快適でした。 そんなプログラミング大好き人間から見たノーコードで実装できる STUDIO を採用した背景やメリットを紹介します。 また単に実装できるできないの話だけでなく、「ビジネスで使える使えない」といったビジネス視点での STUDIO のメリット・デメリット
記事を書き始めた人あるある「タイトルの付け方がイマイチわからない・・・」 そのお悩み、解決してみせましょうっ!
現在募集を開始している起業家育成コースの『fwywd(フュード)in 淡路』は受講料が無料です。今回はこの『受講料無料』に込めた思い、そして、これが最終的に私の考える真の教育像に近づいていく話も含めて丁寧に背景を紹介させてください。
NewsPicks の創刊編集長であり、現在 PIVOT の創業者として活動している佐々木紀彦さんが手がけた最新の一冊『起業のすすめ さよなら、サラリーマン』を紹介します。 この本は『起業を検討している人への後押し本』でもある一方で、『起業家としての一歩を歩み始めた人の How To 本』でもあります。 この本では起業をキャリアの1つに入れてみてはいかがでしょうか、と提案をしています。 ただし、佐々木さん自身も元々は起業を待ってく考えていなかったところからスタートしていたそうです。 その中で、なぜ起業家という選択をしたのかという点の説明が最初にあり、これが起業を検討している人への後押しになります。 その中で印象に残ったものが、サラリーマン化の弊害です。 日本はサラリーマンを過度に守るシステムを作ってきてしまい、それが結果的に他責主義の社会を生んでいるという話です。 日本のような資本主義社会
早速ですが、多くの起業家にとって一番最初に訪れる絶望であり、困難とはなんでしょうか。 ビジネスの知識が足りないことでしょうか、それともプロダクトの作り方がわからないことでしょうか。 これらはインターネットで検索すれば、ある程度の指針は見つかります。 一方で、インターネットで調べても、全然進まないことがあります。
株式会社キカガクの新規事業であるfwywd(フュード)が手掛ける起業家育成の fwywd in 淡路の募集がついに始まりました。 この企画では、自身が抱える社会の課題と向き合う起業家を育成および支援していく、これからの日本の成長に欠かせない取り組みだと自負しています。 今月の 11/12(金)から募集を開始しており、続々と起業を志す優秀な方からの応募をいただいています。 この起業家育成の特徴である『社会課題』に関して課題意識はあるものの、どうやってビジネスに繋げていくと良いかわからないと悩んでいる人に向けて、この記事を書きました。
どーも、入田 / ぐるたか @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 がデフォルトに!
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(フュード) で公開している採用の1次試験の内容を簡単に紹介します。 React / Next.js / Tailwind CSS を使って、準備されたデザインで1ページの自己紹介サイトを作っていただきます。 フロントエンド実装に慣れている人には簡単ですが、日頃はバックエンドを中心に書いている人にとっては Tailwind CSS を含めた CSS の書き方の勉強が必要となります。 また、HTML / CSS のフロントエンド実装に慣れている人には React / Next.js を学んでいただく必要があります。 問題設定こそ簡単ですが、どのような役割の人にとっても学びのハードルが少しある良い問題となっています。 2次試験以降はフロントエンドも含めたバックエンド実装を課している中で、わざわざフロントエンドの実装も習得していただきたい理由があります。 新規事業の 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
GitHub ではリポジトリを作成した時のデフォルトのブランチが main ですが、Git Flow などのブランチモデルを適用すると、main は基本的に本番環境運用のためだけに存在させるべきです。 デフォルトのブランチが main のままだと Pull Request を出すときの base となるブランチが常に main となってしまい、変更の手間が面倒であったり人為的なミスが生じてしまいます。 そこで、今回はデフォルトのブランチを main から develop へ変更する方法を紹介します。 また、単にデフォルトのブランチを変更しただけでは、hotfixes の変更などを main から develop へ Pull Request でマージした時にブランチを誤って削除してしまう危険性があります。 そこで、main ブランチを人為的なミスで削除から守る方法も併せて紹介します。
ブログを購読していただくために便利な RSS と Atom のフィード情報を生成する方法を紹介します。 Next.js 向けにカスタマイズされたパッケージは現状で見つからないため、Node.js 向けのパッケージである feed を今回は利用します。
一見問題なく動作していますが、実は不必要なレンダリングが行われています。React Developer Tools でレンダリングを可視化してみると、一目瞭然です。
PC もスマホも全体的にパフォーマンスが良くなりました!本記事では、ブログページのパフォーマンスを向上させるために行ったことを紹介します。
次のページ
このページを最初にブックマークしてみませんか?
『起業したい人におすすめのアイデアを紹介する Web メディア | fwywd(フュード)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く