↓まだチャンネル登録をしていない人はこちらから！↓<a href="https://www.youtube.com/channel/UCytjAXJpeqzSotBHYJ7lMqQ" target="_blank" rel="noopener noreferrer">【click】YouTube エンジニアファースト</a>

今回は我々、グラントホープがなぜエンジニアの独立支援をしているのか？ なぜエンジニアファーストというチャンネルを立ち上げたのか？ そんな話をしています。15分だけ時間をください。

動画はこちらからご覧ください。 <a href="https://m.youtube.com/watch?v=48BimW3jTHs" target="_blank" rel="noopener noreferrer">https://m.youtube.com/watch?v=48BimW3jTHs</a>

【独立を迷っているエンジニアに伝えたいこと】

猫が大好き。食べることが大好き。寝ると嫌なことは忘れるタイプ。
いろんな人に出会い、いろんなものに触れて、思考を柔らかく、自分の世界を広げていきたい駆け出しライターもどき。


こんにちは！タカトです。 &nbsp; 2022年からちょくちょく話題に上がっていたインボイス制度。皆さんは具体的にどういった制度か把握してますか？会社員の方は特に意識する必要はありませんが、副業でそれなりに稼いでいたり、個人事業主・フリーランスの方は意識しないと今後の仕事に影響が出てきます。今回はそんなインボイス制度について解説していきます。 &nbsp; できるだけシンプルかつ分かりやすくお伝えしてきますので、インボイスが気になるぐらいの感じで読んで頂いて大丈夫です！時間にして3分ほどで読めるのでランチやお茶のお供にどうぞ！

インボイス制度はシンプルにいうと、消費税を払わせる制度です。 &nbsp; 消費税は物を購入した際に商品購入代金と一緒に払っていますが、その消費税とは別であなたが個人で請け負った仕事に対する消費税のことを指します。（詳細は後述で解説します） &nbsp; 消費税を払った人には適格請求書発行事業者として番号が発行されます。 適格請求書発行事業者になるためには課税事業者になる必要があり、課税事業者になる＝消費税をしっかり払いますということです。

消費税をなぜ今更払うのか？今まで免除されてた理由は？

ここで質問です。 &nbsp; あなたが物を購入し10%の消費税が掛かりました。お店には商品代＋消費税を支払いますが、この10%の消費税は誰が国に払っているか？ &nbsp; 答えはお店が代わりに国に払っています。 &nbsp; お店、または会社は毎年確定申告を行っており、その際に貰った消費税をまとめて国に支払っているワケです。 &nbsp; 次に、あなた自身が個人で仕事を受注し請求書が来ました。その請求書には売上の10%の消費税が加算され、振込の金額として提示されてます。（売上が10万だったら11万が振込対象額。1万は消費税。） &nbsp; ではこの消費税は誰が支払っているでしょうか？ &nbsp; 多分、この回答は言葉に詰まると思います。 &nbsp; 本来であればお店と同じであなたは消費税を受け取っているので、それを国に支払う必要があります。 &nbsp; これを払わなくて良いのには理由があって、売上が一千万以下の個人事業主は免税事業者と呼ばれて、消費税を支払わなくてよいとされているからです。 &nbsp; なので知らぬ間に脱税してた！？といったことにはなりません。 &nbsp; インボイス制度が施行されると、売上が一千万以下の個人事業主も課税対象者になり、毎年売上の10%を国に納める必要があります。

インボイス制度の施行は2023年10月1日からになります。 &nbsp; なので2024年に行う確定申告ではインボイス制度を考慮した申告が必要になります。 &nbsp; 各種会計ソフトもそれに向けて対応を実施中です。

適格請求書発行者って何なのか？番号は無いとダメなの？

適格請求書発行者になると番号が発行されます。番号を発行しない（適格請求書発行者にならない）選択も可能です。 &nbsp; では番号あり／なしでどういった違いがあるのでしょうか？ &nbsp; あなたに仕事を依頼する会社からすると、番号あり／なしでの違いは国に納める消費税分を全額免除できるか、できないかの違いがあります。 <img src="https://images.microcms-assets.io/assets/03df7942ab184c4fb92ae2a6d548e115/f466d12227d94fe2a6d56a13bbff7eca/image2.jpeg" alt=""> 会社からしたら、番号がない人と取引するのはデメリットしかないんです。 &nbsp; こうなると個人は仕事の受注にモロに影響が出るので、実質番号あり（自身で消費税を納める）を選択せざるを得ないのが実状です。

適格請求書発行者になると収入はどれだけ下がるのか

適格請求書発行者になるということは消費税を新たに納めるということです。 &nbsp; 2023年現在、消費税は10%なので、自身の年間売上が300万の人なら年30万、500万なら50万の税金が新たに発生します。 &nbsp; 消費税が上がれば、この税金もどんどん上がっていきます。 &nbsp; ただでさえ多くの税を払っているのに、更にまた税金が重くのしかかる。中々厳しい現実ではあります。

インボイス制度が反対される理由

インボイス制度は今まで対象外だった免税者（売上が一千万以下）から消費税を徴収する制度というのはお分かり頂けたかと思います。 &nbsp; 売上が100万円の人も10万という額を追加の税として納める必要が出てくるので、売上が少ない人にとっては死活問題で、反対されるのは当然の結果です。 &nbsp; 実際、エンタメ業界へのダメージがかなり大きいと言われています。 <a style="color:#1155cc" href="https://maidonanews.jp/article/14719374" target="_blank" rel="noopener noreferrer">「インボイス制度は日本のエンタメ業界を破壊する」　声優の甲斐田裕子が反対の声を上げる理由</a> &nbsp; これで徴収しても300億程度にしかならないので、反対されるのも無理はありません。

インボイス制度施行に向けて出来ること

正直この制度は個人事業主にとってはかなり痛い制度です。 &nbsp; とはいえ決まってしまったのは仕方ないので、出来ることとして売上額を上げるのが一番だと筆者は感じます。結局10%もっていかれるなら売上額を上げて少しでも税の負担を減らすのが今できる最善の策です。 &nbsp; もう1つはインボイス制度に対しての対応は会社によって様々なので、そこをお世話になってる会社に確認し、より良い対応をしている会社を選びなおすという手段です。 &nbsp; 例えば適格請求書発行者にならなくても良いや、その税の分を上乗せして支払ってくれるなど対応は様々かと思います。 &nbsp; グラントホープは業界的にレアな対応をしており、適格請求書発行者になることを止む無しと感じているエンジニアや個人事業主の人はグラントホープなら心配ない対応を取っています。 &nbsp; 話を聞くだけでも全然良いと思うので、興味のある方は聞いてみてはいかがでしょうか。

まとめ：しっかり理解した上で施行されるまでに準備をしよう！

いかがだったでしょうか？2023年から年収の10%が減るのは目に見えたので、そこをどう補填するか事前に考えて準備すること、もしくはお世話になってる会社を見直すことが今できる策なのかなと思います。 &nbsp; もちろん、適格請求書発行者にならなくても問題はないです。 &nbsp; 実際、施行された時にどれだけの人がなるかは未知で、下手したら適格請求書発行者にならない人が多い可能性もあります。 &nbsp; 自分の将来に関わることなので、しっかり理解した上で自身が望む選択をしていきましょう！ &nbsp; 本日も読んでいただきありがとうございました。

インボイス制度とは？施行される前に抑えておきたいポイントを解説！

タカト

2児に父でフリーランス歴8年目、主にPMO・サポート業務をメインに案件をこなしています。Webライターとしても活動中。

PythonのWebフレームワークにはDjango、Flaskが良く使用されますが、今回はFastAPIというフレームワークを紹介したいと思います。 FastAPI は、Pythonの標準である型ヒントに基づいてPython 3.6 以降でAPI を構築するための、モダンで、高速(高パフォーマンス)な、Web フレームワークです。

FastAPIの特徴とDjangoとの比較について

・パフォーマスが高く、処理が早い

FastAPIはPythonの有名なWebフレームワークのDjangoパフォーマンスを比較しても、NodeJSやGoと同じくらいにパフォーマンスが高いと言われており、Djangoよりも処理が早いとされています。

・コードが書きやすく、バグ等も見つけやすい

コーディングもDjangoに比べて書きやすい特徴もあり、コードによる重複も最小限にしていることから、ヒューマンエラーよるバグも削減と開発速度の向上が見込まれています。

・習得にそれほど時間がかからない

FastAPIはDjangoに比較して簡単に習得できるようにデザインもされていることから、ドキュメントに読む時間やその他調査にかかる時間も短縮されます。

必要条件:Python 3.6以上 ※開発環境(動作はMac環境を使用しています。) OS: MacOS Big Sur 11.4 Python: 3.9.7 Django: 3.1.7 IDE: PyCharm &nbsp; Pycharmを起動して、左下の「terminal」をクリック

(Macのデスクトップの右上の虫眼鏡マークから「ターミナル」起動→指定した階層に移動でも構いません)

ターミナル上で以下のコマンドを入力してください。 pip install fastapi 以下のように「Successfully〜」と表示されれば問題なくFastAPIはインストールされています。

次に以下のコマンドを入力後、エンターキーを押してください。 pip install uvicorn こちらも問題なく、エラーメッセージが表示されなければ正常にインストールされています。

任意のディレクトリ配下にmain.pyを作成して、以下のコードを入力します。 main.py &nbsp;

&nbsp;以下のコマンドを実行します。 uvicorn main:app --reload &nbsp; ブラウザのURLバーに <a href="http://localhost:8000/" target="_blank" rel="noopener noreferrer">http://localhost:8000/</a> を入力してください。

{"Hello":"World"}と表示されていますね。 &nbsp; 先程作成した、main.pyの5行目から7行目にて @app.get("/") def read_root():　 　&nbsp; &nbsp;&nbsp;return {"Hello": "World"} @app.get("/") →@app.get("/")と書くことで、localhost:8000以降のURLを指定するパスになります。 ("/")と書くことにより、localhost:8000で動く関数ということになります。 def read_root(): return {"Hello": "World"} →@app.get("/")と書いてありますので、 uvicorn main:app –reload Webサーバーを起動した際にWebブラウザにて localhost:8000と入力した時に動く関数ということになります。 &nbsp; こちらのサンプルではread_rootという関数名にしていますが、任意の関数名に変えていただいても構いません。 returnも{"Hello": "World"}とありますが、こちらも任意の文字列に変えてもよいです。

では次にブラウザのURLバーにて <a href="http://localhost:8000/items/10?q=sample_fastapi" target="_blank" rel="noopener noreferrer">http://localhost:8000/items/10?q=sample_fastapi</a> を入力してください。

このように表示されていれば成功です。

解説をしていきます。 main.pyに記載をした@app.get("/")と@app.get("/items/{item_id}")の2つ関数がありますが、WebブラウザのURLにて、localhost:8000以降の/&nbsp;と&nbsp;/items/{item_id}のパスで HTTP リクエストを受けます。 /items/{item_id}&nbsp;パスのパスパラメータ&nbsp;item_id&nbsp;は&nbsp;int&nbsp;でなければなりません。 <a href="http://localhost:8000/items/10?q=sample_fastapi" target="_blank" rel="noopener noreferrer">http://localhost:8000/items/10?q=sample_fastapi</a> →こちらの10という数値がint型指定です。 パス&nbsp;/items/{item_id}&nbsp;はオプションの&nbsp;str&nbsp;クエリパラメータ&nbsp;q&nbsp;を持ちます。 <a href="http://localhost:8000/items/10?q=sample_fastapi" target="_blank" rel="noopener noreferrer">http://localhost:8000/items/10?q=sample_fastapi</a> →sample_fastapiの箇所がstr型となります。 @app.get("/items/{item_id}") def readitem(itemid: int, q: str = None): 　　&nbsp;return{"item_id": item_id,&nbsp;&nbsp;"q": q} 今回使用したURLですと、 http://localhost:8000/items/10 →10がread_item_idの第一引数の、item_id: intの箇所で <a href="http://localhost:8000/items/10?q=sample_fastapi" target="_blank" rel="noopener noreferrer">http://localhost:8000/items/10?q=sample_fastapi</a> →sample_fastapiがread_item_idの第二引数のq: str = Noneの箇所になります。 &nbsp; 試しに<a style="color:black" href="http://localhost:8000/items/%7bitem_id%7d" target="_blank" rel="noopener noreferrer">http://localhost:8000/items/{item_id}</a>の{item_id}の箇所にて、int(数値)以外の値を入れてみましょう。 WebブラウザでURLバーにて以下を入力してみてください。 <a href="http://localhost:8000/items/sample?q=sample" target="_blank" rel="noopener noreferrer">http://localhost:8000/items/sample?q=sample</a>

value is not a valid integer〜とエラーメッセージが出力されましたね。 &nbsp; では次に行きましょう。 WebブラウザのURLバーで以下を入力してください。 http://localhost:8000/docs &nbsp;

こちらの画面が表示されましたと思います。 こちらは自動対話型APIドキュメントです。 &nbsp; 次は以下のURLをWebブラウザで表示させてください。 http://localhost:8000/redoc

代替の自動ドキュメントが表示されます。

アップグレードの実装(PUTリクエスト)

PUTリクエストからボディを受け取る実装を進めます。 main.pyを修正しますので、黄色の部分を追加してください。 &nbsp; &nbsp; &nbsp; &nbsp; main.py &nbsp; from fastapi import FastAPI from pydantic import BaseModel app = FastAPI() class Item(BaseModel): &nbsp;&nbsp;&nbsp; name: str &nbsp;&nbsp;&nbsp; price: float &nbsp;&nbsp;&nbsp; is_offer: bool = None @apgep.t("/") def read_root(): &nbsp;&nbsp;&nbsp; return {"Hello": "World"} @app.get("/items/{item_id}") def read_item(item_id: int, q: str = None): &nbsp;&nbsp;&nbsp; return {"item_id": item_id, "q": q} @app.put("/items/{item_id}") def update_item(item_id: int, item: Item): &nbsp;&nbsp;&nbsp; return {"item_name": item.name, "item_id": item_id}

次は以下のURLをWebブラウザで表示させてください。 http://localhost:8000/docs

item_idに任意の数値を入力し ※画面の例の10以外の数値でも可

ユーザインターフェースはAPIと通信をして、パラメータを送信し、結果を取得して、画面下部に表示されます。 &nbsp; 次は以下のURLをクリックしてください。 <a href="http://localhost:8000/redoc" target="_blank" rel="noopener noreferrer">http://localhost:8000/redoc</a>

代替のAPIにも新しいクエリパラメータやボディが反映されています

このようにFastAPIは関数のパラメータとして、パラメータやボディ の型を宣言して、簡単にAPIエンドポイント定義と実装が可能になります。 &nbsp; &nbsp; 参考URL <a href="https://fastapi.tiangolo.com/ja" target="_blank" rel="noopener noreferrer">https://fastapi.tiangolo.com/ja</a>

PythonのWebフレームワークFastAPIの紹介

中川　彰吾

フリーランスSEで色々なWeb系の案件に参画中。言語はPythonやRuby
自宅でもパフォーマンスが落ちない様、リモートワーク中心の生活を過ごしながら、
IT技術だけでなく、英語や株式投資など学習中。


こんにちは！&nbsp;&nbsp;&nbsp;&nbsp;タカトです。 &nbsp; 今回は数多くSES事業を主とする会社が存在する中で、私がお世話になっているグラントホープをオススメする理由について解説します。 私自身、フリーランス歴は8年ですがグラントホープでお世話になってるのは2年目と実は短かったりします。 5年間は全く違うところで案件を紹介頂いており、正直行こうかどうか悩んだ背景もあります。今回はそんな悩みも踏まえてオススメの理由についてお話していきます！

グラントホープってどういう会社？

2016年設立の新しい会社でSES事業・キャリアアドバイザー事業を主としている会社です。設立して6年目ですが売上高は年々更新されており、2021年は24億。在籍しているフリーランスも数多く、年齢層も20〜40代と若々しい会社です。

私自身、グラントホープを選ぶまでは正直悩んだ

私は無料査定（詳細は事項で）を行ってから半年ほど保留にしてました。 &nbsp; 理由として、年収は上がったのですが色々な事情を考慮して案件を紹介して貰えるか不安だったからです。（私の場合は、高稼働は不可だったので） &nbsp; また、スキルに対する自信もそこまでなかったので「その額を貰うだけの活躍ができるのか？」という変にネガティブな状態になり、保留にしてました。 &nbsp; 今思うと、転職に似てるのかなと感じました。

結果的に半年悩んだ後、「入ってから色々考えよう！」という結論に至り、グラントホープさんにお世話になることを決めました。

実際グラントホープに入ってみて、どうだったか

5年間お世話になった会社以上に融通も利き、働きやすいです。 &nbsp; 年収もアップしましたし、サポートも手厚いので、早く会社を変えておけばよかったなぁと後悔したぐらい。 &nbsp; また、フリーランスと思えない福利厚生がしっかりしてるのでこの点は他社に負けないと思います。

グラントホープを選んだ6つの理由

私がグラントホープを選んだ理由は大きく6つあります。

グラントホープに入るにあたって、事前にスキルシートを提出して年収の査定ができます。 &nbsp; これで自分の年収が事前に分かるというワケです。 &nbsp; しかも今だとLINEで無料査定できるのが有難いですね。 &nbsp; 手順は本当に簡単で、経歴書を送るだけ。 &nbsp; 私の頃は対面でやっていた部分もあり、今も場合によっては対面になることもあるかもしれません。

2.査定結果が想像以上に良かった

私の場合ですが、年収が300万ほど上がりました。 &nbsp; 前の会社も安いワケではなかったのですが、想像以上の上がり幅だったのでかなり驚きました。 &nbsp; これだけ上がるのにも理由があって、グラントホープの場合、中間マージンの割合がかなり低いと思います。 &nbsp; とにかくエンジニアに還元するというのを大前提にしているため、結構な割合で年収アップできます。 &nbsp; しかもちゃんと経験値を積んで、単価の高い案件に参画することも出来て、更に年収アップが狙えるのもポイントです。

3.査定したからといって無理な勧誘・催促が一切ない

査定は正直、気軽にできます。 &nbsp; その後、入るかどうかは完全にゆだねてくれますし、無理な勧誘がありません。 &nbsp; ほとんどの会社は査定後「早めに動いた方が…」と言ったりしますが、グラントホープはちゃんと考える時間を頂けます。 &nbsp; 査定結果が良くても色々考えてしまうのが本音です。 &nbsp; 環境面、人間関係など、一旦冷静になって判断した方が良いのでそれが出来るのがいいですね。

4.キャリアも踏まえて案件を紹介してくれる

フリーランスとはいえ、ちゃんとキャリアを積むことが大事です。 &nbsp; 出来ることの幅が広がりますし、自分が「こういうことがやりたい、こういう方向に進んでいきたい」というのがあれば、それに合った案件に参画が可能です。 &nbsp; それだけの案件数がありますし、何よりこちらのことを考えて動いて貰えます。 &nbsp; キャリアプランを立てながら年収アップも狙えるので、普通の会社員の昇給と同じ感覚で給料アップが可能です。

フリーランスでは珍しく、国保ではなく社保に加入可能です。（任意） &nbsp; この二つの違いは、国民健康保険は加入者本人が保険料を全額負担します。 一方社会保険は、保険料の半分を加入先の会社・事業主が負担してくれます。 &nbsp; また、社会保険には、国民健康保険にはない扶養制度が設けられており、所得額の少ない家族を自分の扶養者として健康保険に加入させることができます。 &nbsp; これで家族の保険料が抑えられます。 &nbsp; それ以外でも最近は美容脱毛、エステを安価で受けられたり、今後は飲食・娯楽・レジャー・eラーニング・健康面など活用できる福利厚生が充実していく予定です。 &nbsp; フリーランスに欠かせない確定申告のサポートもありますし、最近ではライター業向けのSEO講座というのもあります。（2022年3月現在、無料） &nbsp; 正直、これだけ充実している会社は正社員の会社でも中々ないと思います。 &nbsp; それだけフリーランスにとってもメリットを考えてくれている会社というわけです。

6.案件参画後もサポートが手厚い

案件に参画したら、お終い！というワケではありません。 &nbsp; 一週間後、参画後の状況確認。何か問題があればすぐ連絡くださいなど、割と手厚いです。 &nbsp; 相談してもちゃんと向き合って話を聞いてくれますし、すぐに動いてくれるので私自身、現場で何があればすぐに連絡して相談したりしてます。

メリットばかり言ってしまうと疑いたくなるのが人間です。 &nbsp; なので、私が入った時に戸惑ったことを解説していきます。

1.案件紹介が複数の営業さんから来る

2022年3月現在、案件紹介について複数の営業さんから連絡が来ます。 &nbsp; しかも嬉しいことに結構な頻度で案件紹介の連絡がきます。 &nbsp; 私が最初いた会社は一人の営業さんから紹介頂いていました。 &nbsp; 紹介頂いて面談→ダメだったら次という流れだったため、複数から案件紹介があった時は驚きました。 &nbsp; ただ、この複数の方から紹介頂くやり方の方が平行で面談もできますし、早々と参画案件が決まります。（早ければ案件紹介頂いてから一週間で決まることもしばしば） &nbsp; 慣れればなんて事はないですが、慣れるまではちょっと大変に感じるかもしれません。

2.自分の中の優先順位をしっかり決めておくこと

案件を選んでいくにあたって必ず優先順を決める必要があります。 &nbsp; ・稼働を低くしたい ・高単価の案件に参画したい ・通勤時間を短くしたい ・キャリアアップをしたいので成長できそうな案件に参画したい &nbsp; などなど、全部を満たすというよりは何を優先してそれに合う案件を見つけるかが大事になるので優先順位はしっかり決めておきましょう。

まとめ：迷うぐらいなら年収査定して貰った方が良い→だって無料だもん

いかがだったでしょうか？まだまだ迷っていたり、とは言っても・・・というのが正直あると思います。 &nbsp; ですが査定自体は無料です。 &nbsp; ある意味、自分の市場価値がタダで分かるということなので、これ自体はやっておいて損はないと思います。 &nbsp; やった結果、微妙だったなら今の会社を継続すれば良いですしね。 &nbsp; 一度きりの人生、自分の価値をより高められる環境でキャリアと年収を伸ばしてみてはいかがでしょうか。

忖度なし！グラントホープをオススメする6つの理由！

皆さん、こんにちは。 Sgiです。 今回はエンジニアに是非活用していただきたいサービスがありますので、この記事を執筆致します。 最後まで読んでいただけると嬉しいです。

年収査定ってやったことありますか？

筆者がおすすめしたいサービスとは「年収無料査定」です。 これ、あまり見かけないですよね？ 正社員SEはまた話が別ですが、フリーランスSEは一般的に &nbsp; エージェントへ登録 ↓ 面談（ヒアリング） ↓ 案件紹介 ↓ お客さんと面談 ↓ 合格 ↓ 契約 &nbsp; という流れでお仕事が決定します。 &nbsp;

しかし今回ご紹介する年収無料査定の違いは図の通りです。

こちらの図を見ていただければ分かりやすいですが、 エージェントでのヒアリングの時点で自分の報酬額がおおよそ分かる仕組みとなっています。

どうやって査定してもらえる？

そもそもどうやって査定額をだしているのか。 気になったので色々聞いてきました。 &nbsp; &nbsp; この年収無料査定をするには、事前に &nbsp; ①&nbsp;&nbsp;&nbsp;技術経歴書 ②&nbsp;&nbsp;&nbsp;プロフィール &nbsp; を作成する必要があります。 エンジニアなら誰もが作成したことがあるはずです。 それをこちらの会社フォーマットに書き直すだけで完了となります。 &nbsp; 年収無料査定をヒアリング前にすることで、より具体的な希望条件の話ができる、という仕組みのようです。 &nbsp; &nbsp; どうやって査定額を出しているのか、謎ですよね。 どんどん解説していきます。

こちらの会社で実際にご成約されたエンジニアのスキル感・契約単価をもとに査定額をだしているそうです。 &nbsp; 査定額と契約時に決定した単価の誤差は月額換算で「約2万円前後」だとか。 これは正確すぎる…。 &nbsp; 会社の実績に基づいた査定額ということでした。 &nbsp;

実際にご成約された方の年収アップ事例

これは一般論ですが、IT業界の場合 正社員からフリーランスに転身した場合、年収は約1,5～2倍以上になります。 &nbsp; 理由は割愛していきます。 &nbsp; 今からお見せする事例も、査定額と契約時の単価（月額）の誤差はやはり2万円前後のようです。 それでは一気にお見せいたします！！ &nbsp; 今回はスキル感も教えていただけましたので、ご参考までに見ていただければと思います。

こうみると、皆さん年収が確実にUPしているのがわかります。 &nbsp; &nbsp; 他エージェントは契約が確定するまで自分の報酬額が不明瞭ですが、 こちらの会社は案件を選ぶ前に自分のスキル感ではどれくらい報酬が貰えるのかが分かるため、収入が不安定と思われがちなフリーランスですが 先の見通しがつくことがメリットになりますね。

査定後にヒアリング→案件紹介をしてもらうメリット

こちらは私が思うことですが、以下4点です。 &nbsp; ①&nbsp;&nbsp;&nbsp;&nbsp;金額が分かることで収入の見通しがつく ②&nbsp;&nbsp;&nbsp;&nbsp;単価をあげるために何をするべきなのか、ヒアリングに相談できる ③&nbsp;&nbsp;&nbsp;&nbsp;具体的な希望が言える ④&nbsp;&nbsp;&nbsp;&nbsp;希望に沿った案件を紹介してもらえる＝ミスマッチが少ない &nbsp; 順にお話させていただきます。

①	金額が分かることで収入の見通しがつく

先ほども少し触れましたが、フリーランスは収入が不安定、と世間一般的には思われています。 しかし、実際にはエージェントを利用することで大半のエンジニアは安定した収入を得ることが出来ます。なぜならエージェントの営業マンが案件を探してくれるからです。 &nbsp; その案件も、事前に報酬額がわかることで収入の見通しがつくため大半の不安は払拭されるはずです。

②	単価をあげるために何をするべきなのか、ヒアリング時に相談できる

査定をすると、おおよその自分の単価がわかります。 査定の金額をふまえて、もしくは将来的にもっと稼ぎたい！というエンジニアは多くいるはずです。 単価を上げるためには、当然スキルアップする必要があります。 スキルアップし、上流工程に参画したり、リーダー業務を行ったり、色々なチャンスがある案件を紹介してもらうことが可能になるはずです。

単価が明瞭になることで、自分のスキル感や立ち位置など、市場価値が見えてくるはずです。 その中で、 「単価を上げたいのでスキルアップできる案件にアサインしてほしい」 「今までリーダー業務ばかり任されてきたけど、本当はプログラマーがいい」 など、より自分のやりたいことを優先させた希望が言えるはずです。 &nbsp; 実際にアサインされるかはエージェントの営業力や個人の面談力にもよりますが、どこのエージェントでも自分の希望はしっかりと伝えるべきです。

④	希望に沿った案件を紹介してもらえる＝ミスマッチが少ない

これに関しては少し論点がずれますが、ヒアリングの時点で自分の希望をエージェントに伝えきれない場合にミスマッチが起こってしまいます。 &nbsp; 案件のミスマッチはエンジニアにとって結構な痛手となります。 「せっかくフリーランスになったのに、希望していた案件にアサインされない・・・」 &nbsp; なんて、そんなもったいないことしてはいけません。 やりたくないことに時間も労力を費やすのはナンセンスですから、しっかり自分の希望を伝えましょう。 ミスマッチが起こらず、やりたい案件にアサインされ、単価もアップ、スキルも習得出来たら最高ですよね。

・・・この会社、一体どちら様？

お待たせいたしました。 今までお話してきたサービスを展開しているのは このメディアサイトを運営している<a href="https://www.granthope.jp/" target="_blank" rel="noopener noreferrer">株式会社グラントホープ</a>さんです。 <img src="https://images.microcms-assets.io/assets/03df7942ab184c4fb92ae2a6d548e115/398019c5b09d483c82b4f1aaaf3d0c72/image.png" alt="">

グラントホープさんの特徴は、まず今回ご紹介させていただいた、年収無料査定。 そしてヒアリングには結構力をいれているようで、まさにエンジニアファースト。 &nbsp; しっかりヒアリングをするからこそ、やりたい案件がどんどん紹介される営業力。 &nbsp; 年収無料査定から最短3日でご成約された方もいらっしゃるそうです。 &nbsp; &nbsp; この年収無料査定は、誰でも実施できるようですよ。 &nbsp; ※フリーランスなので、未経験者は対象外のようです。 	ご実績が２年ある方が対象です。

いろんなフリーランスのエージェント会社がありますが、 それぞれの特徴をふまえて活用していきましょう。 &nbsp; 私個人的な意見としては、無料年収査定はおすすめです。 正社員の方は、フリーランスに転身した場合、今の自分のスキルではどれくらい貰えるのか。 フリーランスの方は、単純にエージェントによって単価が異なりますので比較対象として活用していただけばと思います。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; これは豆知識？かもしれませんが グラントホープさんは役員の皆さんは、全員元フリーランスエンジニアのようです。 元フリーランスエンジニアによる、フリーランスエンジニアのための会社でありたい。 &nbsp; そんな強い思いがあるそうです。 &nbsp; 拙い文章でしたが、最後まで読んでいただきありがとうございました。

エンジニア必見！一度は全員試すべき年収無料査定？！

業務でコードを書く際、似たような処理を別の業務で実装した経験がある方も多いのではないでしょうか。中には、それを自作のライブラリとして作成して、GitHubで管理するという形を取っている方もおられるでしょう。 では、実際にそれを複数のプロジェクトで使用する際はどのように行っているでしょうか。 今やほとんどのエンジニアが使っているGitHubですが、その機能のひとつにGitHub Packagesと呼ばれるパッケージホスティングサービスがあります。 今回はこちらを利用して、自作のJavaScript関数をnpmライブラリとして管理する手順をご紹介します。

以前はGitHub Package Registryと呼ばれていたこのホスティングサービスですが、ひとことで言ってしまえば「作成したソフトウェアをGitHub上でパッケージとして管理することで、さまざまなプロジェクトで使えるようにしたよ」というものです。 プライベートリポジトリではプランによって料金が異なりますが、フリープランであってもストレージ容量500MBかつ月間データ転送量1GBまでであれば無料で使えます。 パブリックリポジトリに至っては完全に無料。太っ腹です。

GitHub Packagesに自作関数をデプロイする

今回はTypeScriptを使って簡単な関数を実装し、それを自分専用のライブラリとして作ってみましょう。

まずはPackage.jsonに以下の内容を記述していきます。 ついでにnpm installもやっておきましょう。

@{GitHubのユーザーネーム}/{リポジトリ名}

ここで、いくつか重要なフィールドをピックアップして解説します。 name @{GitHubのユーザーネーム}/{リポジトリ名}の形で入力します。 実際にライブラリをインストールする際も$ npm install @{GitHubのユーザーネーム}/{リポジトリ名}という形式になります。 version ライブラリ自体のバージョンを管理します。今回はとりあえず0.0.1としておきました。 main ライブラリが別のモジュールから呼び出された際に、どのファイルを参照するかを設定します。 今回はトランスパイルされた後のJSファイルを参照するので、dist/main.jsを指定しました。 typesフィールド ライブラリの型定義ファイルを指定します。 publishConfig npmで扱えるようにするため、registryに<a style="color:#1155cc" href="https://npm.pkg.github.com" target="_blank" rel="noopener noreferrer">https://npm.pkg.github.com</a>を指定します。 また、今回は自分専用＝プライベートなライブラリなので、accessにはrestrictedを指定しておきます。 ちなみに複数のレジストリで公開したい場合は、publishConfigフィールドではなく.npmrcに記述する形になります。

今回は最小限の設定だけ記述しました。

リポジトリを作成する際、Node.jsのgitignoreテンプレートを選択している場合は不要ですが、もしそうでなければ.gitignoreにdistディレクトリを追加しておきましょう。 こちらはトランスパイル後のJSファイルと型定義ファイルが格納される予定ですが、トランスパイル自体は後述するGitHub Actionsで行います。

今回は「引数として与えられた文字列の奇数番目だけを抽出した文字列を返す」という関数を作ってみます。

こんな感じでしょうか。 すごく簡単な内容ですが、これならビルドの時間も短いので練習にはもってこいです。

GitHub ActionsでPublishの設定を行い、Packageとして公開する

最後に、プッシュされたら自動でトランスパイル＆Packageとして公開するGitHub Actionsを設定します。 .github/workflows/publish.ymlとして以下の内容を記述した設定ファイルを追加しましょう。

この際、secrets.GITHUB_TOKENという値を利用していますが、これは各リポジトリにデフォルトで備わっているトークンなので個別に設定する必要はありません。 ここまでの内容でプッシュしてみましょう。 リポジトリのActionタブを開くと、すでに先ほど設定したアクションが終了していました。

Codeタブに戻ってみるとPackagesの欄が追加されており、先ほどプッシュした内容がv0.0.1として正常にデプロイされたことがわかります。

デプロイされたライブラリを使う

次にデプロイされたライブラリを実際のプロジェクトに導入して利用する手順をご紹介します。

今回はプライベートなパッケージを対象としているので、それにアクセスするためのトークンを発行する必要があります。 <a style="color:#1155cc" href="https://docs.github.com/ja/github/authenticating-to-github/creating-a-personal-access-token" target="_blank" rel="noopener noreferrer">公式の解説</a>に従って設定ページを開きましょう。

パッケージの読み取りを行うだけなので、スコープはread:packagesにのみチェックを入れます。 NoteはわかりやすいようにREAD_PACKAGESとしてみました。

Personal Access Tokenを発行したら、適当なプロジェクトを作成し、プロジェクトルートに.npmrcを作成して以下の内容を記述します。

これでプライベートなパッケージにアクセスできるようになりました。 あとは通常のNPMモジュールインストールと同様にnpm installすれば、node_modulesディレクトリにインストールされます。

それでは実際に使ってみます。 以下のスクリプトを実行し、AAAAと表示されれば成功です。

期待通りに動きました。 関数名にマウスオーバーすると型の情報も見られるので、型定義ファイルもきちんと参照できているようです。

ここで先ほど実装したライブラリに、「奇数番目or偶数番目の文字列を引数によって選択できる」という新機能を実装したくなりました。 早速実装してみましょう。

新機能を追加したのでマイナーアップデートという扱いにしましょう。 手動で書き換えることもできますが、npmにはパッケージのバージョンを管理するコマンドがあるのでそれを利用します。

gitのログを確認してみましょう。 package.jsonのバージョンが更新され、v0.1.0として新たにタグが作成されていると思います。この状態でプッシュしましょう。

Releaseの欄が2 tagsになり、Packages欄のバージョンも0.1.0になっています。 どうやらきちんとアップデートできたようです。

昨今はnpmライブラリが充実しており、欲しい機能は探せば見つかることが多いと思います。 しかし、公開されているライブラリでは機能が不足していたり、不要な機能が多すぎたりする場合、自作のライブラリで解決するという手段は選択肢として大いにあると思います。 そんなときには、ぜひGitHub Packagesを利用して便利に使いまわしていきましょう。

GitHubの機能である「GitHub Packages」を利用し、自作のJavaScript関数をnpmライブラリとして管理する手順をご紹介します。

GitHub Packagesを使って自作ライブラリを管理しよう

Takumi.K

サービス開発にも携わるフリーランスフロントエンドエンジニア。

2020年以降、新型コロナウィルスの感染拡大に伴い人々の生活や働き方などが大きく変化しました。その中でも順調に売り上げを伸ばしている分野として自粛生活に欠かせない様々なサービスを打ち出しているSaaSビジネスが挙げられると思います。それらのソフトウェアを開発するうえで重要なエンジニアの需要はより一層高まっていると言っても過言ではありません。

初めまして。フロントエンドエンジニアとしてフリーランスで活動している久米と申します。現在見ていただいているこのメディアサイト、エンジニアファーストの実装を担当したこともあり、今回記念すべき1記事目の執筆を努めさせていただくこととなりました。

冒頭でもお話ししたように、エンジニアの需要が高まっている中、今後のキャリアに迷っている方や学ぶべき技術の選定をされている方も多いのではないでしょうか。 そのような方の参考になればと思い、今回は様々なプログラミング言語の中でも学習のしやすさやスタートアップに求められる技術として名前が挙がるフロントエンドについて技術の遷移を振り返りつつ、最新のアプリケーションで求められる技術やその魅力などをお話ししていきたいと思います。

HTML、CSS、jQueryで「ホームページ」の作成

まず前提としてフロントエンドというものの定義について、様々な表現がありますが今回「Webアプリケーションにおいてユーザーが直接触れる部分」とさせていただきます。つまり今開いているブラウザに表示されている部分全てをフロントエンドと定義します。

HTMLやCSSを用いて文章構造にスタイリングをし、JavaScriptを用いてインタラクション部分の実装や外部との通信などを行い、必要な情報を最適な形で表示する分野です。 PythonやRuby、PHPなどバックエンドの言語を少しでも触れている方であればこれらの技術にも触れたことがあるかもしれません。バックエンド言語で実装した処理の実行結果を表示するのも最終的にはフロントエンドだからです。 そのような観点から「ひとまず文字を出力するだけ」ならすぐに実行できるため、フロントエンドは簡単な分野と思われている方もいらっしゃるかと思います。

↑上記のような記述だけで角丸のボタンとクリックした際のイベントが設定できます。

学習ハードルの低さから個人のWebサイト、いわゆる「ホームページ」を作るためにこれらの技術を学習した人がIT業界外にも沢山いることでしょう。JavaScriptのライブラリ、『jQuery』により様々なインタラクションの実装が簡易的に実装できるようになったこともあり、より一層手軽に取りかかれる分野になりました。 かく言う私も20代前半に一切のプログラミング経験がないところから学習を始めてフロントエンドの技術を身につけたので、はじめるにあたってのハードルの低さという点に関しては大いに賛同します。 前述の通りフロントエンドは学習のハードルの低さから乱暴に言うと <ul><li>WebサイトのページをHTMLで作成する</li><li>CSSで色やサイズなどの体裁を整える</li><li>ちょっとしたインタラクションはjQueryを用いて簡易的に実装する</li></ul> ということを実現するための簡単な技術に見える側面もあったかもしれません。

もちろん本当に簡単というわけではありません。技術の進歩が目まぐるしい分野というのもフロントエンドの特徴の一つです。 Webサイト一つにおいても様々なブラウザの対応状況の差分を埋めることや、アクセシビリティの考慮など、プロ品質の仕事をするにはそれ相応の難易度とやり甲斐はすでに存在していたと思います。 2010年前後になるとブラウザの発展やスマートフォンなどのデバイスの誕生も相まって、JavaScriptを用いた複雑な処理が求められるWebアプリケーションが増え始めました。

React、Vue、AngularなどのSPAフレームワークの台頭

Webアプリケーションに求められる処理をより効率的に実装するために生まれた技術により、単なる文章構造の整形であった時代から大きく発展することになります。SPA（シングルページアプリケーション）を実装する技術の到来です。React.jsやVue.js、AngularJSに代表されるJavaScriptのフレームワークが登場しました。

今まではページ遷移などのタイミングでサーバー側に新たなHTMLのリクエストをするという流れだったものが、更新が必要なもののみをJavaScriptで再描画して単一のページを擬似的に変化しているように表示することが可能になったことで、ブラウザの挙動に縛られないより高度なユーザー体験を実現できるようになりました。

通信技術の進歩も相まって今まででは表現が難しかったアプリケーションの実装が現実的になり、それらの技術を軸に様々なWebアプリケーションが生まれました。多くのシェアを集めている具体的な採用事例にはTwitterやFacebookなどのSNSや、NetflixやAmazon Prime Videoなどの動画配信サービスなどが挙げられます。

SPAではJavaScriptが動作して表示される内容が切り替わるという仕様上、ランディング時の表示速度やSEO対策の面で課題がありましたが、SSR（サーバーサイドレンダリング）やSSG（スタティックサイトジェネレーター）といった技術がそれらの課題を解決していき、より多くの場面でSPAフレームワークが導入されることの後押しにもなり、数年でフロントエンドのデファクトスタンダードとなり、フロントエンドの技術的価値や開発体験の向上に大きく貢献しました。

そのほかにも派生技術として、ネイティブの言語（SwiftやKotlinなど）を使用せずにiOS・Androidアプリを実装できる『React Native』という技術なども登場したことでクロスプラットフォームも可能になり、より一層フロントエンド技術の需要が高まりました。

Jamstack、サーバーレスアーキテクチャを使用したWebアプリケーション開発

SPAを用いることでフロントエンドにおいて実現できることが大幅に増加しました。その一方でWebサイトなどの小〜中規模なものにとっては導入コストの方が大きく、依然として従来の技術スタックが採用される場面もあります。よく耳にするものだとバックエンドをPHPベースで作成されたオープンソースCMS、WordPressを導入するケースが今も圧倒的なシェアを獲得しています。 情報量の多さから対応可能な人材も多く、技術選定の面でメリットが大きいWordPressですが、バックエンドとフロントエンドが密接に紐づいているというセキュリティ上の懸念や、アプリケーションやプラグインのメンテナンス、ランディング時にサーバー側で処理を行うため表示速度が遅いなどデメリットも多く存在しています。それらのデメリットを補う手段として近年Jamstackという技術スタックも生まれました。 Jamstackとは『JavaScript』、『API』、『Markup』の頭文字をとって命名されたフロントエンドの技術スタックです。端的に説明するとJavaScriptを用いてAPI経由でデータを取得し事前にHTMLへビルドしておくことで動的な要素を静的に配信することができるようにしたものです。前項でも紹介したSSGを用いて実装されることが多いです。

実はこのエンジニアファーストも検索などの一部機能を除き、SSG機能を有したReact.jsのフレームワーク『Next.js』、APIでデータを取得できることが特徴である日本製HeadlessCMSの『microCMS』を採用しており、CMSに更新があったタイミングでデータを事前にビルドして表示するJamstack構成で実装しているため、高速ページ遷移やバックエンドのセキュリティ面にも考慮しています。

Jamstackにも関連して、前項のSPAを実現するフレームワークではバックエンドとの疎結合を図るためAPI経由でデータの取得を行うケースが多く見られます。 近年ではAWSの『Lambda』やGCPの『Cloud Functions』に代表されるFaaSを用いて、フルマネージドなサーバー環境で処理した結果をAPI経由で取得、前述の『microCMS』のようなAPIベースでデータだけを取得するというようなサーバーレスアーキテクチャが採用される場面も増え、必要な情報だけを外部から取得してフロントエンドでデータの整形をするというように開発の自由度も広がっています。

Webアプリケーションに求められる現代のフロントエンド

フロントエンドの技術遷移を振り返ってきましたが、これらはほんの一部です。ここには挙げきれないほど様々な技術が生まれ、フロントエンド開発はより一層広がりをみせています。最新のフロントエンドエンジニアのロードマップとして下記のようなものが掲載されています。

その中でバックエンドにも影響を与えているものとして『TypeScript』が挙げられます。 TypeScriptとはJavaScriptの仕様を拡張したものとなっており、大きな特徴として静的型チェックが可能になっています。TypeScriptからJavaScriptにコンパイルをすることでブラウザで使用することができ、JavaScriptの構文がそのまま使用できることもあり広く普及しています。TypeScriptは開発体験を高めるだけでなく前項の通りフロントエンドにおいてAPIベースでの通信処理が行われる際のデータ構造の担保やドキュメントのような側面にも貢献していると感じています。

バックエンドにおいても近年Node.jsを採用する場面も増えてきており、その中でもTypeScriptが用いられることがあります。<a style="color:#000000" href="https://blitzjs.com/" target="_blank" rel="noopener noreferrer">Blitz.js</a>や<a style="color:#000000" href="https://frourio.io/" target="_blank" rel="noopener noreferrer">frourio</a>といったTypeScriptベースのフルスタックフレームワークも生まれ、今後はそれらの採用事例も徐々に増えていくと個人的には思っています。

他にバックエンドにも関連するものとしては、広く使われているREST形式のAPIに対して『GraphQL』というAPI形式で一つのエンドポイントにフロントエンド側で必要なデータのみを指定して取得したり、『BFF（Backends For Frontends）』という設計によりフロントエンドのためにAPIのコールやデータの整形を行う環境を用意したりと、これらが数年のうちにどんどん発達していることで様々な技術が求められるようになっています。

もはやここまでいくと「フロントエンド」と一括りにできないほどの膨大な技術が存在し、アプリケーション開発において大きな責務を担っていることがわかるかと思います。

あくまで私個人の観測範囲が軸になっているので今回紹介した技術には大いに偏りがあることかと思いますが、これだけの技術が数年のうちに発達したおかげでフロントエンドはもはやただ単に「文章を綺麗に整える」だけの分野ではなく、より高度なユーザー体験の核を担い、アプリケーション開発に深く関わるようになったということが伝われば幸いです。

私自身、エンジニアとしてのキャリアを歩み始めてからも新たな技術がどんどん生まれ、それらを追っていくことの難しさを身をもって感じていますが、それ以上にフロントエンドを通して様々なことが実現できていく楽しさに魅力を感じ、日々学び続けています。 みなさんもこれからますます需要が高まり、アプリケーション開発においても大きなやりがいを見出すことのできるフロントエンドという分野に触れてみてはいかがでしょうか。

サービス開発において需要が高まっているエンジニア。今回はプログラミング言語の中でも学習のしやすさで名前が挙がるフロントエンドについて求められる技術やその魅力についてお話ししていきたいと思います。

技術遷移から見る現代のWebアプリケーションに求められるフロントエンド

久米大輔/Mei（Crogic）

Web・音楽を中心としたデジタルコンテンツ制作を行うCrogicの代表。
フリーランスのフロントエンドエンジニア・作編曲家として活動している。
Mei名義でVocalとしても活動中。

タグ:【フロントエンド】の記事一覧