
## はじめに

この記事に辿り着いたという事は、あなたはビジネスを創ることに興味がある方でしょうか？起業や副業を考えているのかもしれませんね。この記事で書いた内容は「**こういった考え方をするとビジネスアイデアを考えやすい**」という 1 つのご提案です。

必ずすべての人に当てはまるわけではありません。また私自身もまだビジネスを生み出す手前にいるので、今後考えが変わるかもしれません。しかしご紹介するメソッドは起業に向けて活動を開始した人 10 人程へ 1on1 を行い、評価を頂いた内容です。

## こんな人が書いています

私は 18 年間務めた会社を辞め、起業に向けて活動を開始しました。年齢は 42 歳。組織で働くことでは得られない裁量と可能性を求めてのチャレンジです。前職は大手製造業の社員で、営業 → マーケティング → 人事を経験してきました。「安定を手放して…」というイメージの典型例です。

## この記事は次の様な人に向けて書いています

- 起業や副業をしたいけれど具体的に何を事業もするか決められない人
- 新規事業を考える為のヒントが欲しい人
- 起業家の卵の試行錯誤に興味がある人

## １，なぜビジネスモデルが見つからないのか

執筆している 2022 年 5 月現在、日本は円安や資源価格の高騰による物価高への不安が高まっています。そんな背景もあり「お金を稼ぐ」ことへの考え方が変わり、従業員として定年まで働き続ける**今までの当たり前**が変わってきています。そこで副業をしたいとか、より可能性が大きい起業に興味を示す人が増えているのだと思います。

しかしいざ**どうやってお金を稼ごうか**と考えると、これが意外に難しいのです。

- スキルが足りない
- 資金が足りない
- すでに自分より強い競合がいる
- 自分に経営なんてできるのか？

こういった不安が壁になるからです。

## ２，ビジネスモデルを探す 2 つのパターン

ではどうしたらビジネスモデルを見つけることができるのか。この答えはいくつもあると思いますが、ここでは 2 つのパターンを紹介します。ポイントは具体化と抽象化です。下から上を見上げるか、上から下を見下ろすかという**視点のコントロール**を意識しましょう。

### 具体化する

対象：目標が大きすぎて「**何ができるのか分からない**」と考えてしまう人

私達 fwywd のメンバーはそれぞれが解決したい社会課題を持っているので、まさにこんなタイプが多いですね。この思考パターンの人は大きな目標に向かって目線は遠く上方に向いている為、考えが漠然としています。その為地に足が着いたビジネスモデルを思い付かないということがあります。目標の大きさに対し、自分の実力との乖離に打ち手が見つけられないのです。

#### **山頂までのルートと考える**

このタイプの人は目標を山頂に見立てて裾野から見上げるイメージで、「どのルートで上ろうか」と考えると良いでしょう。山の裾野は広がっているので複数のルートがあるはずです。またルートは一本道ではなく、分岐や合流もよくあることです。そのことが分かれば、目指すべき山頂に繋がっているとる思えたら「**まずこのルートを登ってみよう**」となります。

ビジネスに話を戻すと、「**まずは今できる事で始めてみれば良い**」と言い換えられます。大きく稼ぐビジネスモデルである必要はありません。むしろ小さくても直ぐに収益が出せるビジネスの方が、当座の生活費を稼げて良い場合があります。大きく・高く羽ばたくのは足元を固めてからでも良いのです。

### 抽象化する

対象：スキルや経験をもとに「**これなら自分にもできそう**」と考えやすい人

1on1 を行わせて頂いた方を例に説明します。現役のエンジニアで「自分は解析や統計分析ができるけど、それでどんなビジネスができるか分からない」と悩む人がいました。この思考パターンの人は**目線が今の状況という「足元」に向いている**為、選択肢が少なくなりがちです。また自分のスキルを社内などの狭い世界で比較評価してしまう為、**世間に対してどの程度通用するのか自信が持てない**ケースもあります。

#### **高い位置から見下ろしてみる**

このタイプの人は鳥になって空から地上を見下ろすイメージで考えると良いでしょう。**組織や業界という枠を超えて考える**のです。すると「計測されたデータがあればほとんどのことは分析できるぞ！」「分析スキルは世の中で広く求められているぞ！」と気が付きます。

後は自分のスキルがより強く求められる市場を考えれば、ビジネスモデルの輪郭が浮かび上がります。この時も具体化で説明したのと同じように、いきなり大きなビジネスを考える必要はありません。小さく始めて足固めをしてから、大きなビジネスに展開すれば良いのです。

ちなみにこの例の方は 1on1 を通して「**同じサービスでもポジショニングを変えることで価値が高まる**」という発見をして頂きました。

実はすでに姿勢判断の技術と測定機材までお持ちだったのに、近所の整体に無償設置しているだけでした。またそれほど良い評価もされていないとのことでした。そこでケーススタディとして「設置先を美容系のお店に変える」ことを考えてみました。

設置先の業種を変えただけで

- 美容系のお店は情報発信に熱心なので無料で拡散して貰える
- 顧客の「綺麗になりたい」熱量が高いので使用して貰える確率が高い
- 顧客単価が高いので適正な価格評価を受けられる
- これらの実績が出れば導入店の拡大が容易

という利点が考えられました。

## ３，大きなビジネスから始めることは大きなリスクを抱えるということ

そうはいってもできれば大きく稼ぎたいという気持ちはありますよね？ しかし現実的に**大きく稼ぐビジネスには大きな投資が必要**という問題が立ち塞がります。たとえばさきほどの分析スキルの例を考えてみます。

小さな案件を請け負うのであれば、一人で行えるか数名のサポートが必要になるくらいで対応可能でしょう。 しかしこれが自社プロダクト開発を行うとか大手から受注する為には、組織的な対応が必要です。 保守まで考えれば長期で人材確保しなければならないので、もはや個人のポケットマネーでは厳しい金額です。 そう言った事情もあり、最初のビジネスからホームランを狙うような大きなビジネスを考えても実行が難しいのです。

### 融資は借金

融資を獲得してビジネスを始めるという手段もありますが、これはリスクが大きい選択肢です。 なぜなら融資は必ず返済しなければいけないお金、つまり借金だからです。

しかも融資が受けられるのは事業が立ち上がる前に多額の出費を必要なケースが多いので、売り上げが伸びる前に多くの資金が手元からなくなります（ここでは資金調達に関する説明は割愛します）。 もし計画通りに収益が出ないと、仮に事業を畳んだとしてもあなた個人に借金が残ってしまうのでリスクが高いのです。

## ４，儲かるより喜ばれるか

以上の考えで最初に始めるべきビジネスでは、**生活を安定させることや活動資金が底をつく迄の期限を延ばすことが当座の目標**になります。その規模であれば、初期は口コミや少々の広告費用で獲得できるくらいの顧客数で十分です。そうなるといかに儲かるかではなく、**いかに喜んでもらえるかが重要**になります。顧客本人が気に入るだけでなく、**他人にも紹介したくなる**というのが狙うべき品質基準になります。

簡単に考えつかない時もありますが、「こんなサービスがあったら喜んでもらえるだろうな」と考えを巡らしましょう。そしてそのアイデアを口に出して、他も人から意見をもらいましょう。自分がどれだけ良いと思っても、評価されなければビジネスとしては成り立たないのです。

## 最後に

ここまで読んで頂きありがとうございました。ビジネスモデル探しで迷っているときに、この記事が少しでもモヤモヤから抜け出すヒントになれば幸いです。また「考え方は分かったけど自分一人では上手くできない」という方がおられれば、私がお手伝いをさせて頂きます。お気軽にご連絡ください！

## 書いた人

浅井健一郎

思考のカオスを解きほぐすカウンセリングと、実行アクションの洗い出しが得意です。モヤモヤと悩んでいる方にビジネスモデルを生み出すまでの伴走を行っていますので、お気軽にご連絡ください！

[Twitter : @kenchiro0406](https://twitter.com/kenchiro0406)


この記事に辿り着いたという事は、あなたはビジネスを創ることに興味がある方でしょうか？起業や副業を考えているのかもしれませんね。この記事で書いた内容は「こういった考え方をするとビジネスアイデアを考えやすい」という 1 つのご提案です。 必ずすべての人に当てはまるわけではありません。また私自身もまだビジネスを生み出す手前にいるので、今後考えが変わるかもしれません。しかしご紹介するメソッドは起業に向けて活動を開始した人 10 人程へ 1on1 を行い、評価を頂いた内容です。

ビジネスモデル探しに迷っている人が最初にすべきこと


## はじめに

### 野原ひろしの足は臭いけど偉大

みなさんはクレヨンしんちゃんに出てくる野原ひろしをご存知でしょうか。野原しんのすけの父親で営業マンとして一家を支えています。その野原ひろしですが、実は「足が臭い」ということで度々いじられています。そのひろしのエピソードで子供の頃に見て忘れられないものがあります。

いつものようにしんのすけが、父ひろしの足は臭いといじります。すると母親のみさえが以下のように言います。

「これはお父さんが毎日お客さんを訪問して汗をかいている証拠。ありがたいのよ。」

父親の偉大さや労働の大変さを伝える良い話ですよね。ただ、大人になってからこの話を振り返ると「リモートという手段があるからだんだんそういった足を使って顧客先を訪ねることはなくなるのかなぁ」とも思っていました。

しかし、今起業活動をしている視点から考えるとこれは完全に間違いでした。

**足を使って顧客先を訪問することは非常に価値のある行為で今後もなくなりません。**

以降では、上記のように私が確信した理由や、実際に顧客を訪問し感じたこと、これから顧客訪問に行く方へのちょっとしたアドバイスなどを記載していきます。

### 本記事の対象読者

対象読者は以下のとおりです。

- 起業の経験が浅い初心者起業家の方
- 自分のビジネスアイディアに需要があるか不安になっている方

### 前提

本題の前に前提と言葉の定義をはっきりさせておきます。

この記事で語る顧客訪問とはいわゆる「訪問販売」とは違い、商品を買ってもらうことが目的ではありません。需要の有無や業界の情報収集などをする「市場調査」が主目的です。

この市場調査はいつ誰が行うかというと新規サービス・ビジネスを立ち上げようとしているときに起業家の方が行うものです。

（本当はもっといろいろなタイミングがありますが、筆者の体験に基づいて記載できるのはここまでです。）

この前提で以降を読み進めて頂けると幸いです。

## なぜ足を使った市場調査が必要になるのか

### 当事者目線を持たないと共感は呼べない

最初になぜ足を使ったリサーチが必要になるのかを、自分の経験を踏まえてお話します。

私は、ある程度ビジネスアイディアが固まってきた段階でその内容を他の人に話してフィードバックをもらいました。

※ビジネスアイディアの作り方については[**「起業したいけどアイディアがないときどうするか」**](https://fwywd.com/blog/2022042803)の記事で詳細に記載しています。

有益なフィードバックをたくさん頂けたのですが、特に刺さったのは学生時代の友人から言われた「当事者としての目線が足りない」という意見でした。

正直に言うと、始めはいまいちピンと来ませんでした。しかし、振り返ってみると自分のプレゼンは耳当たりのよい言葉が並んでいるものの、自分の意見のみの主張でした。肝心の顧客側がどのように感じているのかという視点が不足していたのです。外から偉そうに「こんな問題があってこれをこんな感じで解決できます。これはビジネスになります。」と主張する自分よがりなメッセージだったと言えます。

「実際の顧客はそのサービスやプロダクトを本当に必要と感じているのか、もっと解決して欲しい課題はないのか」、といった要素が欠けていると顧客からの共感は呼べないと学びました。

関連する話として、fwywd オーナーの吉崎さんが配信する [**fwywd radio**](https://open.spotify.com/show/0rkAbkopOGEpMLJMME6nlQ?si=J9bAKxktRECj7rzrdIDo8Q&nd=1) でも、顧客と話をする中で道ができていく様子やその重要性が語られています。この話を聞いて自分の感じたことは間違っていなかったなと確信しました。

### 当事者目線を持つためのリサーチ

では当事者目線を持つためにはどうすればいいでしょうか。

一番良いのは自分が当事者そのものになることです。食事関連のビジネスなら自分が顧客となって食事をし、旅行関連のビジネスなら自分が旅行をするのが一番です。

一方でそれだけでは効率が悪かったり、完全に自分が当事者になれない領域のビジネスもあったりします。（学生向けのビジネスを考えている人が実際に時を遡り学生に戻ることは不可能です。）そこで重要なのが、顧客の意見を実際に聴くということです。

顧客の意見を聴く際に、リモートでの対応にするか、現地に行って直接お話をするか迷われることもあるはずです。この２つは使い分けが必要でしょう。

起業初期で顧客がいないときや、初対面の方が相手の場合は可能な限り実際に会って話をすることをおすすめします。実感として実際に現地に行くと、それだけで相手は「そこまでの労力をかけてくれるのであれば話を聞いてみようかな」という気持ちになってくれますし、話が広がりやすいです。

一方で、ある程度関係性ができている顧客が相手の場合はリモートでの対応もよいでしょう。

伝えたいのはどんなときも必ず対面で話をしようということではありません。顧客と直接話しする機会を作ると思いも依らぬメリットを享受する可能性があり、その事実を軽んじてはいけないということです。家で悶々と考えて行き詰まっている人は特に実際に顧客と対面で話をしてみることをおすすめします。息抜きでクレヨンしんちゃんを見る機会があればこの話を思い出してください。

以下では実際に顧客訪問することで感じたメリットを具体的に列挙します。

## 実際に顧客訪問をして感じた３つのメリット

### １．説得力が生まれる

一番大きいメリットは自分の言葉に説得力が生まれることです。

顧客から直接仕入れる情報の鮮度はとても高いですし、自分がしていた勘違いなども話をする中で矯正されていきます。結果として、より正確な表現や数字で自分のビジネスを語れるようになり、顧客の声を聞くことで自信を持って話すことができます。

もちろん、このメリットはリモートで対応したときでも言えるのですが、個人の感覚としては対面の方が広く深くいろいろな話をしてくれます。上述したように「ここまで来てくれたからには何か協力しよう」と思っていただけるのが人情ということですね。

### ２．ファンを作るきっかけになる

自分という存在をその業界に広めるきっかけを作れます。当たり前ですが直接会って話をした人というのは記憶に残りやすいです。自分の人間的魅力で相手を夢中にさせることができれば、その人がファンになってくれる可能性だってあります。そうなると数珠繋がりで他の人を紹介してもらうことができ自然と人脈が形成されていきます。

ビジネスを始めるにあたって影響力を持つことの重要さは fwywd のオーナーである吉崎さんがラジオや fwywd のコミュニティの中で何度も発信しています。

ではその影響力を持つためにはどうすべきか、という問に対しての解の１つが顧客と直接会うということだと私は考えています。

### ３．想像力やアイディアが磨かれる

顧客と話すうちに思いもよらぬヒントやアイディアが出てくることがあります。これは顧客訪問をすることで、その場所の雰囲気・匂い・音・相手の表情などを感じ取って自然と頭が働く結果だと考えています。話をする中でもっと直接的に「こういうサービスがあるとありがたい」と言及してくれる人もいるでしょう。

また、**顧客の解像度があがると自問自答のレベルも飛躍的に上がります。**

「こういうサービスはどうだろうか、でも、以前訪問した人はこんなことを言っていたから、ここをもっと改善する必要がある」といった想像力が働くようになるのです。

## 考えなしで行くのは非効率

ここまで読むと顧客訪問の重要さはわかっていただけたことでしょう。それと同時にお伝えしたいのは考えなしで顧客先へ訪問しても成果は得られないということです。最低限、以下の項目は自分の中で整理した方がよいでしょう。

- 自分が最終的に目指す世界観
- 自分が持っている仮説
- どんなことを質問したいのか（Yes or No で答えられない聞き方の方がよいです）
- もしあれば作ったプロダクトやサービスの HP（完成していなくてもよい）

あとは、相手は何者でもない自分のために時間を割いているということを忘れず、礼儀を持って対応しましょう。

## おわりに

いかがでしたでしょうか。本記事では、足を使って顧客訪問をすることの意義やそのことで得られるメリットを紹介しました。

地道なことですし、すごく遠回りに感じる人もいるでしょう。しかし、人生の成功の裏には必ず地道な活動があるではないでしょうか。少なくとも私の今までの人生はそうでした。はじめから上手くできたことなど何ひとつとしてなく、地道な活動を継続することで最後に華が開くという経験が何度もありました。

この記事が多くの初心者起業家の支えとなり、１つでも多くのビジネスが前に進むことを祈ります。

最後までお読みいただき、誠にありがとうございました。

## 筆者について

fwywd 1 期生として活動しています。現時点では会社員（システムエンジニア）と平行して活動中です。 学生時代のすべてを捧げた馬術の世界をよりよくするための事業を検討しています。 ビジネスアイディアの概要や日々の活動などは以下をご覧ください。 起業に興味がある方、馬術関係者の方などは是非フォローしてください。

- [HP（日本の馬術部プロジェクト）](https://www.wellrhythm.com/)
- [SNS (Twitter)](https://twitter.com/senju797)


みなさんはクレヨンしんちゃんに出てくる野原ひろしをご存知でしょうか。野原しんのすけの父親で営業マンとして一家を支えています。その野原ひろしですが、実は「足が臭い」ということで度々いじられています。そのひろしのエピソードで子供の頃に見て忘れられないものがあります。いつものようにしんのすけが、父ひろしの足は臭いといじります。すると母親のみさえが以下のように言います。「これはお父さんが毎日お客さんを訪問して汗をかいている証拠。ありがたいのよ。」父親の偉大さや労働の大変さを伝える良い話ですよね。ただ、大人になってからこの話を振り返ると「リモートという手段があるからだんだんそういった足を使って顧客先を訪ねることはなくなるのかなぁ」とも思っていました。しかし、今起業活動をしている視点から考えるとこれは完全に間違いでした。足を使って顧客先を訪問することは非常に価値のある行為で今後もなくなりません。以降では、上記のように私が確信した理由や、実際に顧客を訪問し感じたこと、これから顧客訪問に行く方へのちょっとしたアドバイスなどを記載していきます。

親でも職場でもなく自分が最大のドリームキラーだった話アドバイス


## はじめに

みなさんは自分の夢を阻害するドリームキラーに遭遇したことはありますか？例えば「プロ野球選手になりたい」、「有名なユーチューバーになりたい」と夢を語ると頭ごなしに否定してくる親や職場の人がそれにあたります。しかし私の場合は親でも職場でもなく自分が最大のドリームキラーでした。この記事は「ドリームキラーと化していた自身に気づき、考え方を改めることで夢や目標を見つけた経験をお話しします！

## 本心に気づかないふりをした 10 年

私は産業機械の設計を約 10 年勤めてきました。良い設計者を目指して設計のノウハウや部署間のスケジューリングなど多くを学んできました。そしておおよその業務がこなせるようになり、チームのマネジメント業が増え始めてきた頃です。そんな時期に **「この職業が果たして本当にやりたいことなのだろうか？」** ということを考えるようになったのです。それは会社の製品について熱く語る同僚を見ていると、自分が将来この会社でこんな機械をつくりたい！という夢や目標がないことを改めて実感したからです。実は薄々そんな自分の気持ちに気づいていましたが、学ぶべきことが多くあったので盲目的に突き進み、気づかないふりをしていたのだと思います。これからの人生において多くの時間を仕事に捧げて過ごすことを考えると、こんな自分がこの会社に勤め続けるのは自分と会社双方にとってもったいないことだと思うようになりました。そこでなぜ自分が将来の夢や目標を持てない職業に就いてしまったのか、これまでの軌跡を振り返ってみることにしました。

## 数字を比較して決めてきた人生

高校生までは将来の選択肢を広げることを目的として、センター試験（共通テスト）で良い点数をとるためにと全ての教科に注力してきました。大学への進路選択ではものづくりに興味があり理系に向いていると感じていたので機械系の学科で探しました。最終的にセンター試験で獲得した点数から合格が狙える大学を偏差値で比較して決めました。会社への就業選択では大学で就職実績のある会社の中から企業規模や収入、安定性などを比較して決めました。このようにこれまでの進路選択は数値化された情報を比較してより良いものを求めてきました。**夢や目標ではなく数字で判断する自分自身がドリームキラー**だと気づきました。

## 行動すれば変化する

本当に自分のやりたいことを探すために自分が興味を持ったものを思い返してみました。機械設計は物理学を主体とした職種ですが、実は物理よりも数学の方が得意だったことを思い出しました。数学は一つの問題を 1 日中考え続けても苦にならないぐらい没頭していました。その数学を主体として世の中のトレンドや将来性を加味した職業を考えたところ、機械学習に関する職業に興味を持ち勉強し始めました。そうすると **勉強を始めたことで変化が生まれました。** それは勉強し始めた機械学習の教材を提供している株式会社キカガク会長の吉崎さんとパソナグループさんが運営する **[fwywd in 淡路](https://fwywd.com/awaji)** というプロジェクトとの出会いです。このプロジェクトは淡路島で起業という同じ志を持った仲間と１年間一緒に取り組むというものです。率直に魅力的なプロジェクトだと思いましたが、参加するにはビジネスプランを掲げて **自分が何をしたいか** を考える必要がありました。このテーマを考える過程で、今自分が勉強している機械学習は手段であり、何がしたいのかという部分が欠落していることに気づかされました。
今度は自分のこれまでの経験から改善したいことを振り返りました。そこで頭をよぎったのが、友人に結婚祝いを贈った時のことです。絶対に喜んでもらえると自信があった贈り物でしたが、友人は既にそれよりも良い物を持っていたのです。もっと考えればよかったととても後悔しました。この苦い経験を思い出すことで私に夢ができました！それは **「贈り物のミスマッチをなくす」** ということです。相手の欲しいものがわかれば送り手は「喜んでくれるかな？」という不安な気持ちが解消されますし、貰い手は必要なものが手に入るので双方にとって有益なものになります。このアイデアを軸にこれからサービスを構築していきます。

## 最後に

私は明確な将来の夢や目標がなかったために数字で選択する人生を歩んできました。もし夢や目標を学生の間に見つけることができれば後悔や後戻りのない人生だったかもしれません。ただ、社会に出てから学ぶことはたくさんあり、そこでの人との出会いや結婚、子育てなどを通して価値観や考え方が変わったところもあります。大切なのは自分の気持ちに素直に向き合い、違和感があるのであれば解消するために行動することだと思います。そして**数字ではなくやりたいことで決めること**です。起業という選択が全ての人における正解ではありませんが、もし自分が起業するなら？というスケールで考えてみると本当の自分の夢や目標が見えてくるかもしれません。実現したいというアイデアが見つかった際は、fywyd への参加を検討されてみてはいかかでしょうか？fwywd の雰囲気など知りたいと言う方は下記 Twitter をフォローして頂ければと思います。
また、私が取り組んでいる「贈り物のミスマッチをなくす」サービスに興味を持って頂けた方も是非フォローしてもらえたらうれしいです！最後まで読んで頂きありがとうございました。

## 著者

廣岡　秀一 (Twitter:[@shuichi_gif](https://twitter.com/shuichi_gif)) <br>
相手がどんな物を欲しいか情報提供することで **「贈り物のミスマッチをなくす」** サービスを開発中。友人の結婚のお祝いを贈る際、相手が喜びそうな品を考え贈るも既に持っているものだったという苦い経験をする。一方で自身も複数の人から同じような贈り物を貰い、使いきれなかった経験から贈り手の不安や貰い手の悩みを解決したいと考える。


みなさんは自分の夢を阻害するドリームキラーに遭遇したことはありますか？例えば「プロ野球選手になりたい」、「有名なユーチューバーになりたい」と夢を語ると頭ごなしに否定してくる親や職場の人がそれにあたります。しかし私の場合は親でも職場でもなく自分が最大のドリームキラーでした。この記事は「ドリームキラーと化していた自身に気づき、考え方を改めることで夢や目標を見つけた経験をお話しします！

プログラミング学習で絶対にオススメしたい、たった１つのこと


## はじめに

### **最短かつ効率的にプログラミング学習をしたい**

![road.jpg](/img/pages/blog/2022051801/road.jpg)

プログラミングをこれから学びたい人、あるいはすでに学び始めている人にとって、どのようにプログラミング学習を進めていくべきかは興味があるところだと思います。 **「プログラミング学習のためのオススメロードマップ」** は検索すればたくさん出てきますし、私もそのように示されたロードマップを参考に学習を進めてきました。最短かつ効率的にプログラミングを学んでいきたいと思うからです。

しかし、学習を進めた中で明らかになったのは、本当に重要なものはロードマップではなかったということでした。

この記事では、具体的な学習ロードマップはお示ししません。その代わりに、最短かつ効率的に学習するために、**これだけはオススメしたい**ことがたった 1 つだけありますので、それを伝えたいと思います。

## プログラミング学習を進める上でもっとも大切なこと

**結論：**

**「プログラミング技術習得自体を目的とした学習をしない！」**

です。

「えっ？どういうこと？」となった方も多いと思います。プログラミングを最短でかつ効率的に学びたいのなら **「プログラミングを学ぶことを直接の理由としない」** 方がいいのです。

遠回りのようですが、これがプログラミング学習最短のルートです。

それでは、具体的にどのような目的をもって学習をしていくべきか、答えは

「**プログラミング技術を使わねばならない課題を見つけ、その解決を目的とする」**

ことだと思います。

### プログラミングを学ぶこと自体を目的としてよいのは、完全初心者の基礎習得部分のみ

本当のとっかかりの部分、プログラミングをまったくやったことのない方が基礎の学習をする時のみ、プログラミング習得を目的とした学びをすることは有用だと思います。たとえば、Python プログラミングをゼロから学びたいという人ならば、最初の基礎作りとして Progate やドットインストールなどの Web サービスは有用です。YouTube や Udemy などの Python に関する超初心者向け動画を見ることから始めることも良いでしょう。何もわからないところからのスタートですから、この選択自体は当然です。私自身を振り返っても、Progate と Udemy を利用して Python や機械学習を学ぶことから学習を始めましたし、その選択は今振り返っても良い選択だったと思っています。

ただし、問題はその後です。

### なぜプログラミングを学ぶことを目的とした学習ではダメなのか

![question-mark.jpg](/img/pages/blog/2022051801/question-mark.jpg)

私自身のプログラミング学習の歴史をお伝えすることで、なぜプログラミング学習自体を目的とした学習ではなく課題解決型の学習が最善なのか、その理由を説明したいと思います。

---

Progate と Udemy を使い Python と機械学習の基礎知識を身につけた私は、当時、

**「最近話題になってる Python、機械学習だけど、Progate と Udemy でちゃんと勉強したからだいぶ理解したな」**

と思っていました。

そして、せっかくできるようになったのだからと、自身の職業（救急医）に関連した課題の解決に挑戦しました。具体的には「心臓が止まって蘇生治療を受けながら病院に運ばれた患者さんの、今後の予後を予測する機械学習モデルを開発する」という課題を設定しました。手元で得られる医療データを用いて、学んだ Python、機械学習の知識で挑みました。そして、課題解決に挑み始めてすぐに気づいたのです。

**「まったく何もわかっていなかった」**

ということを。

Progate や Udemy などの学習教材はわかりやすいですし、プログラミングの基礎知識はたくさん学べます。しかし、それをどうやって、どこで、どのように使うべきかが実際の課題ではまったくわからないのです。

スポーツで考えるとわかりやすいかもしれません。一生懸命練習をして、どんなに技術を磨いても、実際の試合で活躍できるかはまた別ということです。もちろん練習が大事ではないというわけではありません。ただ、試合でどう振る舞うべきかは、実際に試合をする環境に身をおかないとわからないことが多いんです。とくにプログラミング習得に関してはそれが顕著だと思います。**プログラミング技術の習得にばかり目を向けて知識ばかり習得しても、実際にはそれを使いこなせない**んです。

---

インプットのみで得られた知識だけでは課題解決がスムーズにできないことに気づいた私ですが、それでも課題は解決しなければなりません。そのため、個々の疑問点に関して、逐一 google 検索を行い、関連する学習動画をみて、本の該当箇所を読みながら、1 つずつなんとか疑問点を解決していきました。そして、すべての課題解決を完了した時、自身が本当の意味で python について、機械学習モデルについてその片鱗に触れることができたと感じることができました。**「敵の実力がわかるのも実力のうち」** とはよく言ったものです。

その後の自身のプログラミング学習の歴史は、常に**プログラミング技術を使わねばならない課題との出会いとその解決**とともにありました。解決しない問題にぶち当たり、調べながら解決することの繰り返しです。しかし、課題解決をしていく中で、下記に示すように実に多くのプログラミング周りの技術をいつの間にか学習することができていました。

**私が出会った課題とその解決策、得られたプログラミング周辺知識・技術**

- **課題 1：** 完成した機械学習モデルをぜひ実用化したい（アプリ化したい）

**私の解決策：** Streamlit での簡易アプリ化

**課題解決の中での学び：** Streamlit、エディター(Visual Studio Code）、フロントエンドとバックエンド、GitHub、Heroku。

- **課題 2：** Streamlit のアプリはできたけど、アプリで入力してくれたデータがデータベースとしてそのまま保存できれば便利なのに。

**私の解決策：** Goole Cloud Platform の Google Spread Sheet API を使ってのテータベース化

**課題解決の中での学び：** GCP（AWS,Azure の存在も知る）、API、SQL、データベース

- **課題 3：** Streamlit のアプリを実際に現場で使ってみると、レスポンスが遅すぎて実用的じゃない。

**私の解決策：** React ベースのアプリ実装

**課題解決の中での学び：** HTML、CSS、JavaScript、React、Next.js、Tailwind CSS

### 苦労して学んでいくことが、遠回りのようで１番の近道

![苦労して登る.webp](/img/pages/blog/2022051801/hardclimbing.jpg)

元メジャーリーガーのイチローさんの言葉にこのようなものがあります。

**「結果は困難を伴って出すべき。」**

「**遠回りすることってすごく大事ですよ。ムダなことって結局ムダじゃない。遠回りすることが一番の近道。」**

プログラミングを効率よく学びたいからといって、わかりやすい教材を利用して、直接的なプログラミング学習ばかりやっていてはダメなのだと思います。プログラミング周辺技術を利用しないと解決できない自身の課題があり、それを解決するため必要に迫られてプログラミング技術をわからないながら学んでいく。気づいたら多くのことができるようになっている。ひどく遠回りのようですが、実はこれが一番の近道なのだと思います。

## おわりに

いかがだったでしょうか。結局、自分ごとじゃないと人は覚えないんですよね。プログラミング習得を効率的にしたいのなら、是非とも自身の課題を必ず何か見つけ出し、その解決手段としてプログラミングを落とし込むことを心がけてみてください。課題を解決していく過程で、いつの間にかプログラミングが習得できているはずです。さらに、何らかの現実的な成果までも得られているはずです。そして、プログラミングがもっと好きになっていく。いつの間にか、良い学習循環が回り始めているはずですよ。

## 筆者について

![図1.png](/img/pages/blog/2022051801/hirano.png)

### 平野　洋平

医師（救急専門医・集中治療専門医）

救急医療の現場に身を置きながら、起業家としての第一歩を fwywd 1 期生として歩み始めました。

すべての人がそれぞれの思う人生を最期まで十分楽しむことができる社会。医療の立場からそんな社会を実現したいと思っています。

心停止患者の予後予測モデルの医療現場での活用や、医学生・初期研修医教育に関するアウトプット思考型教育の推進についてなど、医療に関する課題をテクノロジーと協働して解決すべく活動しています。私の記事に共感してくれた方は、是非フォロー 👍 をお願いします。

- [Twitter](https://twitter.com/harudanqq)
- [Blog](https://adventureofqq.com/)


プログラミングをこれから学びたい人、あるいはすでに学び始めている人にとって、どのようにプログラミング学習を進めていくべきかは興味があるところだと思います。「プログラミング学習のためのオススメロードマップ」は検索すればたくさん出てきますし、私もそのように示されたロードマップを参考に学習を進めてきました。最短かつ効率的にプログラミングを学んでいきたいと思うからです。しかし、学習を進めた中で明らかになったのは、本当に重要なものはロードマップではなかったということでした。この記事では、具体的な学習ロードマップはお示ししません。その代わりに、最短かつ効率的に学習するために、これだけはオススメしたいことがたった1つだけありますので、それを伝えたいと思います。

挑戦したいと思っていても踏み出せない「あなた」に伝えたいこと


## この記事はこんな方におすすめ

- 挑戦したいと考えているけどあと一歩が出ない方
- 今の状況下で挑戦を諦めている方
- fwywd に興味はあるけど、仕事をやめることができない方
- fwywd で仕事を続けながら参加している人の背景を知りたい方

## はじめに

なにか始めたい、けどなにから始めたらいいのかわからない。答えを探している間に、普段の生活に戻っている方はいませんか？はい、数年前の私です。

挑戦したいと思っていても踏み出せない **「あなた」=「昔の私」** です。昔の私に伝えたいことは、**挑戦に早い遅いもなく、やりたいと思ったときがその時であるということです**。

シンプルな結論ですが、この結論に至るまでの過程をお伝えすることで、挑戦することに悩んでいる・諦めている方、fwywd への参加に迷っている方の参考になれば幸いです。

## 私について

私は**仕事を続けながら** fwywd １期生として参加しています。転職せず、１社に１４年務めています。

年齢は今年で３９歳、結婚しており家族は妻と子供２人、東京に在住しています。自宅は持ち家です。起業という挑戦に対しては難易度が高い状況です。

今の会社である程度努力していけば、安定した生活を送ることはできます。家族もいます。私１人の人生だけでないことも理解しています。この状況を理解しているのに、なぜ起業という挑戦を選んだのか。

## 漠然と感じる虚無感と不安

変化のない、安定した日々を過ごしていましたが **「１回きりの人生このままで本当にいいのか」** と、漠然とした問いを繰り返していました。今思えば、人生で成し遂げたいことはなにか、どう生きてくのかが決まっていませんでした。

モヤモヤする日々を過ごしていましたが、あることがきっかけで前に進み始めます。そのきっかけをくれたのが、小学生の娘です。娘から小学校でプログラミングの授業が始まることを教えてもらいます。

１０年後、プログラミングを一般教養として学んだ部下が当たり前になる。そう考えると怖くなりプログラミングを学習するため、勢いで MacBook Air を買いました。

## 勉強することで現実から逃げていた

プログラミングは初学者でした。独学では心が折れそうでしたし、効率的に学びたかったのでスクールに入学しました。

フロントエンドを中心に学習していました。純粋にプログラミングはおもしろかったです。全く新しい世界でしたし、パソコン１台で無限の可能性を感じることができました。

しかし学習を始めて数ヶ月、疑問を抱くようになります。 **「学習はしているが、なにがしたいのか、どうなりたいのか」** この疑問に対しての答えを見つけることができないまま、卒業していきます。

卒業後、自身が好きなことや今後のキャリア形成で、何が必要になるかを考えていきました。数値から分析することが好きでしたので、数値やデータの世界をもっと学んでいくことを決めました。

その時 [**Udemy**](https://www.udemy.com/) で機会学習に出会います。初学者でも問題なくできる内容でしたので、機械学習、新しいデータ分析との出会いに興奮していました。そしてこのとき、[**キカガク**](https://www.kikagaku.co.jp/)の長期コースと出会います。

長期コースの受講は最後まで悩みましたが、やってみたい、**挑戦してみたい**、という気持ちが強かったので受講を決めました。

キカガクの長期コースも楽しく、最後までやりきることができましたが、**なにがしたいのか、どうなりたいのか。** この疑問への答えを見つけることができませんでした。

今だから分かりますが、**プログラミングを学習することで、不安な気持ちから逃げているだけでした。**

## 生涯で成し遂げたいことはなにか

子供は２人いますが、流産と死産を経験しています。死産に関しては、産まれても生きることができない難病を抱えていました。最後は親（私）の決断で、死産という選択をしました。

今でも死産という選択が正しかったのかと考えることがあります。正しかったかどうかはわかりません。わかりませんが、死産という選択をした事実を一生背負っていく覚悟です。

しかし、しばらくは死産という事実から目をそむけていました。死産という選択をした事実に向き合ってしまうと日常に戻れない感覚がありました。

この状況から救い出してくれたのが当時幼稚園生だった娘や、近所の子供たちの存在でした。どんな結果であろうとも私達の元に来てくれたことが奇跡であること、死産から目をそむけることはその子の存在を否定することであることに気づきます。死産に向き合っていく中で**この子に恥じない生き方をしていこう、子たちを大切にしていきたい、子供のためになにかしたい** と考えるようになりました。

しかし、具体的になにをすることが子供のためになるのか、子供にどのような世界を創っていくことが望ましいのかが見えずにいました。

## 原体験から見つかる

**子供のためになにかしたい**と考えていても具体的になにをするのか、全く見えずにいました。目の前が真っ暗なとき、助けてくれたのは仲間でした。キャリアコンサルタントを目指す友人に、カウンセリングをしてもらうことになりました。

このカウンセリングで答えが見つかります。カウンセリングでは、幼少期から現在までの原体験を深ぼっていきまた。そして点として存在する原体験を１本数の線で結び、言語化していくものでした。**子供のためになにかしたい**と漠然だったものが明確になり、視界が一気に広がった感覚を覚えています。見つかった成し遂げたいことは「**子供が公平に教育を受けられる社会を創る**」でした。見つかると同時に、本気で向き合うためには**起業という選択しかない**と考えるようになりました。

## 悩みながらも行動すること

成し遂げたいことも見え、これから具体的にどうするかを考えていたとき、株式会社キカガク代表取締役会長の吉崎さんから [**fwywd**](https://fwywd.com/) の起業家育成コースの案内がメールで届きます。内容を見た瞬間、**これだ！** と思い即エントリーすることを決めました。

fwywd への１次試験のエントリーを終えたとき、これまで**悩みながらも行動**してよかったと思いました。また家族、仲間のおかげでこういった機会を得ることができました。

娘からプログラミングのことを教えてもらわなければ、プログラミングを始めることはなかったかもしれない。

プログラミングスクールに入学しなければ、継続して学習することもなかったかもしれない。

キカガクに出会わなければ、プログラミングの新しい側面を知ることもなかったかもしれない。そして fwywd に出会わなかったかもしれない。

悩みながらも行動していったのは間違いではなかったこと。家族、仲間がいたことで前に進むことができている。私のこれまでの原体験、今の環境によって現在の私が構築されており、**今しか導き出すことができませんでした。**

## fwywd への参加

仕事を辞めずにオンラインで参加していますが、**仕事を辞めて参加すること**が前提条件としてありました。

エントリーする時点から悩みましたが、**やらないで後悔**だけはしたくなかったので、選考を受けながら考えていくことにしました。

２次試験も終わり、無事合格できました。嬉しかったです。嬉しかったですが、同時に仕事を辞めて参加するかどうかを考える日々が始まりました。

仕事を辞めたら家族の生活はどうするのか、家を売って家族と移住するべきか、私のやりたいことと子供たちの未来を天秤にかけるべきか、など本当に悩みました。

家族のために仕事は辞められないという判断にはなりましたが、自身の成し遂げたいこと、fwywd へ参加することを諦めることは出来ませんでした。

**やらないで後悔したくない、 行動するしかない**、そう思い吉崎さんに仕事を続けながらオンラインで参加できないか、メールで問い合わせしました。柔軟に対応して頂き、仕事を続けながらオンラインで参加する枠を設けていただくことになりました。

## 仕事を続けながら挑戦する意味

仕事を辞めてフルコミットで参加することが、起業への最短ルートになるでしょう。ですが、挑戦したいと思っていても、仕事を続けなければならない方が多いのではないでしょうか。仕事を続けているから挑戦（起業）できない、諦めるしかないと考えている方が多くいるのではないでしょうか。昔の私はそう考えていました。

今の私は何も成し遂げていないので、この答えをまだ持っていません。ですが**挑戦するスタートライン**には立っています。仕事を続けながらも挑戦し、起業という一歩を踏み出すことができたのなら、多くの人の背中を押すことができると信じています。

## 最後に

私は悩みながらも行動していったことで、１歩１歩ですが前に進むことができました。この記事が昔の私のように、悩み、苦しんでいる方のお力に少しでもなると幸いです。

Twitter では起業や仕事に対する考え方、ちょっとしたつぶやきなど幅広く発信しています。興味がある方は覗いて頂けると嬉しいです。

Twitter:[**@katashin_3812**](https://twitter.com/katashin_3812)


なにか始めたい、けどなにから始めたらいいのかわからない。答えを探している間に、普段の生活に戻っている方はいませんか？はい、数年前の私です。挑戦したいと思っていても踏み出せない「あなた」=「昔の私」です。昔の私に伝えたいことは、挑戦に早い遅いもなく、やりたいと思ったときがその時であるということです。シンプルな結論ですが、この結論に至るまでの過程をお伝えすることで、挑戦することに悩んでいる・諦めている方、fwywd への参加に迷っている方の参考になれば幸いです。

起業家一年生の「意思決定」やりたいことの見つけ方

2021年からReactベースのフレームワークであるNext.jsを本格的に学び始めました。昨年2020年はVue.jsベースのフレームワークであるNuxt.jsにどっぷりと使った１年であり、昨年リリースしたキカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。その昨年に１年間もかけて知見を貯めたVue.js & Nuxt.jsを離れて、React & Next.jsへ移行した背景を紹介します。

react-scroll を導入し超簡単に画面内のスクロールを実装しよう

Next.js の Jest / React Testing Library でモック (mock) を含めた render で開発効率を高めよう

Vue.js & Nuxt.js から React & Next.js へ移行した理由


## はじめに

どーも、入田 / ぐるたか [@guru_taka](https://twitter.com/guru_taka) です！

Next.js における環境変数の基本的な設定方法をまとめまています。`env` ファイルの基本的な使い方の参考になれば幸いです！

## 環境変数の基本的な設定方法

バージョン 9.4 以上の Next.js から、環境変数のサポートが組み込まれています。

> 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](https://nextjs.org/docs/basic-features/environment-variables)

環境変数を設定する基本的な方法は以下の通りです。

- 基本的には `.env.local` に環境変数を定義（詳細は後述）
- 設定した環境変数を呼び出すときは `process.env.環境変数名` とする
- ブラウザで環境変数を使用したい場合は、先頭の文字を `NEXT_PUBLIC_` とする

## 環境ごとに環境変数は変更できる

Next.js では `env` ファイル名に応じて、**開発 / 本番環境で切り替えることができます**。具体的なルールは以下の通りです。

| ファイル名               | 環境         |
| ------------------------ | ------------ |
| `.env`                   | 常に読み込み |
| `.env.development`       | 開発環境     |
| `.env.production`        | 本番環境     |
| `.env.local`             | 常に読み込み |
| `.env.development.local` | 開発環境     |
| `.env.production.local`  | 本番環境     |

基本的にシークレットな値は `.env*.local` で定義を行い、`.gitignore` でリポジトリから除外します。

一方で、`.env` / `.env.development` / `.env.production` は、リポジトリに含めます。**URL や企業名などデフォルト値などを定義するときに使いましょう**。

> Note: .env, .env.development, and .env.production files should be included in your repository as they define defaults. .env\*. local should be added to .gitignore, as those files are intended to be ignored. .env.local is where secrets can be stored.  
> 引用：[Basic Features: Environment Variables | Next.js](https://nextjs.org/docs/basic-features/environment-variables)

## 環境変数の呼び出し方

環境変数を呼び出すときは、`process.env.環境変数名` となります。**ブラウザ（クライアント側）でも呼び出したい時は、環境変数名の先頭に `NEXT_PUBLIC_` を追記してください**。

実際に環境変数を設定し、サーバー側とクライアント側で呼び出して、確認してみましょう。

まず、環境変数は以下のように定義します。

```text
// .env
FOO=hogehoge
NEXT_PUBLIC_FOO=hogehoge
```

続いて `pages/index.tsx` に、サーバー側とクライアント側で定義した環境変数を呼び出します。コードは以下の通りです。

```tsx
// pages/index.tsx
import { GetStaticProps } from 'next';

// クライアント側で実行
export default function Index(): JSX.Element {
  return (
    <>
      {process.env.NEXT_PUBLIC_FOO}
      {process.env.FOO}
    </>
  );
}

// サーバー側で実行
export const getStaticProps: GetStaticProps = async () => {
  console.log(process.env.NEXT_PUBLIC_FOO, process.env.FOO);
  ...
};
```

下図のように、サーバー側では両者ともに環境変数を呼び出せましたが、クライアント側では `NEXT_PUBLIC_FOO` のみ呼び出せています。

![env_server](/img/pages/tech/next-env/env_server.png)
![env_client](/img/pages/tech/next-env/env_client.png)

このようにクライアント側で環境変数を扱うときは、変数名の先頭に `NEXT_PUBLIC_` が必要です。注意しましょう！

## 最後に

Next.js における環境変数 (env) の基本的な設定方法を紹介しました。シークレットな値だけでなく、デフォルト値も環境変数にまとめておくことで、汎用性が増します。

ぜひ参考にしてみてください！

---

株式会社キカガク コンテンツマーケティング責任者  
入田 / ぐるたか  
twitter: [@guru_taka](https://twitter.com/guru_taka)

### 参考文献

- [Basic Features: Environment Variables | Next.js](https://nextjs.org/docs/basic-features/environment-variables)
- [next.js/examples/environment-variables at canary · vercel/next.js](https://github.com/vercel/next.js/tree/canary/examples/environment-variables)
- [NextJS における環境変数まわりの挙動まとめ](https://blog.ojisan.io/next-env)


Next.js における環境変数 (env) の基本的な設定方法をまとめまています。env ファイルの基本的な使い方の参考になれば幸いです！

Next.js(TypeScript) に Google Analytics を導入し、PV を計測する方法

Azure Active Directory B2C でユーザー認証を超簡単に実装しよう

Next.js における環境変数 (env) の基本的な設定方法


## はじめに

どーも、入田 / ぐるたか [@guru_taka](https://twitter.com/guru_taka) です！  
本記事では **Next.js (TypeScript) を環境構築し、ESLint（読み方：イーエスリント）と Prettier（読み方：プリティア）を導入する方法**を紹介します。**Next.js のバージョン 11 に対応**しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。  
ESLint と Prettier を駆使することで、**コードが綺麗**になるため、導入することを強くオススメしたいです。本記事では、VS Code 上で、ESLint で構文解析しながら、ファイル保存時に ESLint + Prettier によるコード整形する方法をハンズオン形式でまとめています。

▼ 成果物
![prettier-format.gif](/img/pages/tech/next-eslint-prettier/prettier-format.gif)
![next-eslint-import.gif](/img/pages/tech/next-eslint-prettier/next-eslint-import.gif)

ESLint と Prettier を含む Next.js (TypeScript) の環境構築の参考になれば幸いです！

### バージョン情報

- node：15.11.0
- eslint: 7.30.0
- eslint-config-next: 11.0.1
- prettier: 2.3.2
- eslint-config-prettier: 8.3.0
- next: 11.0.1
- typescript：4.3.5
- react: 17.0.2
- react-dom: 17.0.2

## ESLint とは？

[ESLint](https://eslint.org/) とは、**JavaScript のコードが正しいかどうか、検証するためのツール**です。コードの問題を発見したり、記述方法を統一できるようになり、**コードの品質を保つことができます**。

## Prettier とは？

**[Prettier](https://prettier.io/) とは、コードを綺麗に整えるフォーマッターです**。  
ESLint もコードの整形はできますが、**カバーしきれない部分を Prettier は補ってくれます**。そのため、基本的には ESLint と Prettier を併用することが多いです。

## ESLint と Preitter を Next.js (TypeScript) に導入する方法

1. Next.js (TypeScript) の新規プロジェクトを作成
2. Prettier のセットアップ
3. ファイル保存で自動フォーマットする VS Code の設定

### 1. Next.js (TypeScript) の新規プロジェクトを作成

まず、Next.js (TypeScript) の新規プロジェクトを以下コマンドで作成しましょう。

```bash
# npm の場合
npx create-next-app next-ts-eslint-prettier --typescript

# yarn の場合
yarn create next-app next-ts-eslint-prettier --typescript
```

ディレクトリ構造は以下の通りです。

```txt
├── .eslintrc
├── .gitignore
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── public
├── styles
├── tsconfig.json
└── yarn.lock
```

**Next.js では、バージョン 11 から、ESLint がデフォルトで搭載**されています。ESLint に関連するインストール済みのパッケージは以下 2 つです。

- eslint：構文解析のエンジン
- eslint-config-next：Next.js 専用の ESLint のルール

```json
// package.json
{
  ...
  "devDependencies": {
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1",
  }
  ...
}
```

Next.js の新規プロジェクト作成時に生成された `.eslintrc` は ESLint の設定ファイルを意味しており、**デフォルトで `eslint-config-next` の設定が適用**されています（ルールの詳細は後述）

```json
// .eslintrc
{
  "extends": ["next", "next/core-web-vitals"]
}
```

現在 `lint` コマンドを実行することで、構文解析ができますが、**VS Code 上でリアルタイムに構文解析することもできます**。方法は至ってシンプルで、VS Code で ESLint の拡張機能をインストールするだけです！（下図参照）

![vscode_eslint](/img/pages/tech/next-eslint-prettier/vscode_eslint.png)

実際に、構文解析されるかどうか、確認してみましょう。ルートディレクトリに `sample/index.tsx` というファイルを作成してください。コードは以下の通りです。

```tsx
// sample/index.tsx
export default function index() {
  return (
    <div>
      <img src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
      <a href="/">test</a>
    </div>
  );
}
```

下図のように、ESLint によるエラーが表示されれば成功です！

![next-eslint-prettier-1](/img/pages/tech/next-eslint-prettier/next-eslint-prettier-1.png)

エラー文の解説は、以下のようになります。

> ① Do not use img. Use Image from 'next/image' instead.  
> ② Do not use the HTML a tag to navigate to /. Use Link from 'next/link' instead.

`img` タグは `next/image` の `Image`、`a` タグは `next/link` の `Link` を使用するようなエラーとなっています。  
このように **VS Code 上でリアルタイムに ESLint で構文解析できると、コードの保守性が高まります**。

しかし、ファイル数が多いとき、**全てのファイルを VS Code で確認するのは大変**です。そのため、対象ファイルを一括で ESLint による構文解析したい場合は、`lint` コマンドを使用します。

```bash
# npm の場合
npm run lint

# yarn の場合
yarn lint
```

上記のコマンドを実行してみると、VS Code 上ではエラーが出力されているにも関わらず、**以下のように問題ない趣の結果が表示されます**。

```bash
# 実行結果
$ next lint
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
✔ No ESLint warnings or errors
✨  Done in 1.50s.
```

![next-eslint-prettier-2](/img/pages/tech/next-eslint-prettier/next-eslint-prettier-2.png)

実は、Next.js にデフォルトで搭載された ESLint では、**lint コマンドの対象ディレクトリが 以下 3 つに限定されています**。  
参考：[Basic Features: ESLint | Next.js](https://nextjs.org/docs/basic-features/eslint#linting-custom-directories)

- `pages`
- `lib`
- `components`

対処法は複数ありますが、**fwywd チームでは `src` ディレクトリに `pages` 含むソースコードを管理**。`lint` コマンドのオプションで `--dir src` とすることで、`src` ディレクトリ配下にある指定ファイルが ESLint の対象となるようにしています。  
実際に `src` ディレクトリを作成し、以下 3 つのディレクトリを管理しましょう。

- `pages`
- `sample`
- `styles`

```txt
src
├── pages
│   ├── _app.tsx
│   ├── api
│   └── index.tsx
├── sample
│   └── index.tsx
└── styles
    ├── Home.module.css
    └── globals.css
```

次に、`package.json` の `lint` コマンドに対し、`--dir src` を記述してください。

```json
// package.json
  "scripts": {
    ...
    "lint": "next lint --dir src"
    ...
  },
```

`lint` コマンドを実行し、VS Code 上のエラーと同様の結果が表示されれば成功です！

![next-eslint-prettier-3](/img/pages/tech/next-eslint-prettier/next-eslint-prettier-3.png)

本題とは反れますが、**`tsconfig.json` で `src` ディレクトリを `baseURL` として設定することもオススメ**です。
参考：[【Next.js】特定のディレクトリを基準にし、絶対パスでモジュールをインポートする方法 | fwywd（フュード）](https://fwywd.com/tech/next-base-url)

また、ESLint によるコード整形するコマンドは、以下のようになります。

```json
// package.json
  "scripts": {
    ...
    "lint": "next lint --dir src",
    // 追記
    // src --ext .js,jsx,.ts,.ts: src ディレクトリ内の js, jsx, ts, tsx ファイルを対象
    // --fix: コード整形
    "lint:fix": "eslint src --ext .js,jsx,.ts,.tsx --fix"
    ...
  },
```

実際に、ESLint でコード整形できるかどうか、動作確認します。`.eslintrc` のように、設定ファイルを記述してみましょう。

```json
// .eslintrc
{
  "extends": ["next", "next/core-web-vitals"],
  // 追記
  "rules": {
    // セミコロンない場合、エラー出力
    "semi": ["error", "always"]
  }
}
```

上記のように **ESLint で独自のルールを記述する場合は、`rules` に記述します**。詳細は [ESLint の公式ページ](https://eslint.org/docs/rules/)をご覧ください。  
すると、セミコロンがないファイル（例：`pages/index.tsx`）に対し、下図のようにエラーが出力されるようになります。

![next-eslint-prettier-5](/img/pages/tech/next-eslint-prettier/next-eslint-prettier-5.png)

以下のコマンドを実行した後、自動でセミコロンが追加されれば成功です！

```bash
# npm の場合
npm run lint:fix

# yarn の場合
yarn lint:fix
```

![eslint-fix.gif](/img/pages/tech/next-eslint-prettier/eslint-fix.gif)

このように **ESLint のルールに従って、一括でコード整形できます（便利！）**

今回 ESLint でルールを記述しましたが、以降 Prettier をメインにコード整形のルールを記述するため、先程のルールは削除して構いません。

```json
// .eslintrc
{
  "extends": ["next", "next/core-web-vitals"]
  // 削除
  // "rules": {
  //   // セミコロンない場合、エラー出力
  //   "semi": ["error", "always"]
  // }
}
```

### 2. Prettier のセットアップ

次は Prettier のセットアップを行います。まず、Prettier の拡張機能をインストールしましょう。

![next-eslint-prettier-4](/img/pages/tech/next-eslint-prettier/next-eslint-prettier-4.png)

Prettier におけるフォーマットの設定は VS Code 上でも設定できますが、**チーム開発する場合、コード整形のルールにバラツキがあると、大変です**。  
そのため、**コードベースで Prettier におけるコード整形のルールを記述**します。主な方法は、以下 2 つです。

- `.prettierrc` ファイルを作成し、ルールを記述
- `package.json` にルールを記述

fwywd チームでは、**省ファイルも意識して、`package.json` に記述**しており、以下のようなルールを設定しています。

```json
// package.json
  "prettier": {
    "trailingComma": "all",// 末尾のカンマあり
    "tabWidth": 2,// tab の長さは半角スペース 2 つ
    "semi": true,// セミコロンあり
    "singleQuote": true,// シングルクォーテーションに統一
    "jsxSingleQuote": true,//jsx もシングルクォーテーションに統一
    "printWidth": 100 // １ 行の最大文字数 100
  },
```

ルールの詳細は公式の [Options · Prettier](https://prettier.io/docs/en/options.html) をご確認ください。上記の設定を記述することで、**VS Code 上の Prettier のルールではなく、上記のルールが適用されます**。

続いて、以下 2 つのパッケージをインストールしましょう。

- prettier: 各ファイルをコマンドで、フォーマットできるようにするため
- eslint-config-prettier: ESLint と Prettier のコード整形がバッティングしないようするため

```bash
# npm の場合
npm install -D prettier eslint-config-prettier

# yarn の場合
yarn add -D prettier eslint-config-prettier
```

`.eslintrc` に対し、以下のように記述することで、**ESLint と Prettier のコード整形がバッティングしないようになります**。（公式推奨）

```json
// .eslintrc
{
  // 追記："prettier"
  "extends": ["next", "next/core-web-vitals", "prettier"]
}
```

最後に、Prettier でフォーマットするコマンドを `package.json` に記述しましょう。

```json
// package.json
  "scripts": {
    ...
    "lint": "next lint --dir src",
    "lint:fix": "eslint src --ext .js,jsx,.ts,.tsx --fix",
    // 追記
    // --write: フォーマット整形
    // --ignore-path .gitignore: .gitignore に含まれているファイルはコード整形の対象外
    // 対象ファイルの拡張子を指定
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
    ...
  },
```

実際にルールに従って、フォーマットされるかどうか、確認してみましょう。`src/sample/index.tsx` ファイルを以下のコードに差し替えてください。

```json
// src/sample/index.tsx

export default function index() {
  return (
    <div className="sample">
      test
    </div>
  )
}
```

`format` コマンドを実行後、セミコロンが付き、ダブルクオーテーション -> シングルクォーテーションとなっていれば成功です！

```bash
# npm の場合
npm run format

# yarn の場合
yarn format
```

▼ 実行結果
![prettier-format.gif](/img/pages/tech/next-eslint-prettier/prettier-format.gif)

### 3. VS Code でファイル保存時に

ESLint と Prettier によるコード整形はできましたが、開発中に**毎回コマンドを実行するのは、手間がかかります**。そこで、**ファイル保存時にコードの自動整形ができるように、VS Code の設定を行います**。設定ファイル (`.vscode/settings.json`) は以下の通りです。

```json
// .vscode/settings.json
{
  // デフォルトのフォーマッタを prettier に設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時、prettier による自動フォーマット
  "editor.formatOnSave": true,
  // ファイル保存時、ESLint による自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}
```

ファイル保存時、自動でコードが整形されていれば成功です！
![auto-save-format.gif](/img/pages/tech/next-eslint-prettier/auto-save-format.gif)

以上で、Next.js における ESLint と Prettier の基本的な設定は完了となります。

## eslint-config-next の設定ファイル

`eslint-config-next` の設定ファイルの主要な中身は以下の通りです。  
引用：[next.js/index.js at canary · vercel/next.js | GitHub](https://github.com/vercel/next.js/blob/canary/packages/eslint-config-next/index.js)

```jsx
/*
 * @rushstack/eslint-patch is used to include plugins as dev
 * dependencies instead of imposing them as peer dependencies
 *
 * https://www.npmjs.com/package/@rushstack/eslint-patch
 */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@next/next/recommended',
  ],
  plugins: ['import', 'react', 'jsx-a11y'],
  rules: {
    'import/no-anonymous-default-export': 'warn',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'jsx-a11y/alt-text': [
      'warn',
      {
        elements: ['img'],
        img: ['Image'],
      },
    ],
  },
  ...
};
```

以下の主要な ESLint のプラグインが搭載されています。

- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react): React に特化した ESLint のプラグイン
- [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks): React Hooks に特化した ESLint のプラグイン
- [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y): React Hooks に特化した ESLint のプラグイン
- [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import): モジュールのインポートに関連する ESLint のプラグイン
- etc...

上記のプラグインに加え、**Next.js 独自の ESLint のプラグイン `eslint-plugin-next` が搭載**されています。ルールの詳細は[公式サイト](https://nextjs.org/docs/basic-features/eslint#eslint-plugin)をご覧ください。  
Next.js において、**デフォルトの ESLint の設定ファイルは非常に完成度が高い**です。基本的には `eslint-config-next` をベースに、ESLint のルールをカスタマイズすることをオススメします！

## モジュールをインポートする順番を、アルファベット順になるよう設定

fwywd では、`eslint-plugin-import` が推奨するルールも反映。また、**モジュールにおけるインポートの順番を、アルファベットの順番**にしています。  
参考：[eslint-plugin-import/order.md at master · benmosher/eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md)

記述するルールは以下の通りです。

```json
// .eslintrc
{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    // 追記
    "plugin:import/recommended",
    "plugin:import/warnings"
  ],
  "rules": {
    // import の順番をルール化
    // 参考：https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}
```

このように、モジュールをインポートする順番がファイル保存時に、アルファベット順になれば成功です。もし、うまくいかない場合は、VS Code を再起動して確かめてみてください！
![next-eslint-import.gif](/img/pages/tech/next-eslint-prettier/next-eslint-import.gif)

## 最後に

以上になります。Next.js ver11 となってから、**デフォルトで完成度の高い ESLint の設定が施されており、より環境構築がしやすくなった**と感じます。  
これから Next.js (TypeScript) を環境構築しようとしている方、ESLint や Prettier の設定で悩まれている方の参考になれば幸いです！  
スタイルファイルに対しても構文解析したい場合は、[Next.js に Stylelint を導入する方法](https://fwywd.com/tech/next-stylelint) という記事にまとめていますので、是非チェックしてみてください！
ここまでご覧いただき、ありがとうございました！

---

株式会社キカガク コンテンツマーケティング責任者  
入田 / ぐるたか  
twitter: [@guru_taka](https://twitter.com/guru_taka)


Next.js (TypeScript) の環境構築から、ESLint と Prettier を導入 -> コードを綺麗に保つ設定方法をハンズオン形式でまとめました！Next.js のバージョン 11 に対応しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。Next.js (TypeScript) の環境構築をしようとしている方は必見です！

Next.js に Stylelint を導入する方法。VS Code の設定方法も紹介！

RSS フィードでエンコードエラーが発生した時の対処方法

Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう


## はじめに

React 向けにスムーズなスクロールを簡単に実装することができる [**react-scroll**](https://github.com/fisshy/react-scroll) の導入を紹介します。  
実装時間の目安は約 5 分と超お手軽です。

### 成果物

最終的にできあがる成果物はこちらです。  
ヘッダーにある `コンセプト`、`採用試験` や `ブログ` をクリックすると該当箇所までスムーズにスクロールできています。

![scroll5](/img/pages/tech/install-react-scroll/scroll5.gif)

### バージョン情報

- Node.js：15.11.0
- React：17.0.2
- Next.js：10.2.2
- react-scroll：1.8.2

### react-scroll を選んだ理由

『React scroll』で検索するとトップにヒットし、現在 GitHub のスター数が 3.4k となっているため、多くの人が利用しているメジャーなパッケージだと判断したためです。  
また、実際に導入した感想として、最低限必要な機能をしっかりと押さえつつ、導入が非常に簡単だと思いました。

ただ、GitHub のドキュメントだけをパッと見るとちょっとめんどくさそうに感じるため、こちらで `react-scroll` の導入を手軽に行いたい方向けにまとめることにしました。

## 導入手順

### react-scroll のインストール

`npm` もしくは `yarn` でインストールします。

```bash
# npm の方
npm install --save-dev react-scroll

# yarn の方
yarn add --dev react-scroll
```

簡単ですがこれで準備は完了です。  
今回は `devDependencies` にインストールするようにオプションの `--save-dev` もしくは `--dev` を付けていますが、この辺りは適宜環境に合わせてください（動かなかった場合にオプションなしでインストール）。

### react-scroll の初期設定

まずはスクロールを行いたい要素に `id` を付けます。

```html
<section id="concept">...</section>
```

そこに `コンセプト` というボタンを押してスクロールをしたい場合には以下のように設定します。

```tsx
// src/component/PageHeader.tsx

import { Link as Scroll } from 'react-scroll';

export default function PageHeader(): JSX.Element {
  return (
    <div>
      ...
      <nav>
        <Scroll to="concept">コンセプト</Scroll>
      </nav>
      ...
    </div>
  );
}
```

こちらが正しい実行結果です。

![scroll01](/img/pages/tech/install-react-scroll/scroll1.gif)

`Scroll` コンポーネントの `to` で指定した `id` までジャンプできれば正しく動作しています。

> ここで、`react-scroll` の `Link` コンポーネントを `Scroll` と名前を変えて読み込んでいる理由は、`next/link` の `Link` と混在するためです。  
> 基本的には `next/link` の `Link` コンポーネントを利用すると思いますので、ここは名前を変えておく方が無難でしょう。

### スムーズなスクロールへ

さらに今回の目的であるスムーズにスクロールするためには以下のように `smooth` を設定します。

```tsx
// src/component/PageHeader.tsx

import { Link as Scroll } from 'react-scroll';

export default function PageHeader(): JSX.Element {
  return (
    <div>
      ...
      <nav>
        <Scroll to="concept" smooth={true}>
          コンセプト
        </Scroll>
      </nav>
      ...
    </div>
  );
}
```

こちらが正しい実行結果です。

![scroll02](/img/pages/tech/install-react-scroll/scroll2.gif)

### スクロールにかける時間を調整

スクロールの時間がすこしゆっくりだと感じたかもしれません。  
ここは `duration` でミリ秒単位の調整が可能です。

```tsx
// src/component/PageHeader.tsx

import { Link as Scroll } from 'react-scroll';

export default function PageHeader(): JSX.Element {
  return (
    <div>
      ...
      <nav>
        <Scroll to="concept" smooth={true} duration={600}>
          コンセプト
        </Scroll>
      </nav>
      ...
    </div>
  );
}
```

こちらが正しい実行結果です。

![scroll03](/img/pages/tech/install-react-scroll/scroll3.gif)

### スクロール位置の調整

指定した `id` にギリギリのところよりも上に少し余白を持たせて止めたいという場合もあります。  
この場合には `offset` で調整可能です。  
上側に `50px` の余白を持たせたい場合は以下のようになります。

```tsx
// src/component/PageHeader.tsx

import { Link as Scroll } from 'react-scroll';

export default function PageHeader(): JSX.Element {
  return (
    <div>
      ...
      <nav>
        <Scroll to="concept" smooth={true} duration={600} offset={-50}>
          コンセプト
        </Scroll>
      </nav>
      ...
    </div>
  );
}
```

こちらが正しい実行結果です。

![scroll04](/img/pages/tech/install-react-scroll/scroll4.gif)

### ホバー時の装飾を調整

`コンセプト` というボタンの装飾がされていなかったため、最後にこの点を調整しておきましょう。  
通常の CSS で調整も可能ですし、Tailwind CSS での調整も可能です。  
fwywd のチームでは Tailwind CSS（JIT モード）を利用しているため、以下のように `className` で調整を行いました。

```tsx
// src/component/PageHeader.tsx

import { Link as Scroll } from 'react-scroll';

export default function PageHeader(): JSX.Element {
  return (
    <div>
      ...
      <nav>
        <Scroll
          to="concept"
          smooth={true}
          duration={600}
          offset={-50}
          className="font-medium text-[#008c8d] hover:opacity-50 hover:cursor-pointer"
        >
          コンセプト
        </Scroll>
      </nav>
      ...
    </div>
  );
}
```

![scroll05](/img/pages/tech/install-react-scroll/scroll5.gif)

これで今回の成果物に到達することができました。

## おわりに

### react-scroll の導入はたったの５分

`react-scroll` の機能は今回紹介した `smooth`, `duration`, `offset` 以外にもあります。  
こちらは [**react-scroll - GitHub**](https://github.com/fisshy/react-scroll) を参照してみてください。

もちろん自前でも実装することが可能なスクロール機能ですが、`react-scroll` を使うことでとても手軽に導入できるため、ぜひみなさんも使ってみてください。

株式会社キカガク 代表取締役会長  
吉崎 亮介  
twitter: [@yoshizaki_91](https://twitter.com/yoshizaki_91)


React 向けにスムーズなスクロールを簡単に実装することができる react-scroll の導入を紹介します。実装時間の目安は約５分と超お手軽です。

Next.js に next-sitemap を導入して超手軽にサイトマップ sitemap.xml を生成しよう


## はじめに

どーも、入田 / ぐるたか [@guru_taka](https://twitter.com/guru_taka) です！React (TypeScript) に[react-chartjs-2](https://github.com/reactchartjs/react-chartjs-2) を導入し、グラフを作成する方法を紹介します。

▼ 成果物

### react-chartjs-2 とは？

[react-chartjs-2](https://github.com/reactchartjs/react-chartjs-2) とは、グラフ化で有名なライブラリ [Chart.js](https://www.chartjs.org/docs/latest/) を React 用のラッピングしたパッケージです。[react-chartjs-2](https://github.com/reactchartjs/react-chartjs-2) は **2021/6/14 時点で、スター数は約 4,100** となっており、React でグラフを表現したい時に役立ちます。

### バージョン情報

- react：17.0.2
- react-dom：17.0.1
- typescript：4.3.2
- chart.js：3.3.2
- react-chartjs-2：3.0.3

## react-chartjs-2 の導入方法

react-chartjs-2 を使用するには、chart.js と react-chartjs-2 をインストールする必要があります。コマンドは以下の通りです。

```bash
# npm の場合
npm install -D chart.js react-chartjs-2

# yarn の場合
yarn add -D chart.js react-chartjs-2
```

## react-chartjs-2 の基本的な使い方

実際にコードをみながら、react-chartjs-2 について紹介します。

まず、棒グラフを表示するコードは以下の通りです。棒グラフのデータに関しては、Chart.js の公式ドキュメントを参考にしています。  
参考：[Bar Chart | Chart.js](https://www.chartjs.org/docs/master/charts/bar.html)

```tsx
// 棒グラフ用のコンポーネントをインポート
import { Bar } from 'react-chartjs-2';

const data = {
  // x 軸のラベル
  labels: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月'],
  datasets: [
    {
      label: 'Dataset',
      // データの値
      data: [65, 59, 80, 81, 56, 55, 40],
      // グラフの背景色
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)',
      ],
      // グラフの枠線の色
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)',
      ],
      // グラフの枠線の太さ
      borderWidth: 1,
    },
  ],
};

// レンダリング
export default function Index(): JSX.Element {
  return <Bar data={data} />;
}
```

下図のようなグラフが表示されるはずです。

![react_chart_1](/img/pages/tech/react-chartjs-2/react_chart_1.png)

今回は棒グラフでしたが、他にも以下のようなグラフが表現できます。他にも線グラフ (`Line`) や円グラフ (`Pie`) など、様々なグラフが用意されています。

```tsx
// 円グラフ用のコンポーネントをインポート
import { Pie } from 'react-chartjs-2';

...

// レンダリング
export default function Index(): JSX.Element {
  return <Pie data={data} />;
}
```

▼ 円グラフの描画
![react_chart_2](/img/pages/tech/react-chartjs-2/react_chart_2.png)

```tsx
// src/pages/index.ts
// 線グラフ用のコンポーネントをインポート
import { Line } from 'react-chartjs-2';

...

// レンダリング
export default function Index(): JSX.Element {
  return <Line data={data} />;
}
```

▼ 線グラフの描画
![react_chart_3](/img/pages/tech/react-chartjs-2/react_chart_3.png)

**react-chartjs-2 のグラフ例が公式ドキュメントでソースコードとセットで公開**されていますので、ぜひチェックしてみてください！  
参考：[React Chart.js Component Examples](https://reactchartjs.github.io/react-chartjs-2/#/)

また、Chart.js の `data` における各プロパティ（ex：`backgroundColor`）の詳細は、Chart.js の公式ドキュメントをご覧ください。
参考：[Bar Chart | Chart.js](https://www.chartjs.org/docs/master/charts/bar.html#dataset-properties)

### Props の type におけるエラー

バージョンによっては、Props で `type` にデータを渡すよう、以下のエラーが出力されるかもしれません。  
参考：[Bad type definitions · Issue #687 · reactchartjs/react-chartjs-2](https://github.com/reactchartjs/react-chartjs-2/issues/687)

```txt
プロパティ 'type' は型 '{ data: { labels: string[]; datasets: { label: string; data: number[]; backgroundColor: string[]; borderColor: string[]; borderWidth: number; }[]; }; }' にありませんが、型 'Props' では必須です。
```

Props で type にデータを渡さなくても問題なく動きますが、エラーを消したい場合は、`type` に `bar` を渡しましょう。

> **公式の README.md では、`type` が必要なのは `ChartComponent` と記述されています**。そのため、**バグの可能性が高い**です。
> [reactchartjs/react-chartjs-2: React wrapper for Chart.js 2.0 and 3.0, the most popular charting library 📊](https://github.com/reactchartjs/react-chartjs-2#type)

## グラフのサイズを変更する方法

現在、グラフが画面いっぱいに表示され、少々見にくいグラフとなっています。サイズを変更する場合は以下のようにコードを追記しましょう。

```tsx
// src/pages/index.ts
// 棒グラフ用のコンポーネントをインポート
import { Bar } from 'react-chartjs-2';

...

const options = {
  // アスペクト比
  maintainAspectRatio: false,
};


// レンダリング
export default function Index(): JSX.Element {
  return <Bar data={data} width={1000} height={300} options={options} />;
}
```

Props の `width` と `height` に、それぞれデータを渡しましょう。また、オプションとして、`maintainAspectRatio` を `flase` に設定します。Chart.js におけるオプションの詳細は、公式ドキュメントを参考にしてみてください。  
参考：[Options | Chart.js](https://www.chartjs.org/docs/latest/general/options.html)

[公式ドキュメント](https://github.com/reactchartjs/react-chartjs-2#why-doesnt-my-chart-maintain-its-widthheight)では、上記のコードで縦横の長さを指定できると述べられていますが、**下 GIF のように高さしか固定できていません**。

![react_chart_4](/img/pages/tech/react-chartjs-2/react_chart_4.gif)

オプションで `responsive` を `false` にすることで横幅も固定できますが、**レスポンシブ対応がなくなります**。そのため **`max-width: min-content` のスタイルが効いた親要素でグラフをラッピングして対応します**。

コードは以下の通りです。

```tsx
// mx-auto -> margin: 0 auto;
// bg-black -> background-color: black;検証をわかりやすくするため、背景色を黒に変更
// max-w-min -> max-width: min-content;
<div className="mx-auto bg-black max-w-min">
  <Bar type="bar" data={data} height={400} width={500} options={options} />
</div>
```

![react_chart_5](/img/pages/tech/react-chartjs-2/react_chart_5.gif)

## 最後に

以上になります。react-chartjs-2 を導入することで、イケてるグラフが簡単に導入できるようになります！

多種多様な設定ができますので、詳細は公式ドキュメントを確認し、各自カスタマイズしましょう。

ここまでご覧いただき、ありがとうございました！

---

株式会社キカガク コンテンツマーケティング責任者  
入田 / ぐるたか  
twitter: [@guru_taka](https://twitter.com/guru_taka)

### 参考文献

- [textlint/use-as-modules.md at master · textlint/textlint](https://github.com/textlint/textlint/blob/master/docs/use-as-modules.md)


React (TypeScript) に react-chartjs-2 を導入し、グラフを作る方法をまとめました。また縦幅と横幅を指定、さらにレスポンシブ対応する実用的な方法も紹介しています。React に Chart.js を導入したい方は必見です！

【Azure Functions 入門】環境構築と VS Code 経由でデプロイする方法

React (TypeScript) に react-chartjs-2 を導入し、グラフを作る方法


## はじめに

現在募集を開始している起業家育成コースの『[**fwywd（フュード）in 淡路**](/awaji)』は**受講料が無料**です。今回はこの『**受講料無料**』に込めた思い、そして、これが最終的に私の考える真の教育像に近づいていく話も含めて丁寧に背景を紹介させてください。

この受講料無料は、**単なる客寄せパンダ**としてではなく、これは**新たな教育ビジネスへの挑戦**です。

**教育に本気の革命を**。

**成果が出せる人材を輩出する教育の構造**を紐解いていくと、この**受講料無料**に帰着しました。

## 本気で変わるために必要な関係性

### 受講料が研修ビジネスの当たり前

今回の企画『[**fwywd（フュード）in 淡路**](/awaji)』は**１年間、経営と技術を学べる環境を提供する上に私が淡路島に一緒に移住してビジネスの構築に向けて一緒に伴走します**。受講料無料でないとビジネスが成立しないか？と言われるとそんなことはありません。弊社では過去に**有償で 50,000 名の方に AI・DX を含めた先端技術に関する研修を提供**しており、しっかりと報酬をいただいて仕事をしてきました。そのため、今回の企画も**相場的には数百万円の金額**をいただいて始めることも当初の計画にありました。

しかし、創業から５年目が経ち、多くの方の成長を見守る傍ら、**今のやり方が本当に正しいのだろうかと自問自答**することもありました。その背景として、受講生が講義中はとても満足して講義を受けていただいており、実際に満足度も高い一方で、その後の活躍を聞いてみると、**なかなか次の一手が踏み出せていないと悩まれている方が多かった**のです。

**受講料を支払って教えてもらう**ということは現代の学校の構造に慣れた私達にとって最も親和性の高いものです。塾も大学も、社会人になってからの研修も当然このビジネスの構造であったはずです。もちろん、弊社のビジネスも基本的には受講料をいただいてスタートします。最初の挫折を防ぎ、**自力で学んでいけるところまでの自走力を付ける**といった**学びのきっかけを与える**場合には、この受講料を最初にいただくビジネスモデルの方が、教える側、教わる側の双方にとって良いと思っています。

### 受講生との関係性の歪み

一方で、**起業家育成**のような**成果にコミットするタイプの教育**では少し構造が違います。極端な話、**たとえ受講生であっても成果が出ない場合には諦めていただくこと**を許容する必要があります。

また最終的に成果を出していただくためには、**手取り足取り教えても意味がない**のです。経験上、1 から 10 まで丁寧に教えた人よりも、1 教えると 10 まで自分でなるべく考えながら試行錯誤していく人の方が圧倒的に伸びが違います。つまり、手取り足取り教えるという教育は**易しい (easy)** だけであり、受講生の本当の成果を願うといった観点での**優しさ (kind)** ではないのだとわかりました。

しかし、残念ながらこういった成果に対してコミットが必要な教育の場合においても、受講料を支払っていただいた以上、「**お客様は神様だ**」という構造になってしまいます。サービスを受ける側と提供する側といった**上下関係のある構造**になってしまうことで、本当に言いたいことを言えなくなってしまいます。教えてほしいと望まれた以上、**本当は自力で調べるべきところでも教えざるを得なくなってしまう歪み**が生じてしまいます。

これからの時代は**きっかけを与える教育**も大切な一方で、先端技術の社会実装が進んできた昨今では、**成果にコミットするタイプの教育**も需要が増してきています（筋トレみたいですね）。

### 社員の成長がヒント

この本当に成果が出せる人材を輩出するための教育に着目し始めたのは私が組織を構築して社内の教育を始めたころからでした。キカガクでは現在 35 名の社員とともにビジネスを展開しています。

基本的な募集の入り口は講師採用のみに絞っており、全員が講義を担当できるようになった後、コンテンツ開発、セールス、マーケティング、プロダクト開発など、様々な部署に分かれていきます。そのため、バックグラウンドは文理様々ですが、**全員がプログラミングや数学などを学ぶ**ことによって、論理的思考力を鍛えてもらっています。

さて、では講師として登壇していただくための２ヶ月間の社内研修はどのように設計しているかというと、ある３日間のコースを登壇できるように**ひたすらインプットとアウトプットを繰り返すだけ**です。先輩講師の講義を見て学び、徹底的に真似しながら教える練習を行い、定着してきたところに自分の色を出していく。表面的に教える内容だけでなく、先輩に模擬授業を見てもらったときに、さらに深い質問があるため、より深いところを学んでいく。そんな**自律的な学びを中心とした研修**です。

正直なところ、**そこまで手塩にかけて育てるという感じではありません**。もちろん、モチベーションを上げていけるようにフォローしたり、迷っていそうであればヒントを出したりします。それでも、手取り足取り教えるということはありません。残念ながら２ヶ月間の研修期間で合格点に到達できない方もいらっしゃるので、みんな必死に学びます。

### 教育の前提条件が正しいか

そして、キカガクは**全員が未経験採用**であるにも関わらず、いまや大手企業の研修をたくさんいただき、**研修のコンペティションではほとんど勝っている**そうです。自分たちで言うのもなんですが、もちろん、研修での満足度は非常に高く、リピートも多くいただけるようになりました。そんな**本気で成果を出せる人材**を輩出できるようになってきた今、重要なことに気づいたのです。

それは**教育の前提条件**です。なぜ、ここまで成果を出せる人材を育てることができるのか。

その答えに**真っ向から向き合う勇気がなかった**だけかも知れません。

弊社だけでなく、**企業の社内研修では学校の学びよりも遥かに成長した**という声があります。なぜ、学校ではこの情報を教えてくれなかったのか。

### 利害の一致

その教育の前提の正体は**利害の一致**です。この関係性を築くことができないと、構造上、人の成長に対して適切なアプローチを取ることができません。

もう少し噛み砕いて説明すると、弊社の場合、**研修期間に不合格になってしまうと人件費も含め多くの機会損失が生じます**。つまり、育成対象がうまく成長しないと**弊社も一緒に損をする**という関係です。一方で、うまく成長することができると一緒にビジネス拡大を進めていけるため、**弊社が得をする**わけです。この関係性こそが**利害の一致**です。

**多くの成果が出せる人材を輩出する教育の構造**を紐解いていくと、結局、この**利害の一致**に帰着しています。

## 起業家育成の枠組み

### 受講料無料の理由

ここまでお読みいただけたのであれば、お気づきの方も多いと思います。今回の起業家育成では**成果を出せる人材**を輩出することが重要であり、そのために必要な関係が**利害の一致**となることです。したがって、受講料をいただいてサービスの提供側と受ける側になってしまった時点で、**力がうまく伝わらなくなってしまいます**。

だからこそ、今回の企画では**受講料無料**としました。だからこそ、受講生には『**私はみなさんの仲間です**』と伝えています。受講生のお世話係でもないし、ご機嫌を取るための教育係でもありません。**一緒に伴走する仲間**であり、苦楽をともにする関係です。だからこそ、手取り足取り教えることなく、**成果が出るためのマネージメント**に近しい形の教育を提供します。

『**魚を与えるのではなく、魚の釣り方を教える**』

これを関係性から正しく構築するために**受講料無料**という**スタートライン**に立つことが最も重要だったのです。

### 入口や出口でのマネタイズの課題

成果を出すために**受講料無料**による『**利害が一致した仲間**』という関係が必要ですが、それでは**ビジネスが当然成立しません**。つまり、**戦略**が必要となります。

私は受講料をいただくビジネスモデルを**入口型**と呼んでいます。その一方で、転職支援などでマネタイズを行うモデルが**出口型**と言えます。一番わかり易いところでは、起業家としてなかなかうまくいかなかった際に、転職を薦めて人材紹介で報酬をいただくこともできます。もちろん、これも選択肢には入っていますが、ただこれをメインの収益源にしようとすると、起業家を育てるというよりも**転職支援のためのサービス**に構造的になってしまいます。起業家を目指して本気で挑戦する中で企業の新規事業担当としての選択を取ることは良いと思いますが、最初から市場価値を高める転職のために来られても本気度が低く、この企画の意図に沿いません。

また、起業家側からの希望があれば**投資家**として関わっていくことも本企画では想定しています。ただし、**社会課題の解決**を目指すためには短期利益の追求では歪みが生まれてしまうため、なるべく**自己資本で自由度が高く取り組めることが望ましい場合**も多いと思います。そのため、VC が実施するアクセラレータープログラムやインキュベート系のプログラムのように**投資を受けてからスタート**としてしまうと構造上の欠陥がゆくゆくは浮き彫りになってしまうのです。

私達は**最短 Exit 主義のユニコーン企業**だけではなく、**社会貢献と長期利益を目指すゼブラ企業**の挑戦も支援していくために、**投資家としては関わらない**という選択肢も用意したかったのです。

### 過程でのマネタイズという選択

そこで、[**fwywd（フュード）**](/)が注目するのは『**過程**』でのマネタイズです。最近では**プロセスエコノミー**という書籍も発売されるなど、私が長年注目してきた領域でした。たとえば、アイドルグループの NiziU がデビューまでの過程をビジネスにしていたような話が代表的です。つまり、**成長の過程**をビジネスに変換するのです。

今回の起業家育成の企画では、参加者に**情報発信**を行っていただきます。まさに、みなさんが今読んでいただいているこの記事のように、自身の考えやアイディアを発信していただきます。

![情報発信の連鎖](/img/pages/blog/challenge-of-a-new-education-business/01.png)

情報発信を行っていただくことは、もちろん、**起業を志す挑戦者にとって必要な道筋**だからです。

最近ではプロダクトを作ってから検証するといった失敗例をよく聞きますが、プロダクトを作るよりも、市場に対して最小のコストで仮説検証を行えるのが**情報発信**です。そこで反響がなければ、プロダクトを作ったとしても、当然ユーザーは集まりません。そもそも、情報発信などで獲得した**ファン**が存在しない場合は、**仮説検証すら空振り**してしまうのです。

起業家にとっての基礎体力は**言葉の力**であり、これを磨くためには**情報発信**が必要なのです。言葉の力が強い人には**ファン**、**顧客**、**仲間**、**投資家**と多くの人が集まるはずです。私もこの言葉の力を磨くことにより、いまの会社の礎を築くことができました。

### フックと回収の戦略

起業家志望の方が情報発信を行い、ファンや顧客を獲得していくところを [**fwywd（フュード）**](/)では**教育**と**プラットフォーム**の力で支援します。

**教育**は単純で読まれるための文章や構成の考え方などを伝え、あとは実践を通して経験から学んでいただくだけでわかりやすいと思います。

![プラットフォーム](/img/pages/blog/challenge-of-a-new-education-business/02.png)

**プラットフォーム**の力で支援とは、ある参加者 A さんが情報発信を行うと、その記事を読んで興味を持った方が別の参加者 B さんの情報にも遷移することがあります。また、良質な記事の発信が多くなることにより検索にもヒットしやすくなり、**個の力で取り組むよりも大きな結果が得られます**。参加者の力を合わせることで、この**規模の経済を効かせていくことが狙い**です。

また、読者が増えるということは**リード顧客**が増えることにも当然繋がります。起業における最初の困難である**集客**という問題にも、**個で取り組むよりも大きな成果に繋げることができます**。もちろん、このプラットフォームは発射台として利用していただければ OK で、大きくなって独自の顧客を確保できるようになってきたころには、健全なビジネスのために、独自の情報発信手段に乗り換えてもらうことを推奨しています。

このように、参加者同士での情報発信が規模の経済を生み、**一人で起業して挑戦するよりも遥かに大きな Win が参加者にあります**。その良質な情報を集めたプラットフォームを作ることができれば、弊社にとっては大きな**フック**となります。弊社ではいくつものサービスを展開しているため、**知名度が上がること**で**回収**できるマネタイズの手段があります。この**フック**と**回収**を戦略的に作ることでビジネスを伸ばすことができ、**回収**を既に持っている弊社にとっては**フックの構築ができることが Win** となります。

### ビジネスとして Win-Win の関係

参加者としては、**自身のファンや顧客の起点となる記事の PV 数が伸びるほど Win** です。弊社としては、**プラットフォーム上での PV 数が伸びるほど Win** です。つまり、それぞれの利害が一致しており、参加者の情報発信に対する PV 数が伸びなければ、我々も損をすることになるため、必死に情報が広がるように支援していくのです。

Win-Win とは良く意識高い系の言葉で言われることがありますが、**本当に成果を出すための支援をするためにはこのような Win-Win の関係を戦略的に築くことが重要**だと痛感しています。構造的に一方向のみが得をするようなサービスの作り方では**持続可能な成長を遂げることができない**のです。

この [**fwywd（フュード）**](/) の仕組みでは、継続するほど情報が蓄積して、より検索に対する力を増していくことで、知名度が低い場合でも情報が届きやすくなります。つまり、**過去の先輩の力が次の世代の起業家に繋がり、その成長を支援することもできるのです**。

これが**起業家を輩出するための真のエコシステム**であり、[**fwywd（フュード）**](/) は**全ての起業家の起点**になることを目指しています。

## おわりに

本企画は声高々に挑戦を宣言していますが、弊社キカガクの中でも**まだまだ実験的な立ち位置**です。そのため、いくつかの無料講座の提供には踏み込みはじめましたが、多くは受講料をいただいて実施しています。もちろん、社内のメンバーとは今回の企画を皮切りに、**受講生と良き仲間となるような構造に変革していけると良いよね**と話しております。現存の講座は受講料をいただく以上、もちろん精一杯の講義を務めます。

**変革にはトリガーが必要**であり、なんとしても今回の企画を成功に導き、**教育に新しい風を吹かせられるよう尽力する所存です**。このように**過程によるマネタイズでのビジネス化**が実現できると、**経済状況による教育の機会格差を減らすこと**ができます。

まだまだ私達ではそこまで踏み込める力があるとは言えませんが、より良い社会へ向けて一歩一歩進んで行きます。ぜひ、[**fwywd（フュード）**](/)含めまして、[**キカガク**](https://www.kikagaku.co.jp)をこれからも温かくご支援いただけますと幸いです。

長文となりましたが、最後までお読みいただきまして、誠にありがとうございました。

株式会社キカガク 代表取締役会長  
吉崎 亮介  
twitter: [**@yoshizaki_91**](https://twitter.com/yoshizaki_91)


現在募集を開始している起業家育成コースの『fwywd（フュード）in 淡路』は受講料が無料です。今回はこの『受講料無料』に込めた思い、そして、これが最終的に私の考える真の教育像に近づいていく話も含めて丁寧に背景を紹介させてください。この受講料無料は、単なる客寄せパンダとしてではなく、これは新たな教育ビジネスへの挑戦です。教育に本気の革命を。成果が出せる人材を輩出する教育の構造を紐解いていくと、この受講料無料に帰着しました。

起業家を英語で何という？ Debt や Equity など起業に頻出の用語も紹介

「好きなこと」か「得意なことか」のどちらをビジネスに選ぶべきか

受講料無料は新たな教育ビジネスへの挑戦である


## はじめに

これから起業も含めた新しいビジネスを考えるときに、ぶつかる大きな分岐点があります。  
それは、あなたが「**好きなこと**」か「**得意なこと**」のどちらをビジネスに選択するかです。  
もちろん、全てに通じる答えがあるわけではありませんが、経験上、多くの場合は**得意なこと**がビジネスへ繋がっていきます。

## 多くの人は好きなことから考え始める

### 起業とは自由な選択に思える

多くの人にとって**起業**とは**自由の象徴**のように思えているはずです。  
どのような選択を行うも自身の自由であり、だからこそ、**好きなことを仕事にしたい**と思うはずです。

すでに上場などで Exit してお金に余裕がある場合は、余生に対する仕事はこの考え方で進めても良いでしょう。  
ただし、この記事を読んでいただいている多くの人にとっては、これからの資産を形成するための初めての起業であるはずです。

### 好きなことをビジネス化するときの落とし穴

好きなことをビジネス化するときに、多くの人が『**好きだから安くて良い**』と甘い目線で始めてしまいます。  
これは転職するときのキャリアにも共通することで、**ゲームが好きだからゲーム業界で働きたい、だから給料は低くても良いと考える行動原理と同じ**です。

好きだからこそ、ビジネスというよりも自身の人生と一致させて始めたい。  
この思い自体は良いのですが、**この稼げない結末は、結局自分自身とそのユーザーを滅ぼすことに繋がりかねません**。

この**稼げないビジネスの結末**は以前の記事で綴っているので、ぜひこちらをご覧ください。

▶ 参考：[**儲からない社会課題ビジネスにおける最大の被害者は誰か**](/blog/victims-of-social-issues-problem)

## 得意なことにたどり着く

### 他の人よりも成果が出やすいから得意

当たり前のことですが、**得意**とは**他の人よりも成果が出やすい領域**です。  
私の尊敬する**瀧本哲史**さんの名言に『**適当にやってもそこそこ上手くいっていることは、徹底的にやって卓越した結果を出せる領域である。**』とあります。

ビジネスとは**他の人の課題を解決して対価を得る行為**と理解することができます。  
したがって、好きか嫌いかよりも、**他の人よりも成果が出やすい領域**であることが重要なのです。

### 好きなことにはお金を払う

キカガクの顧問としてお世話になっている元 P&G のトップデータサイエンティスト、現今村商事の今村さんがこんなことをおっしゃっていました。

> 誰かがやりたくないこととか、めんどくさいこと、簡単じゃないことを引き受けるから、お金が貰える。  
> 純粋に楽しかったら、お金払わないといけない。

引用：[今村さんの Twitter より](https://twitter.com/ShuImamuraCorp1/status/1447281408322400257)

私もこの言葉の通りだと思っています。  
好きなこと、楽しいことにはむしろ**お金を払う**ものです。

だからこそ、楽しいことを仕事にするよりも、人の課題を解決する**得意なこと**の方がビジネス化に繋がりやすいのだと思います。

## おわりに

今回は説得力を持たせるために尊敬する方の言葉を借りながらと反則気味でしたが、ビジネスを考えるときに「好きなこと」か「得意なこと」のどちらを選ぶと良いかの判断基準の一助になれば幸いです。

最後に私の考えを私の言葉で書いておくと、以下の手順でビジネスを考えてみると良いと思っています。

1. 「好きなこと」でビジネスを考える（特にマネタイズが持続可能な成長を踏まえて成立するか）
2. 「得意なこと」でビジネスを考える

私個人としては、まずは**好きなこと**でチャレンジしてみて欲しいという気持ちです。  
一方で、先述したように、持続可能な成長をおろそかにしたビジネス化はあなた自身でなく多くの人を不幸にするため、それは避けましょう。

まずは、**考えてみることが何もかもの始まり**ですので、ぜひ色々なアイディアを考えてみましょう！

今回の記事で、社会課題を解決するべく起業への思いが奮い立った方は、淡路島から始まる挑戦に最高な１年間を提供する『[**fwywd（フュード）in 淡路**](/awaji)』でお待ちしています！

最後までお読みいただきまして、誠にありがとうございました。

株式会社キカガク 代表取締役会長  
吉崎 亮介  
twitter: [**@yoshizaki_91**](https://twitter.com/yoshizaki_91)


これから起業も含めた新しいビジネスを考えるときに、ぶつかる大きな分岐点があります。それは、あなたが「好きなこと」か「得意なこと」のどちらをビジネスに選択するかです。もちろん、全てに通じる答えがあるわけではありませんが、経験上、多くの場合は得意なことがビジネスへ繋がっていきます。

儲からない社会課題ビジネスにおける最大の被害者は誰か


## はじめに

現在、起業家育成コース『[**fwywd（フュード）in 淡路**](/awaji)』の立ち上げにあたり、これから起業を志す**起業家の卵**のアイディアを壁打ちする機会があります。  
**地方**、**医療**、**介護**、**教育格差**など社会課題の解決を目指し、戦う姿を日々見ることができます。

さて、話は変わりますが、私は好きになれないタイプの人がいます。  
１つ目は『**他人の批判はするのに、自分は行動しない人**』です。  
そして、もう１つは『**儲からないのに夢だけ語る人**』です。  
前者に関しては理解が容易かもしれませんが、私は後者の罪も大きいと感じています。

この『**儲からないのに夢だけ語る人**』が生まれやすい領域が**社会課題**です。  
教育格差をなくすために、無料で小中学生向けにプログラミング体験会などを開くといった話をよく聞きます。  
その行動自体は素晴らしいことだと感心していますが、ここで少し立ち止まって考えてみませんか。

『**儲からない社会課題ビジネスにおける最大の被害者は誰か**』

## ストーリー

今回は身の回りにある話をまとめ、**ストーリー仕立て**で紹介します。  
この話はあくまでフィクションです。

### 起：困っている人を助けたい

小学生にも**プログラミング教育**が必修となる社会を迎え、地方に住んでいた A 子さんは東京などの都市部との教育の格差を感じていました。  
自分の子供にはなるべく良い教育を受けさせたいと都会に移り住むことも考えましたが、これは自分たちの家庭だけでなく、**多くの地方が抱える問題**であると気づきます。  
この社会課題を解決すべく、憧れだった**起業**をしてみるのはどうだろうか。

自分たちを含めた困っている人を助けたいという**ピュアな思い**が A 子さんを突き動かしました。

### 承：人に教えることの楽しさ

知り合いに話をすると、空いているスペースを無料で貸していただけることに。  
地方が抱える課題を解決しようと志す A 子さんには**多くの味方**がいました。  
友達のお母さんにも話すと、運営をぜひ無料でも手伝いたいと申し出があり、**順調なスタート**。

最初はどんな風になるかわからないし、お試しなので、参加も無料で計画を開始。  
運営スペースや人件費もかからないので、黒字にはならないけれど、**赤字にもならない**ので OK。

TV や YouTube で誰もが**英語**と**プログラミング**を学んだ方が良いという時代。  
同じ小学校の生徒にクチコミで広がり、あっという間に定員が満席。

イベントも準備は大変でしたが、結果は**大成功**。  
自分の子供が喜んでくれたことは当然嬉しかったのですが、想像以上に**人に教えるということの楽しさ**を実感できました。

### 転：無料と有料の見えない壁

お試しでは**無料**で開催したものの、次は**ビジネスとして成立させる**べく動きます。  
今回、こんなに喜んでもらえたので、プログラミング塾としてもいけるだろう。  
小学生の塾は月謝が 20,000 円でも高い方なので、1 人 10,000 円としよう。  
20 人を受け入れるとなると、サポートが必要なので、知り合いのお母さんには時給 1,500 円でお願いしよう。
過去のイベントの成功がビジネスへと加速させていきました。

知り合いのお母さんは**負担がそこまで大きくならない**ならばと承諾をしてくれました。  
体験イベントへ参加してくれた家にプログラミング塾の話をすると、思いのほか、反応がよくありませんでした。  
**無料と有料には雲泥の差**があり、この点を楽観視していたのです。

結果的に、無料のイベントに来てくれた 3 人がプログラミング塾に入会してくれることになりました。

### 結：持続可能なビジネスを成立させる難しさ

想定以上に少なかった入塾者により、初月の売り上げは 30,000 円。  
知り合いのお母さんのパート代が 12,000 円で、場所代が 50,000 円。  
自分の給料を払うどころか、30,000 円以上の赤字です。

しかも、知り合いのお母さんも日によっては行けないこともあり、日程の調整が大変。  
苦労している上に赤字で、子供達も慣れてくると勉強を嫌がり、モチベーションを維持させるのも大変。

**こんなことなら、このビジネスを始めなければ良かった。**

そして、この３ヶ月後、結局うまく軌道に乗せることができずにビジネスを閉じることを決めます。  
入塾してくれていた子供達は中途半端にしか学ぶことができず、結局、**地方の教育格差は解消されないまま**。  
むしろ、プログラミングでできることが分からずじまいで、**プログラミングへの印象が悪くなってしまいました**。

## 儲からないビジネスの最大の被害者はユーザー

### 社会課題は戦略なしでは解決できない

このストーリーでは極端な展開としていますが、私の周りでは近しい話をよく聞きます。  
教育の格差という社会問題があるから『**志**』だけの**無計画**で始めてしまう。  
**戦略がないから、結局続かない。**  
そして、最終的にはそのツケは**ユーザー**へ回ってくるのです。

これが冒頭に述べた『**儲からないのに夢だけ語る人**』の正体です。  
使命感で燃えているのは結構。

ただでさえ難しい社会課題の解決には『**戦略**』が不可欠です。  
**ボランティア精神**とか**奉仕の心**とか、そんな甘えでは変えられないぐらい深い闇を抱えているのです。

### 社会課題をビジネスに変換

では、まず社会課題を解決するためには何をするべきか。  
それは、**社会課題をビジネスへ変換すること**です。

この問題設定の変換を正しく行うことができれば、『**課題を解決する = 儲かる**』の構造が出来上がります。  
儲ける構造ができあがれば、関わる社員の待遇を改善することができます。  
社員が学べる余裕も作ることができ、成長を促すことができます。  
待遇が良いと能力の高い人から応募もきます。

つまり、**『儲かる』とは好循環の始まり**なのです。

では、**どのように社会課題をビジネスへ変換すると良い**のでしょうか。

## 押さえるべきは２つだけ

### ユーザーの課題解決

私は起業した最初に Kaizen Platform の須藤さんの起業家向けの講演を聞く機会があり、これが今でも本当にラッキーだったなと思います。  
直接の面識はないので予想ですが、須藤さんはリーンキャンバスのような細かいフレームワークを埋めるのは面倒で、ぶっちゃけこの２つを押さえておくと良いよと教えていただきました。

その１つ目が**ユーザーの課題解決**です。  
『**誰の**』『**どんな問題を**』『**どうやって**』解決するか。

まず、ビジネスアイディアを考えるときには、この３つを文章でまとめるようにしています。  
これは社会課題を考えるときに多くの人が頭の中で思い描いているため、書き出すことは難しくないはずです。

つまり、多くの人はこの**ユーザーの課題解決**は考えられている一方で、何かが欠けてしまっているのです。

### ビジネスの課題解決

絶対に忘れてはいけないのが**ビジネスの課題解決**です。  
ユーザーの課題が解決できたとしても、ビジネスとして課題が解決できていなければ、冒頭で紹介したストーリーのように遅かれ早かれ縮小してフェードアウトしていきます。

ビジネスの課題解決では『**誰の**』『**どんな予算を**』『**何と比較させて**』ひっくり返すか？を考えます。  
お金を出す人は誰か。  
どんなお財布があるか。  
競合や他に使っていたお金をどうやって自分の方に引っ張ってくるか。

特に『**何と比較させて**』というところが肝です。  
起業をして新しくビジネスを開拓するときには、もともと使われていたお金なんてなくても、財源も新たに開拓してやる！と意気込むかもしれません。  
知名度と信用があれば実現可能かもしれませんが、実際には**新しい財源を確保することは非常に難易度が高い**のです。  
だからこそ、現在すでに通っている川の水（財源）をどうすれば自分の方に引っ張ってくることができるのか。  
これが答えられない限りは**ビジネスではない**というわけです。

この『**ユーザーの課題解決**』と『**ビジネスの課題解決**』の２つを答えられるように設計することで、『**社会課題 → ビジネス**』へと変換されるのです。  
ビジネスとして儲かる仕組みがあれば、**持続可能な成長**へと繋がり、より大きな課題解決が可能となります。

▶︎ 参考資料：[**ビジネスモデルの作り方**](https://www.slideshare.net/sudoken/ss-65668543)

## おわりに

絶対により良い方向に導いて欲しいからこそ、**社会課題の解決には戦略を**。  
志半ばで諦める人を見てきたからこそ、生優しい言葉は掛けません。  
**社会課題をビジネスへと変換し、儲ける仕組みで課題を大きく持続可能に解決していって欲しい。**

最後に、社会課題に注目している人に欠けている能力の１つである『**儲ける力**』。  
これを補うことができる本を紹介します。

▶︎ 参考書籍：[**金儲けのレシピ**](https://www.amazon.co.jp/dp/B08NPX48MQ/)

この書籍自体は社会課題の解決という観点はなく『**儲ける**』ということに終始しています。  
私はとにかく儲かればそれで良しとは思わないため、少し意に反するところもあります。  
しかし、それよりも意に反するのは『**儲からないのに夢だけ語る**』ことです。  
本当に社会課題を持続可能な形で解決したいのであれば『**儲ける**』ということも正しく勉強して、その力を良い方に使えるようになってください。

今回の記事で、社会課題を解決するべく起業への思いが奮い立った方は、ぜひ私と一緒に起業を志しましょう！  
淡路島から始まる挑戦に最高な１年間を提供する『[**fwywd（フュード）in 淡路**](/awaji)』でお待ちしています！

今回も長文にお付き合いいただきまして、誠にありがとうございました。

株式会社キカガク 代表取締役会長  
吉崎 亮介  
twitter: [**@yoshizaki_91**](https://twitter.com/yoshizaki_91)


『儲からないのに夢だけ語る人』が生まれやすい領域が社会課題です。教育格差をなくすために、無料で小中学生向けにプログラミング体験会などを開くといった話をよく聞きます。その行動自体は素晴らしいことだと感心していますが、ここで少し立ち止まって考えてみませんか。『儲からない社会課題ビジネスにおける最大の被害者は誰か』