ブログ

  • 初めての副業にプログラミングをお勧めしない理由【独学はやめとけ】

    初めての副業にプログラミングをお勧めしない理由【独学はやめとけ】

    この記事を読んだ方がいいひと
    • プログラミングって在宅でできて稼げそうだなと思っている人
    • Progateとドットインストールやってみてなんか自分にもできそうと思った人
    • プログラミングってHTMLとかCSSでしょって思ってる人

    数ある副業の中でもプログラミングは人気の一つだと思います。2018年頃から人気が高まり、コロナ期間を経て在宅でもできるというのがメリットに挙げられるようになりさらに人気が出てきましたよね。

    とはいえ人気が出てくるといろんな情報が世に出回るようになる+スキルの低い人も参入するようになってくることで
    『プログラミング 稼げない』みたいなことを謳う記事が出てきました。

    まぁ、そういった記事って『独学でやっても稼げないんだからスクール行っとけ、いいとこ紹介するよ』とアフィリエイトリンクを置いていることも往々にしてあるわけです。
    詳しくは前回の記事を見てみてください。

    そもそも論:やりたいのはプログラミング?

    副業しようと考えて、『プログラミング』に辿り着いたまではいいと思います。
    でも調べて出てきたのって『何はともあれProgateで学んでみよう』『ドットインストールで始めてみよう』というものじゃなかったですかね?
    そのあとはサイトの模写をしてサーバーを契約してポートフォリオを作って営業していきましょう!みたいな流れ。

    これって実はほとんどプログラミング要素が絡んでないんです。いや、厳密にはコンピュターに指令を出して文字や画像を表示させたりしているので、プログラムではあるのですがアプリやシステム構築していく上での表層を担っている状態です。

    現段階で扱うのはHTMLとCSS、あとはちょっぴりのJavascript。もしかしたらWordPressでコンテンツを作ってる人もいるかもしれません。
    HTMLはマークアップ言語、CSSはスタイリングシートであっていわゆる『プログラミングで稼ぐ』のレールからはちょっと外れます。

    HTMLやCSSとちょっとのJavascript、WordPressで稼いでいくというのは『Web制作』という分野になりますし、さらにいえばweb制作の中の『コーディング』という部類になります。

    図にするとこんな感じ。

    副業したい!→プログラミングできるようになりたい!と思っていたら、気づいたらコーディングのところまで来てしまっているわけです。

    断っておきたいのは、Web制作を否定するつもりは全くないということ。

    ただ、コーディングができる「だけ」ではweb制作はできません。web制作をするにはデザインも、サイトに掲載する文章も作る必要があります。

    もちろん、自分はデザインとかライティングできないけど誰かと協業して稼いでいくんだ!というのでもいいと思いますしそういったチームを作って動かれている方もたくさんいらっしゃいます。

    でもそうなると顧客とやり取りしつつ、デザイナーやライターさんともやり取りをする、それを副業の時間の中でやるというハードモードに突入します。
    せっかく時間をかけてスキルを身につけたと思っても稼げるまでにはさらに時間がかかってくるわけですね。

    プログラミングで稼げるようになるには綿密な計画が必要

    ではコーディングスキル(HTMLやCSS)ではない、プログラミングで稼いでいくにはどうしたらよいでしょうか?

    今回は個人で、副業で稼いでいくということを念頭に置いて話を進めます。

    まずはどうやって収益を得るのかマネタイズを考える

    最初にするのはプログラムをカタカタやることではありません。どういった方法でお金を得るのか考えることです。

    作ったアプリケーションにたくさん人を呼び込んで広告収入を得るのか、月額課金などのサブスクモデルで収益を得るのか、何か有料の商材を用意するのかなどなど。

    いろんな収益モデルはありますが、まずどういったものが自分の将来に合っているかということを考える必要があります。

    マネタイズするためにはどんな見た目・機能があったら良いか考える

    マネタイズ方法が固まったら、どんな機能があったら顧客が使いやすいのか、みてくれるのかを考えることになります。ここは100%決めていく必要はなく、作っていく中で修正もでてきますのである程度でも構いませんが決めておく必要があります。

    やっちゃいけないことは、考えなしにプログラミングに手をつけることです。考えなしにとりあえずプログラミングをスタートしようとすると、入門アプリなんかを通してその概要の表面だけは学ぶことができますが、だんだんと関係のない部分まで学ぶことになってきます。ほんとその流れなんです笑

    見た目や機能を考えたらプログラミングに取り組む

    実際にはプログラミングする前にデータベース設計という手順もあった方が良いのですが、ここまできてやっとプログラムの方に頭を移します。

    ただ、この時点ではまだ何も書かず必要となる機能から逆算して何の言語を学んだら良いかということを決めていきます。

    言語が違うと指令の出し方が変わってくるので、不用意に作り始めない方が手戻りが少なくなります。

    もちろん得意な言語ができてくれば何でもそれで作っちゃう!という人もいるかもしれませんが、副業始めたての人には無理な話ですよね。

    補足:プログラミング中の手順

    • 必要となる機能から逆算してフレームワークを考える
    • フレームワークが決まるのでプログラミング言語が決まる
    • プログラミング言語に応じた機能パックであるライブラリを選定する
    • フレームワークデフォルトの機能やライブラリを駆使して機能面を実装する
    • 見た目を整える
    • デプロイ先のホスティングサービスを決定する
    • 必要に応じて独自ドメインを取得する
    • ホスティングサービスとドメインを連携してサービスをデプロイする

    といった流れになります。これを一人でやっていこうとするとほぼ挫折します。AIによる回答でも以下の通りです。

    ここまで記事を読んでみて自信を失った、わからない単語があったという人はぜひ公式LINEで私あてにメッセージをください。スクールに通うよりも徹底的に伴走して副業のためのサポートをいたします。

    友だち追加

    まとめ

    この記事で伝えたいこと
    • プログラミングとWeb制作とごっちゃになってかんがえがち
    • プログラミングで、個人で稼げるようになるには綿密な計画が必要になる
    • プログラミング独学の挫折率は90%以上とも言われる

    ・難易度が高い

    ・時間効率が悪い

    ・不確定要素が強い

    というところで副業の初心者にはおすすめしないし、まして独学でやってみよう!なんて軽い気持ちだったらほんとやめておけです。

    それでも何とか副業したい!という熱意があればぜひ公式LINEに登録してみてください

  • コメディカルが副業をするときに考えるべきこと

    コメディカルが副業をするときに考えるべきこと

    この記事を読んだ方がいい人

    • 医療職として働いているけど副業もやってみたいなと考えている人
    • 副業について調べてみてるけど行動にまだうつせていない人
    • 副業を始めてゆくゆくは在宅でできる仕事のスキルを身に付けたいと考えている人

    医療職として働き続けることは安泰か?

    あなたがコメディカルとして資格やスキルを持っていることは非常に良いメリットだと思います。いわゆる手に職系の仕事でさらに病院や医院、クリニックで勤務されている『医療職』は世間的にみて非常に安定感が強いです。

    医療の業界を飛び出て感じますが、我々の仕事はケガや病気に困った人を救っていくような内容なので人から感謝されることが本当に多いです。
    ただこれって社会的には決して当然のことではなく、すごく医療業界の特徴的な部分でもあると思います。

    ただ、近年病院経営もずっと安定しているというわけではなく、むしろ病院の倒産が相次いでいるというニュースも出てきています。

    https://news.yahoo.co.jp/articles/3a6257fd1a14c5f22a6b40f636d7146d67b8f9ac

    医療業界全体で見たらまだ安定の域ではあると思いますが、自分が勤めているところが突然倒産してしまう、業績悪化でボーナスカット、給料カットといったことが増えることも予測されます。

    そういったときに、同じ資格を利用して働き続けることもいいですが、自分のこの先の人生を想像してみて、少しでも家族と一緒にいる時間を作りたい、時間と場所にとらわれない生活をしていきたいという思いがあるのなら「副業」を始めてみるのがお勧めです。

    世の中にある副業を勧める情報の罠

    副業を解禁する企業が増え、少しずつ副業自体の知名度が上がってくるといろんな情報が世に出回るようになります。

    副業について調べようとしたら「副業 始め方」とか「副業 おすすめ」とかそういった予測も出てきますよね。

    副業、というか仕事にはいろんな種類がありますが、今回は特定の資格がなくても始められるものを『副業』と捉えて話を進めたいと思います。
    医師や看護師も関連病院でバイトする、みたいな話もありますが、こちらは特定の資格がないと働けないわけなので、今回の記事でいう「副業」とは切り離して考えます。

    さて、誰でも自由に始められることがメリットの副業ですが、「副業 始め方」とかで検索しても期待する検索結果が得られないという経験はありませんか?

    もっというと、副業のことを知りたかったはずなのに、なんやらクラウドーソーシングサイトに登録を促されたり、副業の中でも人気のあるプログラミングとかだと、スクールの面談を申し込もうと記事内で誘導されたり…

    もしまだ経験ない人も、調べて上から記事を読んでみていってください。●●スクールの評判とか▲▲スクールの無料面談、会員登録みたいな記事がわんさか出てくると思います笑

    別にそういった記事自体を否定するつもりはありませんし、事実、スキルを見につけるためにスクールに通う方が稼げるようになりやすい方もいます。

    でもそういった記事や広告記事が多いのは、スクールの面談とかカウンセリングとか、何なら入会を決めてもらったらその紹介者(今回で言うと記事の作成者)に対して報酬が入ることが大きいんですよね。

    あとは何かと理由をつけて有料のコミュニティに入会を促したりといった記事も見つかるでしょう。たくさんの仲間と共に進もう!みたいな。

    私が言いたいのはそれらの否定ではなく、検索して出てきた情報を全て鵜呑みにして、自分の都合のいいように解釈してカモられないでねということです。

    ビジネスマッチングサイトへの会員登録くらいだと無料でできるので、デメリットはそんなないかもしれませんが、スクールやコミュニティについては良し悪しありますので、まずは「こんなに入会で報酬がもらえるスクールがあるのね」という感じで見てみてください。一回落ち着いてください笑。

    2024年時点では無料の情報は飽和してきていると思いますので、一歩踏み込んだことを学ぼうと思ったら有料の講座やスクール利用もありですが、それまではyoutube学習などでも十分スキルは身につけられます。

    副業を始めたいのであればまずは目標地点を決めよう

    副業したい、と少しでも感じたあなたはなぜ副業に興味を持ったのでしょう?

    • 別業界のスキルを身に付けたいから?
    • 在宅でできるスキルを身に付けたいから?
    • 場所と時間にとらわれない働き方を夢見たから?
    • 今より少しいい生活にしていきたいから?
    • 将来独立して優雅な生活をしたいから?

    いろんな理由があると思いますが、まずは目標地点を決めることをお勧めします。

    月に●万円稼げるようになりたい、今の仕事を●月までに退職したい、毎週子供とお出かけできるような金銭的・時間的自由を掴みたい。

    目標は大きくて構わないので、言語化・文章化しましょう。

    目標が決まって、さらにその目標までの期間が決まると、そこでやっとどんな副業をしていくのが良いのか、副業していくことでのリスクはどんなことがあるのかといった話に進んでいきます。

    こういったことを自分で考え出すと、悶々と何時間も使ったり思考が堂々巡りしてしまうこともあるかと思います。
    私はそうでした笑。

    今ならchatGPTに聞いてみたりするのもいいかもしれませんが、やっぱりリアルな誰かに聞いてみるのがいいと思います。仮にその後にサポートをお願いするにしても、あなたのことを何にも知らない人にお金を払って依頼するよりも、少しでもあなたの目標ややるべきことを理解してくれている人にサポートしてほしいですよね。

    副業メンターやってます

    そんな私は副業で物販を始め、業務の外注化をしながら1年間ECサイトの運営をしてきました。その中でリスト管理のために利用していたスプレッドシートで、業務の自動化という部分にすごく興味をもちプログラミングを学びはじめました。

    独学でプログラミングのスキルとweb制作のスキルを身に付け、フリーランスとして独立しました。
    独立後もスキルの幅を広げ、今ではデザイン、動画編集の仕事も請け負ったりしています。

    在宅でできるスキルを身に付けたことで子供と過ごせる時間が増え、毎日の幸福度がすごく上がっています。
    医療職として感謝される生活というのも非常に楽しかったけど、あのときチャレンジしてみてよかったと思ってます。

    私がフリーランスとして仕事をしていく中で感じたことは、医療職というのはビジネス全体で見たらすごく狭い領域だったんだなということ。ビジネスメールの書き方からチャットツール、オンラインミーティングツール、ひいてはITツールの利用に疎い方が多い印象があります。

    別に医療というスキルがあって、手に職があるからいいって人はそのままでいいと思います。
    でも新しい業界にチャレンジしたい、医療とは違った視点・観点で仕事をして稼げるようになりたいとちょっとでも考えている人は、まずは無料のロードマップ相談をしてみることをお勧めします。

    副業の始め方、どんな副業があなたに合っていそうか、副業をすることでの金銭面以外でのメリットやデメリットなど幅広く相談に乗ることができます。

    ぜひお気軽にLINE登録して無料相談を申し込んでみてください!

    友だち追加

  • 【Photoshop】画像を好きな形で切り取ってみよう

    今回はPhotoshopを使って画像を好きな形で切り取る「クリッピングマスク」機能を紹介したいと思います

    今回の記事を読んだ方がいい人

    • Photoshopを学びたい・学んでいる人

    簡単に画像の必要な部分だけ切り取れる、よく使うツールなのでぜひ覚えておくようにしましょう!!

    Photoshopを起動

    起動した後は、新規ファイルでもいいですが編集したい画像があれば「開く」からその画像を直接開いてしまった方が早いでしょう。

    今回はChatGPTで生成したベビーサーファー画像を利用して編集していきます。

    長方形ツールを使ってクリッピングマスク

    画面左側のツールバーから長方形ツールを選択し、必要な部分(今回で言うと右上の画像)を囲みます。

    囲ったら、右側の「レイヤー」パネルから、背景にロックがかかっているのをクリックして外し、レイヤーの位置関係を変更します。

    ここまできたら後は簡単、レイヤー0を右クリック→「クリッピングマスクを作成」を選択すれば完了です!

    長方形以外にもいろんな図形でクリッピングマスクが可能

    ちなみにこのクリッピングマスクは『Option+Command+G』で作成できますので、ぜひショートカットキーも覚えてしまいましょう!

  • とっ散らかり?自分の仕事スタイル

    自分はいろんな仕事をしているのが一つの特徴で、リハビリ職をしながらエンジニア的にも働き、講師業も行いみたいなカンンジで動いています。

    そんなことを続けていると頭がとっ散らかってくるのは目に見えてますね。

    タスク管理としてよく言うのは、短時間でできることを事前に挙げておく・やらないことを決めるなんて言いますが、タスク自体の範囲が広くなってしまうので、どうにもうまくいかないことも出てきます。

    そうこうしているうちに、頭の中ではまた別のことを考えてしまう…なんてことが多々あるので、僕の仕事スタイルは以下のような感じで進めています。

    PCはノートパソコン(Mac)と外部ディスプレイ2台。

    開いているのはLINEにChromeに各種チャットツールにプログラミングツール

    Chromeはブログサイト(このWordPress)が開いていたり、他のWordPressサイトが開いていたり、営業関係のサイトが開いていたり、プログラミングの疑問解決のためのAI(ChatGPT)が開いていたり、メールが開いていたり…と結構とっ散らかっています。

    プログラミングしながら思ったことをアウトプットするのにWordPress開いて、そしたら別のことが繋がってくるのでそっちを調べてまたアウトプットしてと言う感じです。

    だから一見あれこれやってるように見えるけど、自分としてはほとんどがつながっている感じ。

    これを実践できる、実践しても大丈夫だと思えるようになってから仕事の楽しさややりがいがさらにUpしたように思います。

    なんかたいした話ではなくて、ユーザーへの価値提供というものではないですが、自分の備忘録として残しておきます。

  • 子育てフリーランスの働き方

    子育てフリーランスの働き方

    本ページはプロモーションが含まれています

    この記事を読んでわかること

    我が家は3人の子供がいて(小学生・幼稚園・乳児)、さらにいうと親子で過ごす幼稚園という場所に通っているものですから、これに伴って仕事スタイルを変化させてきたんですね。

    親子で過ごす幼稚園の概要

    参考動画:日本一ユニークな幼稚園!札幌トモエ幼稚園に見学に行ってきました!【前編】

    百聞は一見にしかず。上の動画を見てみてください。幼稚園だけど幼稚園っぽくない場所で、「小さな村」・「コミュニティ」という表現の方が適切かもしれません。全国的に見ても珍しい形態なので、よくあちこちから見学やら研修やら取材やらきています。

    親子で過ごすので、一緒に幼稚園に行き、一緒に帰ってきます。
    園での過ごし方は、自由。自分の子供と一緒に遊ぶ人もいれば、子供たちが遊ぶのを見守る人もいて、子供に「あっち行ってて!」と言われる人もいて、大人たちで楽しく話している人もいて。

    ここは生活の場。いろんな家族の姿・あり方を見て、五感で受け取って、自分と向き合う時間を作っていく
    そんな場所です。

    私たち夫婦もこの幼稚園を見て、第一子に合いそう(というか他での生活が想像できなかった)ということで通うことに決めました。

    第二子・第三子に関しては妊娠中から一緒に通っていることになるので、生まれる前から幼稚園の空気感に触れていることになります。

    こんな環境での『仕事』が今回のテーマです。

    幼稚園に通うまでの仕事形態:正社員

    私はもともと作業療法士としてリハビリ職員として病院勤務していました。

    詰まるところ普通の会社員です。医師や看護師・介護職と違って、夜勤はないし、職場によっては土日祝日も休みだしっていうことでカレンダー通りの働き方を基本的にはしていました。

    週末は勉強会や学会に参加することも多く、さらには飲み会にもたくさん行っていたため、仕事>家庭の構図になっていたように思います。

    ただ、ある時に子供と過ごせる時間が意外と少ないなってことに気づいたんです。

    たとえば週末にだけ一緒に遊ぶ時間があったとしても週2日。月で8日。一年間で100日ありません。

    そして幼児期を終えて小学校に入学したらさらに一緒にいられる時間は減るんだろうなと思ったわけです。

    このことを想像した時、なんだか寂しい気持ちになってもっと一緒に過ごせる時間を作りたいと思うようになりました。
    そして『一緒にいられる働き方』を模索するようになり、在宅でもやっていけるスキルを身につけることにしたんです。

    私が身につけたスキル:Web制作やプログラミングスキル

    一緒にいられる働き方、つまり在宅で仕事ができるスキルを身につけようと思った時、はじめに取り組んだのは物販でした。

    これは妻からの勧めもあって物販スクールに入り、オンラインショップの開設や販売を経験しました。
    売れる商品のリサーチをしたり、顧客対応したりといった部分については外注さんにお願いすることもあったりと、医療職としては経験できなかったことをたくさんさせてもらいました。

    それでも当時の私には合っていなかったようで、一年ほどで撤退を決意します。

    その時に楽しい、これで頑張っていきたいと思ったのがプログラミングでした。

    当時はスプレッドシートの管理を効率化・自動化するべくプログラムを独学で身につけていくことに楽しみを覚え、寝食忘れて取り組めることに出会った感覚でした。

    プログラミング学習をしていく段階で、HTMLやCSSといったwebページを作る仕組みについても学ぶことがあり、そこからWordPressの扱いについてもできるようになっていきました。

    これらは全て独学で、オンライン教材やYoutube、書籍で身につけていきました。

    一緒にいられる働き方:フリーランスの選択

    スキルを身につけてきた時、どう働いていくのがいいのかを考えるようになりました。

    ざっくりと会社員でいたら時間の自由が取れなくなるんだなというイメージがあったため、フリーランスとしての働き方を選択するようになります。

    もともと、自由な裁量で働く方法に魅力を感じるタイプだったので、フリーランスとしてやっていくことにそんなに抵抗はなかったように思います。

    全ては自分次第、24時間仕事ができる体制にしていったわけです。

    幸い、通っている幼稚園ではPCを開いて仕事をしている親もいたので、自分もそこにまじってパソコンを開いて仕事をしつつ幼稚園で過ごす時間を増やしていくことにしました。

    実際には、ホームページ制作の案件やスプレッドシートでの業務効率化ツール開発といった案件を個人で受注して納品する、という案件ベースの働き方をしていくことになります。

    独立したての課題:営業

    頑張って制作スキルやプログラミングスキルを身につけてきたはいいものの、実績も少ない時点ではスキルよりも『どうやって仕事を見つけてくるか』という営業に関する悩みを持つことが多かったように思います。

    営業、集客に関する悩みですね。

    これの解消のためには、人にあったり、自分にできることをなんらかの形でアピールしていくことが必要になってきますが、思った以上に大変な状況がわかってきました。

    幼稚園は山奥にあり、自然豊かなところなのですが、つまりいわゆるオフィス街からは離れた地域にあるので、仕事をとってくるためにはなんらかの形で街に出る必要が出てきます。

    かといって自分に新規開拓するような飛び込み営業の度胸があるわけでもなく、どうしよう…と足踏みする時期がありました。

    営業・集客に関してはビジネスコミュニティに入ったり、ビジネスではないオンラインコミュニティに属していく中で自分にできることを発信し、仕事につなげていくようにしていました。

    あとはクラウドソーシングサイトに登録して、何件も応募して面談して案件を受注するといいった方法をとっていました。

    仕事スタイルの課題:働く時間

    仕事を受注しようと考えた時に、必ず誰かとコミュニケーションが発生するわけですが、私の働く時間と合わない可能性があることに気づいてきました。

    もちろん、終日コミュニケーションを取らなければならないというものではないので、その時間だけ話せる環境にあればいいのですが、幼稚園は何かと騒がしかったりするので、そうなると家にいる必要が出てきます。

    車一台+公共交通機関の利便性も悪い環境にいると、ちょっと家に帰るというのが億劫になってきます。

    ここまで読んでくると随分身勝手だなぁと感じる方もいるかもしれませんね。

    でも私の中で優先は家族。そこを崩したくなくていろんな働き方を模索している状態です。

    理想の働き方とそこに近づけるための戦略

    極論、私が幼稚園に行っていても寝ていたとしても収益が発生することが理想になります。

    そうなると私はお金の心配なく家族との時間を作ることができるからです。さらに言えば、お金が人生の全てではないですが、お金があることで解決できることが多いのも事実です。

    ということで、コミュニケーションコストをカットしつつ自分にできる価値提供を全力で行っていくことが必要になってきます。

    現時点で私が考えていることは2つ。

    家族優先ではありますが、その家族といい時間を過ごすために仕事として対応させていただく時には全力で取り組む、というのが私のモットーです。

    1を達成していくためには『誰に対する価値提供なのか』を明確にしつつ、見てるだけで欲しくなるような文字・写真・動画の選定だったり、発信の仕方を研究していくことが近道になります。SNSマーケティングと言われている領域なので、収益化が進んでいけば、集客方法とかを含めた運用代行であったり、コンサルティングだったりも視野に入ってきますね。

    2を達成していくためには、自分のメニュー表を作り(実際にはあるので更新という形)プラットフォームに載せたり、このブログで発信していくことが必要になります。
    オーダーメイドでサイトを制作したりすることももちろん大事ですが、素人っぽさをなくした状態である程度コストを抑えていいものを提供する、それをスピード感持って提供するというのも一人社長や個人事業主の方にとってはいいものになると思っています。

    結局のところ、集客スキルを磨いていくことが大事ですね。スキルやサービスについてはみんなこぞっていいものを作れるようにはなっているし、自分のスキルに自信があるから事業として進めているわけなので、どんな領域でも正しい集客ができることが世の中的に求められていると思います。

    子育てフリーランスとして働く時の時間の使い方

    何人子供がいるかということも関わってくるかと思いますが、独身時代から考えると『自分の時間』というのがだいぶ減ってきます。よくも悪くも。

    家族でいることに価値を感じるし、今の過ごし方はすごくHappyなので満足しているのですが、そこに甘んじていては仕事がおろそかにもなってしまうなぁというのが、色々動いてきた感想です。

    ワークライフバランスって大事。というのが最近の感想。

    ではそのワークタイムをどうとっていくのか、という部分に話が入ってくるわけですが
    結論としてはどの時間でもいいので『やるべきこと』と『やらないこと』を決めておくことがいい時間の使い方だと思っています。

    特に子育て真っ只中だと、みんなが寝ている朝や晩に仕事しようとしている時に限って誰かが起きてきたり、この日に頑張ろうと思っていたタイミングで誰かが体調崩してしまったりということが本当にいつも起こります。

    でもその選択をしているのは自分なので、有限の時間の中でどうしていくかというと、先ほど書いたように事前に何をすべきかということを決めておくと良いです。

    さらに経験上、やるべきこと以上に『やらないこと』を決めておいた方が行動のスピードが速くなったり持続できる時間が長くなったりします。

    5分時間があったらやること、15分あったらやること、30分あったらやることを決めておく。
    午前にはやらないこと、午後に入ったらやらないこと、夜はやらないことを決めておく。

    こうすることでだいぶ時間の使い方はシンプルになって動きやすくなります。

    そしてなるべく子育て+在宅で働くならスマホやタブレットでできる仕事を増やしておくのが必要になってきます。

    だっていくらいいパソコンがあったって、常に開いて仕事できるわけではないですからね。

    それよりはスマホに定型文を登録しておいて、返信業務ができるようにしておくとか、簡単な画像・動画の編集はスマホでできるようにしておくとかすると隙間時間を利用して仕事に繋げることができるようになります。

    そしてもう一点、大事になってくることはネット環境の確保です。

    移動中にふと時間ができるなんてことは結構ありますが、その間にネットが繋がらないと仕事の機会を失ってしまいます。

    そうならないためにも僕は基本的にポケットwi-fiを持ち歩いてます。
    家では据え置き型のwi-fi利用をしつつ、外出用にポケットwi-fiを一台利用。少し費用は増えますが、必要な経費です。

    ビジネス形態にもよってきますが、事業として通信費は経費計上できるので持っていて損はないです。

    据え置き型はSoftBank Air、外出ではWiMax。3日間で15GBの利用制限があるものの、動画見まくってたとしても全然問題ないレベルです。これは結構おすすめ。

    特にSNSでのリサーチを増やしていくと、必然的に動画視聴が増えますので、そういった時にストレスフリーに見られる環境を作っておくと良いですね。

    データ容量なし!【SoftBank Air】を見てみる

    契約期間の縛り無し!100GBまで自由に使える「クラウドWiFi」を申し込む

    番外編:正しい集客とは?

    マーケティング、集客に関してはいろんな書籍があったり動画で学べたりもしますが、私が色々取り組んできた中で感じていることは『そのサービス・商品が必要な人を見つけて知らせる』ことだと思っています。

    だからSNSとかでフォロワーを増やすことがマーケティングで求めることではないと考えています。

    結局は自分たちの商品、サービス、ひととなり、ブランドに興味を持ってもらって、購入に結びつきそうな人を探して認知してもらいく作業がマーケティングではないかと思っているわけです。

    だから人数よりも、どんな人に見てもらっているのか、どんな人がフォローしているのかを知る方が大事なわけです。

    だから運用するアカウントは特化型で分けていくべきだと思っています。

    この辺も別の記事で深掘りしていきたいですね。集客は難しいけど楽しいです。

  • プログラミングスキルアップ|Next.jsを学ぶ#03

    プログラミングスキルアップ|Next.jsを学ぶ#03

    Youtube動画を見ながらNext.jsの学習を進めようの記事、第三弾となります。

    1回目の記事はこちら

    2回目の記事はこちら

    今回の対象ファイル

    今回の3回目ではログインページのフォーム追加であったり、サインアップ・ログインボタンの実装をしていってます。

    主に編集を加えていってるのは以下のファイル

    src/app/page.tsx
    src/components/forms/PatientForm.tsx
    src/components/CustomFormField.tsx
    src/components/SubmitButton.tsx

    これに新しく、validation.tsを作成しています。

    src/lib/validation.ts

    コンポーネント部分の調整と、フォーム入力の際のバリデーションに関する実装、という感じですね。

    フックの利用

    PatientForm.tsxの編集では、フックと呼ばれるものが出てきました。

    いまいち理解していなかったので、例のごとくChatGPTに質問。

    useStateは状態管理に関するもので、useRouterはルーティング機能に関するものなんですね。

    現在の情報、状態の更新、状態の初期値を指定することで、レンダリングするたびに更新されるというのがuseStateだと。

    そしてuseRouterは

    useRouter は Next.js のフックで、ページのルーティング(URL の遷移やクエリパラメータの取得など)に関する情報やメソッドにアクセスするために使用されます。Next.js はページベースのルーティングシステムを提供しており、useRouter はこのシステムと連携するための強力なツールです。

    と書かれていますので、オブジェクトを作った上で以下メソッドを利用してページ遷移の実装をしているんですね。

    この辺はWordPress(PHP)での扱いに近いなぁと思いながらコーディングを進めていきます。

    フォームフィールドに関するコンポーネントの編集

    フォーム入力部分については、テキスト形式(名前など)なのか、数字形式(電話番号)なのかの条件分けが必要になるので、今回はswitch文を利用して作成していきます。

    const RenderField = ({field, props}: {field: any; props:CustomProps}) => {
      const {fieldType, iconSrc, iconAlt, placeholder} = props;
    
      switch (fieldType){
        case FormFieldType.INPUT:
          return(
            <div className="flex rounded-md border border-dark-500 bg-dark-400">
              {iconSrc && (
                <Image
                  src = {iconSrc}
                  height = {24}
                  width= {24}
                  alt = {iconAlt || "icon"}
                  className = "ml-2"
                />
              )}
              <FormControl>
                <Input 
                  placeholder={placeholder}
                  {...field}
                  className="shad-input border-0"
                />
              </FormControl>
            </div>
          )
        case FormFieldType.PHONE_INPUT:
          return(
            <FormControl>
              <PhoneInput 
                defaultCountry="JP"
                placeholder = {placeholder}
                international
                withCountryCallingCode
                value = {field.value as E164Number | undefined}
                onChange={field.onChange}
                className="input-phone"
              />
            </FormControl>
          )
        default:
          break;
      }
    }

    ここで太字にしているPhoneInputというのがnpmでインストールする必要がありました。

    React-phone-number-inputというものが用意されているようで、これをnpmで実行すれば使えるようになりました。

    属性値には国名を入れることになりますが、日本の場合は『JP』と入力すればOK。

    これを入れることで、入力フォームによくある国旗と+●●みたいなのが出てくるようになりました。

    実際のフォームフィールドについて項目を追加

    今回は、氏名・メールアドレス・電話番号が必要になるフォームの実装でしたので、コードはこんな感じになっています。

    <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 flex-1">
          <section className="mb-12 space-y-4">
            <h1 className=" header ">Hi there ✊</h1>
            <p className="text-dark-700">schedule your first appointment.</p>
          </section>
    
          <CustomFormField 
            fieldType = {FormFieldType.INPUT}
            control = {form.control}
            name="name"
            label="Full name"
            placeholder = "サンプル太郎"
            iconSrc = "/assets/icons/user.svg"
            iconAlt = "user"
          />
    
          <CustomFormField 
            fieldType = {FormFieldType.INPUT}
            control = {form.control}
            name="email"
            label="Email"
            placeholder = "sampletaro@test.com"
            iconSrc = "/assets/icons/email.svg"
            iconAlt = "email"
          />
          
          <CustomFormField 
            fieldType = {FormFieldType.PHONE_INPUT}
            control = {form.control}
            name="phone"
            label="Phone number"
            placeholder = "01234567890"
            iconSrc = "/assets/icons/phone.svg"
            iconAlt = "phone"
          />

    このCustomFormFieldひとつひとつが入力欄になっているわけですね。

    そしてSubmitボタンを作成していくことになります。

    Validationの実装

    バリデーションはzodを利用して簡潔に書いていきます。

    これ、すごく便利ですね。フォームのバリデーションって結構めんどいイメージでしたけど、zod利用するとかなり簡潔に記載することができました。

    export const UserFormValidation = z.object({
      username: z.string()
      .min(2, "ユーザー名は2文字以上入力してください")
      .max(50, "ユーザー名は50文字以内で入力してください"),
      email: z.string().email("無効なアドレスです"),
      phone: z.string().refine((phone) => /^\+\d{1,14}$/.test(phone), "無効な電話番号です")
    })

    動画ではエラーメッセージも英語で書いてますが、ここは自分の学習目的なので日本語で置き換えてます。

    まとめ

    こんな感じで、やっとこ動画の進捗が1時間を超えてきました(実際は5時間以上ある)

    今のところはこんな感じ。左側のフォームが増えているのがわかります。

    さぁ引き続き頑張っていきます!

  • プログラミングスキルアップ|Next.jsを学ぶ#02

    プログラミングスキルアップ|Next.jsを学ぶ#02

    Youtubeを通じてNext.jsを学んでいこうという独学の第二回になります。

    第二回の分量は少なめですが、学んだことをアウトプットしていこうと思います。

    第一回の話はこちら


    前回から進めているのは最初のログイン画面。page.tsxを編集していっていますが、コンポーネントを作っていってます。

    今あるのはformディレクトリにあるPatientForm.tsxでした。

    今回新たに作ったのは、入力フォームのコンポーネントを編集するための『CustomFormField.tsx』になります。
    Componentsディレクトリ直下に作成しました。
    こちらを動画見ながらカタカタ同じように入力していきます。

    同じように入力して意味あるの?と思われるかもしれませんが、動画とすんなり同じようにはいかなくて、やっぱりタイピングミスだったり、コードの抜け漏れがあったりしてエラーになるので、そこで動画を止めながらエラーの原因を修正して…という感じでやるので結構勉強になります。

    AIに聞けば自動で修正してくれることもありますが、自分のためなのでなるべく使わないようにして…

    あとは動画を流しながら必死にタイピングしているので、タイピング速度を上げるトレーニングにもなります。

    さらに言えば、コードを作っていくのって、上から順に打っていくんじゃないんだなということが勉強になります。
    今回でいうと

    1. 入力フォームの中で表面に出力される部分のコードをはじめにつくり
    2. その中で依存関係が出てくるものはインポートし
    3. そこに渡す属性値を用意し
    4. 属性値がどんな型になるのか、型定義を行う

    という順番で上下に行き来しながら作っていきました。
    なので、JavascriptやReactのメソッドについての学習というよりは、Typescriptとしてどんなものが入力されうるもので、さらにその型がどの程度宣言できるのかを考えながらやることが大事ということがわかってきました。

    関数として引数を複数渡す場合、第一引数・第二引数…と記述してそれぞれに型を書いていってもいいですが、動画では
    引数をまとめて『props』と書いてその型を『CustomProps』とまず定義しました。

    その上で、interfaceで型定義を細かく書いていきます。

    ここで気になった(疑問になった)のは、型宣言の方法。typescriptでは型宣言の方法にinterfaceとtypeでの宣言ができます。

    ブログ記事にも違いは書いていますが、よく理解できなかったので、そんな時にChatGPTの出番です。

    といった感じで、答えてもらいました。シンプルなものであればinterface、多目的に宣言が必要な場合にはtypeという感じですが、『今回はtypeじゃだめなの?』とも思いましたので追加質問。

    ということですので、今回は動画の構成上interfaceになったのだと理解しておきました。

    引き続き頑張っていきます。

  • AIで作る【Web制作学習者向けのタイピングゲーム】

    AIで作る【Web制作学習者向けのタイピングゲーム】

    生成AIはほんといろんなものが次々にでてきますね。
    有名どころではChatGPTだったりGemini・Birdなんかがあるかと思いますが、用途によって生成AIの能力も変わってきているのが面白いところです。

    音声生成だと〜〜

    画像生成だと〜〜

    みたいな感じで、それぞれに得意・不得意があっていいですよね。

    そんな中で、プログラミングに強い生成AI Claude3.5 を利用してタイピングゲームを作ってみたのでシェアします。
    といっても他にも生成AIを使っているので、やり方を公開という感じですね。

    早速いってみましょう!

    どんなものを作るのか、ざっくりと決める

    まずは、自分の頭の中を整理します。どんなものが作りたいのか、何で作りたいのかということを言語化していきます。

    この時点で私は『タイピングゲームを作りたい』ということが浮かんでいました。

    副業しよう、何かパソコン使ってできる仕事をしよう、Web制作をしよう、プログラミングしよう、と考えた時にどうしても必要になるのがタイピング技術になります。

    そして、通常の単語ではいっぱい遊びながら学べる寿司打をはじめ、たくさんのタイピングゲームが出ています。

    でもWeb制作者向けに特化したようなタイピングゲームってないよね?って思ったのがきっかけです。

    コードをたくさん打つので、日本語よりもむしろ英語の方が打つ機会が増えてくるため、ちょっと違ったスキルだよなぁというのを感じていました。

    そんな感じで『Web制作者が日常で扱う単語を集めたタイピングゲームを作りたい』ということになりました。

    chatGPTとのやりとり

    作りたいものを決めたら、それを生成するための『プロンプト(命令文)』を考えます。ただ、それもAIでできちゃうから面白いですよね。

    今回は見出しの通り、chatGPTを利用してプロンプトを作ってもらいました。

    こんな感じで、自分が考えた状況を羅列するような形でプロンプトつくってねーとチャットを投げています。
    そうするとこんな感じでポイントを伝えながら必要なプロンプトを生成してくれましたので、Claudeに投げていきます。

    Claude3.5とのやりとり

    Claude3.5はプログラミング関連の作品作りに強いと言われている生成AIになります。もしかしたらChatGPTでもいいのかもしれないけど、ものはためしってことでやってみました。

    といってもChatGPTから送られてきたプロンプトをそのままコピペして貼り付けるだけ。

    そうすると、すぐにコードを作ってくれます。

    ただ、ここで問題が。

    ClaudeはHTML・CSS・Javascriptを使ってコードを生成してくれているのですが、公開のことを全く考えていなかったんですよね。

    本来なら自分でサーバー契約して、ドメインを用意して、そこにファイルを入れて…ってやるのが一般的なのかもしれないですが、僕はちょっと手法を変えてやってみることにしました。

    つまり、シンプルなHTMLだけではなく、モダンな技術も取り入れて公開までやってみようということです。

    そう決まれば、HTMLじゃなくて別の方法で生成しなおしてねーとかやりとりを続けていくことになります。

    またすぐにコードを生成してくれるわけですが、次の問題が発生。

    それは、無料枠でのやり取り上限に達してしまったこと。ただ、これは時間が経てば改めて質問できるということだったので、時間をおいて再チャレンジ。

    できてきたもののチェックと修正

    やり取りの制限がリセットされたので、再開していろいろと聞いていきます。

    コピペするだけだとエラーが出たり、思った挙動にならなかったりするので、その辺を言語化したりエラー文章をまるっとコピペして渡します。

    この時に、『エラーの原因を教えて』など入れておくと、どうしてこういったエラーになったのか、自分の学習もかねてやり取りすることができます。

    そうして数回のやり取りで何となく形になってきたので、ありがとうという気持ちを伝えておきました。

    実際にできたもの

    https://sushidalike.vercel.app/

    実際にできたのはこんな感じ。シンプルですがスコアも出るようになってます(なってるはず)

    タイトル:Web制作学習者向けタイピングゲーム『Webタイピング道場』

    技術スタック:Next.js・TailwindCSS・Typecsript・HTML

    やってみた感想としては、めっちゃ楽しい!でした。自分の頭の中がクリアになっていく感じだったり、スピード早く作品ができていくことが感動でした。

    AIに仕事を取られるかどうか、というのはまだはっきりしないけど、AIを使いこなせないと仕事ができなくなっていくんだろうなということは実感した出来事でした。

  • プログラミングスキルアップ|Next.jsを学ぶ#01

    プログラミングスキルアップ|Next.jsを学ぶ#01

    プログラミング言語はいろいろあって、その中でも流行り廃りがありますが、フロントエンドエンジニアとしての最近のトレンドの一つに、Next.jsがありますね。

    Next.js(ねくすとじぇいえす)はJavascriptのフレームワークの一つで、ReactやTypescriptを利用して構築していきます。
    おしゃれなサイトができやすい、最近流行りの他のライブラリやツールとも互換性があるのも魅力でしょう。

    プログラミングを学びはじめると、HTML・CSSからいってみよー!というのがどのサイトや本でも書かれているのですが
    なかなかその2つだけだと効率的にお仕事に結びつきません。

    そうすると新しいスキルを身につけようという動きになって、JavascriptやPHPといった言語を扱い、WordPressでホームページ制作ができるようになっていくというのがメジャーなロードマップになります。

    そのJavascriptもいろんなライブラリ・フレームワークがあるわけですが、最近はもっぱらTypescriptを利用しつつReactを使ってNext.jsでサイトを構築していくのが主流でしょう。むしろこれら使わないとフロントエンドエンジニアとしての未来が閉ざされるんじゃ無いかってくらいです。

    じゃあどうやって学んでいくかという話になりますが、書籍・学習サイトとありますが私がお勧めするのはYoutubeです。それも英語のチャンネルがおすすめ。一連の動きをまとめた動画で、数時間に及ぶものがゴロゴロ公開されていますので、それを見ながら手を動かしていくのがスキル定着にはもってこいです。

    まずは手を動かしつつ、何をやっているのかわからない部分があればChatGPTなどに聞いてみるのが効率の良い勉強になるでしょう。

    というわけで、私も動画を見つつサイトを構築していってます。

    参考にしている動画はこちら。

    そしてつくっているコードはこちらです(随時更新予定)

    https://github.com/takumakoike/nextjs-careplus/tree/main/careplus

    ここではどんなことを学んだのか、アウトプットとして記事を用意していこうと思います。
    まずは第一弾としてやったことを。

    環境設定

    ターミナルを開いて、新規にnext.jsのappを作成します。

    npx create-next-app@latest アプリ名

    この後に出てくる設定はすべてデフォルトのまま進めています。

    必要なもののインストール

    今回はTailwindcssやTypescriptは最初から入れてましたのでそんな必要となるものはなかったですが、UI構築のためにShadcnというのを利用しています

    npx shadcn-ui@latest init

    そしてTailwindのアニメーションも追加しているので

    npm install tailwindcss-animate

    あとはダークモードの設定やらで

    npm install next-themes

    といった感じでインストールをしています。現時点では。

    それぞれの公式サイトはこちら。

    Tailwindcss

    Shadcn/ui

    こうみると、『必要なものをインストール』と『インストールしたものを利用してコーディング』を行き来している感じがあります。

    page.tsxの作成

    トップページ、今回はログインをするようなページになるのですが、これを作成していきます。

    詳しいコードはGithubを参考にという感じですが、やっていることは、Formのコンポーネントを用意して表示することと、簡単なレイアウトとしてロゴ画像だったり画面右側に画像を表示させることをやっています。

    componentsの作成

    コンポーネントはFormコンポーネントを用意しています。
    現時点ではUsernameを入れられるフォームを作り、それが規定文字数以下だったらエラーになるように作ってます。

    いやー、これを一からフォームタグ使って実装しようとすると既に辛い未来が見えるので、こういった時にライブラリをすっと利用できるっていうのは本当にありがたいですね。

    現状

    現時点ではレスポンシブ対応がまだなので、画像もずれるし、実際のログイン認証なんかも実装はできてない状態。

    英語の動画ってどうなの?

    英語版の動画を見ていて、本当に理解しているの?と質問が来そうですが、言葉を全て理解しているわけではありません。
    大事なのは、画面で何をしているのかがわかることであったり、推測しながら手を動かすことです。

    確かに日本の動画の方がわかりやすいですが、海外の動画の方がおしゃれなサイトを作る動画が多かったりして作っていく楽しみは大きいんですよね。

    意外と言葉がわからなくても何とかなるもんだと、HTMLの学習時代から感じているので、日本の動画で参考にするものが見つからない方はチャレンジしてみることがおすすめです!

    そんな感じで引き続き頑張っていきたいたいと思います。

    Instagramではプログラミング初学者向けに情報発信をしています。気軽にフォロー・コメント待ってます🎵

    https://www.instagram.com/takuma.internet.skill/?hl=ja
  • おしごと

    おしごと

    今までいろんな仕事をしてきている中で、ほぼほぼ切り離せない(と考えている)のがクライアントワーク。
    つまり相手とのやり取り。

    自分がどの立ち位置にいるかということに関わらずビジネスは誰かに価値を提供し、その価値に応じて報酬が払われる仕組みになっているので、どうしても切り離せないのだろう。

    動画・音声(通話)ももちろんだけど、まだまだチャットでのコミュニケーション、つまりテキストコミュニケーションが多いわけで、さらにいうと誰かが何かを購入するときには何らかの形で文章が入力されている。

    つまりはライティング力が重要になるよなぁと考える今日このごろ。

    最近は動画を見たり、子供と触れ合う時間が長かったりするせいか、いまいちタイピングだったり文章が上手くアウトプットできない漢字がある。

    言葉の言い回しが繰り返してたりとか、単語の選択がスムーズにいってないとか、タイピングでの誤字が多いとか。

    でもそれを改善するにはタイピングしてアウトプットしていくしかないんだよなぁとも思っていて。

    一時はnoteを利用して投稿を始めようかとも思ったけど、やっぱり自分のメディアを使って運用していった方がいいのかなとも思ったし、迷ってる時間が勿体無かったのでこっちで投稿することに。

    なのでこれは誰かに届けー!なメッセージではなく、自分で振り返った時にどんなことを考えていたか分かりやすくするためなので悪しからず。