TechAcademy（テックアカデミー） プログラミング 【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選
オーダーメイドコース
icon
icon
プログラミング

【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選

Web開発に便利なChrome拡張機能を紹介しています。現役エンジニアはもちろん、非エンジニアでもWeb開発に興味がある人は入れておくと非常に便利に感じるはずです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

これからエンジニアを目指す人や、普段はディレクターとして働いている人向けにWeb開発で便利なChrome拡張機能をまとめています。

エンジニアやデザイナーと一緒に仕事をしている人には、業務効率の上がるものが多いので、Chromeに追加しておくと良いでしょう。

 

また、オンラインのプログラミングスクールTechAcademyでは、未経験でもプログラミングを習得することが出来ます。

 

ato-ichinen

スクリーンショット 2016-03-16 14.05.57

Google検索の結果を1年以内に絞り込みすることができます。

プログラミング言語のバージョンが変わってからの結果だけ見たいという時に利用できます。デザインのトレンドやプログラミングの最新情報はよく変わっていきます。出来るだけ新しい情報を得るために役立ちそうですね。

ato-ichinen

 

smartphone simulator

スクリーンショット 2016-03-16 12.25.36

PCからスマホページを確認できる拡張機能です。

Chromeに追加後は、ワンクリックでスマートフォン表示にしてくれるので、デザイナーやWeb開発に関わる人は入れておいて損はないでしょう。

smartphone simulator

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

ColorPick Eyedropper

スクリーンショット 2016-03-16 12.26.01

マウスオーバーしている部分のカラーコードが分かる拡張機能です。

「このサイトを参考にしたい！」と思った時に一瞬でカラーコードを出力してくれるので非常に便利でしょう。デザイナーとディレクターとのやりとりもスムーズに進みそうです。

ColorPick Eyedropper

 

DevTools Theme: Zero Dark Matrix

スクリーンショット 2016-03-16 12.26.35

Google Chromeのデベロッパーツールをカスタマイズすることができる拡張機能です。

開発する上でChromeデベロッパーツールは毎日見るところでしょう。

普段使っているエディタはダークカラーだからChromeデベロッパーツールも色を合わせたい！という人は多いのではないでしょうか。背景がダークカラーであればクールな印象になりますし、目にも優しいでしょう。ぜひ自分用にカスタマイズしてみてください。

DevTools Theme: Zero Dark Matrix

 

Wappalyzer

スクリーンショット 2016-03-16 12.27.43

Wappalyzerでは、開いているサイトで使われいる言語やフレームワークを解析してくれます。

「このサービスはどの言語で作られているんだろうか」「JavaScriptのフレームワークは何を使っているんだろう」といった疑問を解決することができるでしょう。初めてWebサービスを開発するという人は特に参考になるツールになると思います。

Wappalyzer

 

YSlow

スクリーンショット 2016-03-16 12.32.10

YSlowでは、サイトのパフォーマンスを計測してくれます。

Webサイトの表示を高速化するためにあらゆる項目で判定してもらえます。「CSSは上に置きましょう」や「JavaScriptは下に置きましょう」など色々な項目でA~Fで判定をし、サイト改善を行うために役に立ちそうです。

YSlow

 

Awesome Screenshot

スクリーンショット 2016-03-16 12.25.15

サイトの一部をキャプチャすることができ、さらにそのキャプチャを加工することができる拡張機能です。

ページ全体のキャプチャ・選択したエリアのキャプチャを撮ることができ、丸で囲ったり文字を記載などできる便利ツールです。

ディレクターの人などエンジニアやデザイナーに何か依頼するときにキャプチャを撮ってメッセージを記載しているとより伝わりやすいでしょう。単純にキャプチャを撮るだけでも大変役にたつので、Chromeに追加しておくと良いでしょう。

Awesome Screenchot

 

One Tab

スクリーンショット 2016-03-16 12.32.56

One Tabは、開いているタブを一つにまとめてくれる機能を持っています。

タブを多く開いているとChromeが重くなってしまいますし、どこに何のタブがあるのか分からなくなることがあります。One Tabでは、開いているサイトの一覧を表示してくれるので、すぐに見つけることができるでしょう。

One Tab

 

Page Ruler

スクリーンショット 2016-03-16 12.33.19

サイト内のロゴなどサイズを簡単に数値化してくれる拡張機能です。

Googleロゴの幅や高さを一発で出すことができます。ロゴや画像のサイズを測るときに活躍しそうですね。

Page Ruler

 

Clear Cache

スクリーンショット 2016-03-16 12.33.46

Clear Cacheでは、Chromeにたまったキャッシュを削除することができます。

デザインなどを修正したにも関わらず更新しても反映されていないという場合は、キャッシュが残っている可能性大です。最新状態を表示してくれるので、いざという時便利でしょう。

Clear Cache

 

Pasty

スクリーンショット 2016-03-16 12.34.12

複数のURLをコピーしてPastyのアイコンをクリックすると、一度に全部のタブを開いてくれるという優れものです。

他の人から送られてきた参考サイトなども一つ一つ開くのでは面倒です。Pastyを使って業務効率をあげましょう！

Pasty

 

以上、Web開発において便利なChrome拡張機能を紹介しました。

今まで不便に思っていたこともワンクリックで解決できてしまうので、追加しておくとスムーズに仕事が進むはずです。

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。

記事を検索

関連するキーワード

関連する記事

プログラミングにも使える！TeraPadの使い方【初心者向け】

プログラミングに使えるテキストエディタは複数ありますが、そのうちの1つであるTeraPad（テラパッド）について初心者向けにご紹介します。   ...
プログラミング

今すぐ実践できる！エディタAtomの使い方【初心者向け】

テキストエディタ「Atom」の使い方について解説しています。 エンジニアなどプログラミングの作業をする上でAtomを利用している人は大勢います。Subli...
プログラミング

IT勉強会を見つけられるサイト・ツールまとめ【全部で13種類】

エンジニアの方はもちろん、一般の方も気軽に参加できるIT勉強会が全国各地で毎日のように開催されています。開催場所も東京、大阪、名古屋、福岡など大都市では頻繁も高...
プログラミング

プログラミングの開発環境に便利！Cloud9の使い方【Rails・WordPressテンプレートの解説あり】

これからプログラミングを勉強するという初心者にとって、最初のハードルは開発環境の構築ではないでしょうか。 TechAcademyマガジンではこれまで、Ru...
プログラミング

【連載企画】プログラミング未経験の文系学生でもエンジニアになれる！

本記事は、キャリアに特化したQ&Aサービス「JobQ」との連載企画になります。毎週月曜日に就職や転職など、あるテーマに沿って紹介していくシリーズです。前...
プログラミング

プログラマーとSEの年収を政府データから調べてみた【過去10年間の推移】

先日のWebデザイナーの年収についての記事が好評だったので、プログラマーとシステムエンジニア（SE）の年収についても同じように調べてみました。 使用したデ...
プログラミング

あわせてよく読まれている記事

Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】

Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Chromeとは Chromeの開発者ツールでできること JavaScriptのデバッグを行う方法 まとめ   Chromeとは Chrome とは Google 社が開発したフリーソフトウェアのブラウザです。WindowsやMac、Linux、Android、 iOS など多くのOSで提供されています。全てのWebブラウザにおける Chrome のシェアは約64%と多くを占めています。 参考：statcounter  – Desktop Browser Market Share Worldwide   [PR] プログラミングで挫折しない学習方法を動画で公開中Chromeの開発者ツールでできること Chrome には「デベロッパーツール」と呼ばれる開発者ツールが添付されています。デベロッパーツールは Chrome の「その他のツール」メニューから起動できます。 デベロッパーツールは複数のタブで構成されています。初心者は以下の4つのタブを利用することが多いでしょう。 Elements ：Webページの要素に対応するHTMLやCSSの確認。動的なHTMLやCSSの変更と結果の確認 Console ：各種ログの閲覧、JavaScript コードの実行 Sources ：現在のWebページに関連して読み込まれているファイルと内容の確認 Network ：Webページと関連ファイルが読み込まれる速度の確認   JavaScriptのデバッグを行う方法 デベロッパーツールの主な使い方の1つがデバッグです。ここでは JavaScript のデバッグを行う代表的な方法を2つご紹介します。   console.log() 関数を使用する方法 console.log() 関数は Console にログを出力する関数です。この関数を使用することで、変数の値やプログラムが実行されていることなどを確認することができます。例で確認してみましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> test <script language="javascript" type="text/javascript"> window.onload = () => { console.log('ページが読み込まれました'); } </script> </body> </html> 実行結果は以下のとおりです。デベロッパーツールの Console に結果が出力され、プログラムが実行されたことが確認できました。   ブレークポイントを使用する方法 ブレークポイントとは、プログラムの実行を一時停止する方法です。一時停止する場所のことをブレークポイントと呼びます。まずはデベロッパーツールの Sources
JavaScript

在宅でできる副業おすすめ職種20選【月5万円稼ぐ方法】

「スキマ時間で稼げる副業はないかな…？」 「どうせなら在宅でできる副業はないかな…？」 「スキルを身につけながら稼ぐことはできないかな…？」   この記事では、在宅でできるおすすめの副業20選を紹介し、選び方、副業をする上での注意点まで解説しています。 今の会社の収入だけでは満足できていない人 会社に出勤するのが無駄だと思っている人 そんな人に向けて書きました。   この記事を最後まで読めば、あなたにぴったりの副業が見つかるでしょう。   目次ato-ichinensmartphone simulatorColorPick EyedropperDevTools Theme: Zero Dark MatrixWappalyzerYSlowAwesome ScreenshotOne TabPage RulerClear CachePasty 副業で特におすすめなのはIT系の副業です。 習得に時間と労力はかかるが、しっかり力をつければ安定して稼ぐことができます。 プログラミングは今後必要とされるスキルですので、副業を機会に始めてみるとよいでしょう。 難しい印象がありますが、意外と楽しく感じる人も多いので、まずはIT系の副業について勉強してみるのがおすすめです。 プログラマー Webサイト制作 Webデザイン プログラミングで副業したい人向けに、未経験から副業プログラミングで稼ぐ方法を解説した記事もあります。 ぜひご覧ください。   1 在宅でできる副業20選 在宅でできる副業にはどのようなものがあるのでしょうか。 現在人気の副業を中心に、それぞれの特徴をまとめました。 また、スキマ時間で毎月一定収入を稼ぎたいと考えている方向けに、「現実的に副業の範囲で5万円稼げるのか」という点についても説明しています。 1.1 Webライティング Webライティングは、クライアントが指定した内容やテーマに沿って、記事を執筆する仕事です。 Webメディアをはじめとする、様々な媒体でニーズがあり、ブログや商品紹介ページの作成、最近ではYouTubeの台本などの仕事もあります。   Webでの検索は今後も増加していく一方ですので、圧倒的に将来性がある副業だと言えるでしょう。 また、時間の確保さえできれば、毎月5万円を安定的に稼ぐことが可能です。 長期間継続し、文字単価を上げることができればより少ない時間で収入を得られるようになります。   向いている人 継続的にスキルアップし、専門性を高めていける人 記事を書くために多くのWebサイトや資料を読み込むため、情報収集が苦にならない人 様々な分野に興味を持つことができる人 タイピングに自信がある人 報酬体系 文字単価に、納品した記事の文字数を掛け合わせて計算する 1文字0.5円〜3円、1件あたり2000文字〜10000文字が相場 成果報酬型のため、案件を多く受けることができればその分収入アップにつながる クラウドソーシングなどのサイトを利用すれば、案件を受注し納品することで即収入が発生 メリット 日本語の読み書きができれば、特別なスキルがいらない 本業にも通じる文章作成能力が身につく デメリット ライバルが多く、案件が取りづらい可能性がある 案件が取れたとしても最初のうちは低単価で受注することも多くなる   1.2 ブログ 自分自身で開設したブログから収益を得る仕事です。ただし、記事を更新するだけでは収益が発生しません。   主に記事に外部企業の商品広告を貼り、そこから商品を購入したユーザーがいる場合に手数料が受け取れる「アフィエイト」と、Googleのバナー広告を掲載し記事がクリックされると報酬が発生する「Google アドセンス」という2つの方法があります。   Web広告の市場規模は年々拡大しているため、今後もニーズが増え続けていくでしょう。しかし、ブログアフィリエイターの30％以上が、ブログからの収入を得られていません。月5万円を稼ぐとなると、上位20％に入る必要があるため、安定的に稼ぐためのハードルはかなり高いと言えるでしょう。 参考：特定非営利活動法人　アフィリエイトマーケティング協会　「アフィリエイトに関する市場調査　2020年   向いている人 収益化するまで記事更新を継続できる人 「これだけは他の人に負けない」といった特定の分野に精通している人 報酬体系 アフリエイトの場合、広告を通して商品を1つ購入した場合に、商品価格の数％または一定額が支払われる 報酬額は商品ごとに異なり、1件あたり100円〜数千円 アドセンスの場合、1クリック30〜40円、PV数次第で収益が変わる 記事作成後、検索に反映されるまで3ヶ月ほどかかることがほとんどのため、収益化までは少し時間がかかる メリット P V数を増やす過程で、記事のライティングスキルや集客スキルが身につく 一度稼げるブログを作ってしまえば、何もしなくても広告収入が発生するため不労所得を得ることができる デメリット 競争が激しく収益化するまでに時間がかかる   1.3 プログラマー プログラミング言語を用いて、様々なシステムやアプリケーションを作成したり、動かしたりする仕事です。   基幹システムのサーバー構築や、既存システムの開発やテストといった業務内容があります。2018年の時点で、プログラマーのようなIT人材は約20万人以上不足となっており、2025年ではIT人材は36万人の不足と試算されています。   金融や家電、自動車など様々な分野においてI Tの活用が推進されていることも追い風になっており、かなり将来性がある職業だといえるでしょう。 参考：経済産業省　2019年　I T人材需給に関する調査   1案件あたりの単価が高く、スキルが身につけば短い時間で納品まで完了できますので毎月5万を安定して稼ぐことは可能でしょう。場合によっては1案件で数十万円稼ぐこともできるのがプログラマーの特徴です。 ただし、高額な案件を獲得するには、それなりの経験が求められます。 企業で3年以上の実務経験と向上心が必要になりますが、満たしていれば時給4,000円以上も視野に入るでしょう。   向いている人 プログラミングに必要な知識は日々アップデートされているため、常に新しいことを学んで行ける人 向上心があり、前向きに取り組める人 本業でプログラミングに携わっている人 報酬体系 プロジェクトごとに異なり、1案件あたりの単価は5〜10万円以上になることが多い 高い技術が必要とされるアプリケーション作成の場合には30万円以上となることもある 知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高い メリット プログラミング言語は一度覚えてしまえば様々な分野に応用可能なため、手に職をつけることができる ニーズが高く、案件に困ることがない 一般的にスキル習得難易度が高いと思われているが地道に継続すれば未経験からも習得できる デメリット 知識を取得するまでには一定時間を確保する必要がある 案件を獲得するには企業で数年の就業経験が必要   関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説   1.4 Webサイト制作 ホームページやLP（ランディングページ）などのWebサイト制作をする仕事です。 主にプログラミング言語を用いてコーディングをすることがメインの業務となります。 現在、企業活動を行うにあたってホームページの設置は必須といえます。   ホームページからの集客を重視している企業も多くなってきていますので、今後も必要とされ続ける職種です。スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。 後述するWebデザインとのスキルのかけ算で単価を上げることも可能です。   案件獲得の競争が激しいという一面はありますが、ポートフォリオ作る、低単価でも実績を積み重ねる、などの工夫をすれば月5万の収益を達成できるでしょう。   向いている人 必要な知識が日々アップデートされていくため、常に新しいことを学ぶことができる人 報酬体系 クラウドソーシングから受注する場合は、1ページあたり5000円〜が相場 Word Pressのテーマ制作やコーポレートサイト全体の設計などをする場合は10万円以上になる場合も多い 知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高い メリット アプリケーション制作やシステム構築を行う場合と比べてWeb制作に必要なプログラミング知識は少なくなっているため、学習を始めて収益化するまでのハードルはやや低い YouTubeの無料教材を利用したり、プログラミングスクールを利用したりすることで効率よく学べる環境がある デメリット クラウドソーシングなどのサイトでは案件数に対して応募者が多く、競争が激しくなる可能性が高い   関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.5 Webデザイン Web上に表示されるページの見た目に関する制作を行う仕事です。 Webサービスや広告用LP（ランディングページ）の作成など業務は幅広く、クライアントの依頼を受けて、使い勝手の良い魅力あるページ構成やデザインを考えることがメインの業務となります。 自社の魅力を世間によりよく発信するために、Webサイトにデザイン性を重視する企業が増えているため需要は高まってきているといえるでしょう。 スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。 ポートフォリオを作る、低単価でも実績を積み重ねるなどの工夫をすれば月5万の収益を達成できます。 先述したWebサイト制作とのスキルのかけ算で単価を上げることも可能です。   向いている人 新しい技術を吸収することに喜びを見出せる人 デザイン以外の幅広い業務をすることに抵抗がない人 報酬体系 クライアントにより異なり、1案件数千円〜数万円と幅広い 企業向けの場合単価が高く10万円以上の案件も多くなる 知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高い メリット Web制作に必要なスキル全般が身につく デザインに関して顧客との折衝・調整を行うことも多く、コミュニケーション能力が身につく プログラミングやUI・UXデザインに関するスキルも身につくため、副業から本業へのシフトチェンジも視野に入れつつ、仕事に取り組むことができる デメリット 仕事の依頼を受けることができるレベルに達するまで、一定の学習時間を必要とする 関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.6 イラスト制作 ロゴ、名刺、アイコン、キャラクターなどのデザインをする仕事です。 クライアントからコンセプトや完成イメージの指示を受け、デザインをしていきます。LINEスタンプやキャラクターデザイン、図解やTwitterのアイコンなど、様々な分野でイラストが必要とされており、今後もニーズは拡大していくでしょう。   初心者でスキルやセンスがない場合、案件が獲得できず1ヶ月の売り上げが数千円で終わってしまうことも多いでしょう。スキルがあっても案件が単発で終わってしまうことも多いため、常に営業・集客をしていかなければ継続して収益を上げることは難しいのではないでしょうか。   向いている人 自分のデザインスキルやセンスに自信がある人 趣味として絵を描いたりデザインすることが好きな人 報酬体系 1案件数百円〜数千円とクライアントにより稼げる金額は幅広い 企業向け案件の場合単価が高くなる スキルさえあればすぐに稼ぐことができるが、1から始める場合やセンスがあまりないと感じる場合、収益発生までは数ヶ月〜1年以上かかる メリット 案件が多数あるため、自分にあった案件を見つけやすい デメリット 案件が獲得できるかどうかが各個人のスキルやセンスに左右されやすい 良い品質で納品するために、専用のソフトウェアや機器を用意する等、初期投資にある程度の費用がかかる   1.7 ネットショップ ネット上に店舗を開き、商品を販売する仕事です。 ネットショッピングの市場規模は年々拡大しており、将来性は高いといえます。 参考：経済産業省　　電子商取引に関する市場調査の結果   継続して売り上げをあげるためには、商品ラインナップや価格など、他の店舗と比べた優位性をアピールすることが必要になってきますが、大手と比べた場合、仕入れの面で不利になることも多いため、差別化をし選んでもらうショップにするためにはかなりの努力が必要です。 全くの未経験から始めた場合、月5万というのはかなり高いハードルとなるでしょう。   向いている人 普段からネットショッピングをよく利用している人 好きな商品ジャンルがある人 SNSのフォロワーがすでに多い人 報酬体系 商品の売り上げから仕入れにかかった費用を差し引いた分が利益となる 安く仕入れることができる先を確保できていれば、利益を出しやすい 商品がすぐに売れるとは限らないため、最低3ヶ月は売り上げが入ってこない可能性がある メリット 実店舗と異なり、人件費を極力抑えて物品の販売をすることができる プログラミングの知識がなくても店舗ページを開くことができるプラットフォームも充実している ハンドメイド作品を販売し固定のファンを獲得することができれば継続した売り上げを見込める デメリット 数ある他のショップと差別化をすることが難しく、SNSなども使って集客を行わなければ売り上げが見込めない   1.8 カスタマーサポート 企業へのお客様からの問い合わせに対して、メールやチャット、電話で対応をする仕事です。 稼働時間の確保さえできれば、安定した金額を毎月稼ぐことができるといえるでしょう。   向いている人 丁寧な顧客対応が求められるため、飲食店などの接客業やコールセンターでの勤務経験がある人 報酬体系 時給制となることが多く、1時間あたり1,000円〜1,500円が相場 働いた分だけ稼げるので、比較的早く収入を得ることができる メリット マニュアルに沿って対応をする形になるため、特別なスキルがなくても始めることができる デメリット 契約上毎週一定時間働くことが求められる クレーム対応をする場合、ストレスが溜まりやすい   1.9 データ入力・文字起こし エクセルやワードにデータを入力したり、動画や音声の内容を聞き会話内容を文字にして書き起こす仕事です。 企業内で使用する顧客リスト作成やプレゼン資料の作成、YouTubeの字幕作成といった作業があります。   1件あたりの単価が低いため月5万を稼ごうとすると、相当な時間を費やす必要が出てきます。 初心者でも手が出しやすい分、スキルアップが案件の獲得や単価アップに繋がりにくいため、副業として取り組む場合一定金額で頭打ちとなる可能性が高いです。月5万稼ぐのはなかなか難しいといえるでしょう。   向いている人 淡々と作業をするのが好きな人 タイピングのスピードに自信のある人 事務職での勤務経験がある人 報酬体系 1件あたり数百円〜数千円 クラウドソーシングサイトでよく用いられる「タスク形式」の場合、1件入力するごとに数十円 入力件数や文字数が多くなればなるほど、稼げる金額は増える 作業をした分だけ収益に反映するため、比較的早く収入を得ることができる メリット 特別なスキルが不要で、仕事を始めるハードルが低い デメリット 1件あたりの単価が低く、時給換算した収入が少なくなりやすい   1.10 コンサルティング 自分が詳しい専門の分野で顧客の相談や指導をする仕事です。 主な業務としてはクライアントの悩みを解決することになります。 人の数だけ悩みがあると言われますので、需要は無くならない仕事だといえます。 コンサルタントとしての実力があればリピーターを獲得できるため、月5万円を稼ぐことは容易です。 しかし、スキルに自信がない場合や中途半端なスキルしか持っていない場合、顧客獲得に苦労する可能性が高いため、安定して稼ぐことは難しいでしょう。   向いている人 既に本業を通じて専門的な知見を持っている人 結果にコミットするプロ意識の高い人 報酬体系 相談時間やコンサルティング後の業績など結果に対して、自身で設定した報酬を受け取る メリット 初期費用が不要で、今までの経験や知識を生かすことができる 単価が高い可能性がある デメリット 本業を通じた人脈形成やSNS・ブログなどを用いた集客、ブランディングができなければ案件が獲得できない 1.11 Webマーケティング Webサービスを用いて企業の業務支援や売り上げアップのコンサルティングをする仕事です。SNSの運用代行や広告・メルマガ配信代行、SEO対策などがメインの業務となります。   実力次第で稼げる金額が変わるため、人によって月5万円を稼ぐ難易度は異なりますが、これからWebマーケティングの勉強を始める人にとってはかなりハードルが高いといえるでしょう。   向いている人 自身でブログを運営し集客に成功している人 本業でWeb広告営業に携わっている人 本業でWebマーケティングに携わっている人 報酬体系 クライアントとの契約条件により異なる 一般的には成果報酬・月額支払い・一括支払いのいずれかで契約する メリット Webサービスを使って稼ぐスキルを磨くことができる デメリット 基本的に結果にコミットできる実力が必要となるため、案件を獲得するまでのハードルが高い   1.12 動画編集 あらかじめ撮影された動画を見やすくするために、カット作業やテロップ挿入をする仕事です。企業のプロモーション動画やYouTube、ウェディングムービーなど様々な分野で動画編集のニーズは高まっています。   高いスキルは必要とされないため、月5万円程度であれば比較的短期間で稼げる可能性は高いです。ただし、その分ライバルも多く今後案件が獲得しづらくなる可能性は高いでしょう。   向いている人 細かい作業をするのが苦にならない人   報酬体系 1件あたり5,000円〜数万円で、企業向け案件の場合単価が高くなる クラウドソーシングサイトでの募集が多いため、即収入につながりやすい メリット 自分自身でYouTubeやプレゼン動画を作る際に身につけたスキルが応用できる 一定レベルのスキル取得までにプログラミングなどと比べて時間がかからない デメリット 動画制作をするためのパソコンやソフトウェアに初期投資が必要   1.13 広告動画制作 映像・写真・イラストといった素材を加工・効果付けをして動画を作る仕事です。動画クリエイターと言われることもあります。企業向けの動画広告作成については市場が拡大しており、将来性がある分野となっています。 参考：サイバーエージェント　2020年国内動画広告の市場調査   動画制作の経験があれば、広告運用等も合わせて依頼されることもあるため、1件あたりの単価も高くなりやすく、月5万円は達成可能といえます。ただし、スキルがない状態では案件獲得が難しく収益化しづらいでしょう。   向いている人 動画制作に携わったことがある人 動画編集で一定の売り上げを上げている人 報酬体系 1件あたり数万円〜数十万円 企業向けの案件については単価が高い傾向にある メリット 汎用性の高い、本格的な動画制作のスキルを身につけることができる デメリット 動画制作をするためのパソコンやソフトウェアに初期投資が必要 スキルを身につけるまでに時間がかかる   1.14 写真撮影 写真販売は、自分で撮影した写真を、ネットショップやストックフォトサービスで売って収入を得る仕事です。プロのカメラマンであれば別ですが、素人が副業として行う場合、売れ行きの良い写真を狙って撮るのはかなり難しく、安定的な収入を得ることは期待できないでしょう。   向いている人 カメラが趣味の人 日頃からよく写真を撮る人 報酬体系 1枚数百円〜数千円で販売するのが一般的 ストックフォトサービスを使うと、販売価格から40～60％ほどの手数料が差し引かれる メリット 趣味を仕事にできる 始めるためのコストがほとんどかからない デメリット 売れる写真を撮るためには専門的な学習とセンスが必要とされる   1.15 ナレーション 企業の広告やアプリゲームに使用されるナレーションを提供する仕事です。 1件あたりの単価が低いだけではなく、募集されている案件の数も多いとはいえないため、月5万円を稼ぐことはなかなか難しいでしょう。   向いている人 声に自信がある人 声優系の学校に通っていた、声優の仕事経験がある人 報酬体系 1件あたり数百円〜数千円 主にクラウドソーシングサイトやスキル販売サイトで募集している メリット 趣味を仕事にできる デメリット 1件あたりの単価が低い 編集や録音をするための機材などの初期投資が必要   1.16 オンラインの家庭教師 英語やダイエット、ビジネスなど自分の得意なことをオンラインで教える仕事です。 副業として行う場合使える時間が限られてきますので、時間単価を上げることが必須になります。 スキルがあれば時間あたりの単価を高く設定することも可能です。   しかし、人気や実力がなければ顧客数に影響してしまうため、単価を上げることが容易ではなく、月5万まで稼ぐのは難しいといえます。また、参入障壁が低いのでライバルも多いでしょう。   向いている人 人に教えることが好きな人 報酬体系 スキル販売サイトで、1時間当たりの料金を設定し募集することが多い 1時間500円〜数千円程度 メリット 販売できるプラットフォームが多い デメリット 時間を切り売りするのでスケジュール調整が難しい 参入障壁が低くライバルが多い   1.17 Twitterの懸賞 Twitter懸賞とは、Twitterのアカウントを利用して応募できる懸賞・キャンペーンのことです。 後日当選が発表される形式の懸賞の場合、フォロワー数やツイート・プロフィール内容に注意を払うことで当選確率を上げることができます。 しかし通常の懸賞と同様、運の要素が強いため月5万を安定的に稼ぐことは期待できないでしょう。   向いている人 毎日Twitterを使っている人 報酬体系 1回の抽選ごとに商品または現金が当たる メリット 主催者が発信したツイートをリツイートするだけなので、ごく短時間で参加できる デメリット 転用可能なスキルが全く身につかない 見返りの有無が確率に左右される   1.18 フリマアプリ フリマアプリで不用品を販売して収入を得る方法です。 メルカリをはじめとするフリマアプリは多数リリースされており、ユーザー数も多いため、売るものがあれば即収入につながります。特にブランド品などは高く売れやすいため月5万円を稼ぐことは可能です。   しかし、売るものがなくなった時点で出品ができませんので継続的に収入を得ることができないでしょう。   向いている人 自宅に物がたくさんある人 報酬体系 アプリを使用する場合、商品売上金額から、1商品販売するごとにかかる10％程度の手数料を差し引いた金額が収益となる 即金性が高い メリット 既に自宅にあるものを売るためコストがかからず収益を上げやすい デメリット 一時的にしか稼ぐことができない 転用可能なスキルが全く身につかない   1.19 せどり・転売 ネットショップやリサイクルショップから安く商品を仕入れて、仕入れ額よりも高く販売することで差額を利益として得る仕事です。せどりには様々な方法があり、楽天ポイントを利用したり海外から輸入したりする方法などがあります。   仕入れ商品のリサーチから梱包、販売まで全て一人で行うため仕組み化することができれば短時間で月5万円を稼ぐことはできます。ただし、価格差が取れる商品を見つけ出すまで時間がかかることも多く、競争相手も多いため、軌道に乗せるまでは時間がかかるでしょう。   向いている人 特定分野の商品に詳しい人 流行に敏感な人 報酬体系 仕入額と販売価格の差が利益となる 出品手数料や送料を考慮して価格設定をする必要がある メリット 仕組みがシンプルな商売なので、安く仕入れることができれば特別なスキルがなくても始めることができる デメリット プラットフォームごとの転売規制によって売れる商品が変わる可能性がある ブランド品の偽物販売に関わってしまうリスクがある   1.20 ポイントサイト サイト内の特定の広告をクリックして商品購入や会員登録をすることで、報酬を得ることができます。 副収入がある男性会社員の22.3%の収入源は、「ポイント・アンケートサイト」で58.1%と最多となっており人気の仕事です。 参考：新生銀行　2019年サラリーマンのお小遣い調査 月5万円を稼ぐことは十分可能ですが、一度きりの案件も多いため継続して稼ぐことはできないでしょう。   向いている人 コツコツと単純作業に取り組める人 様々な企業に個人情報を提供することに抵抗がない人 報酬体系 広告ごとに決められた達成条件を満たすと収益発生 ポイントが貯まったら電子マネーや現金に交換可能なため即金性が高い メリット クレジットカード作成や口座開設などの高額案件に取り組めば、短期間で一定の金額を稼ぐことができる 特別なスキルがなくても始めることができる デメリット 誰でもできる仕事のためスキルが全く身につかない   2 在宅でできる副業のメリット・デメリット 在宅でできる副業にはメリットだけではなくデメリットもあります。 事前に理解しておくことで、自分に合った副業を見つけることができるでしょう。 2.1 メリット 在宅でできる副業のメリットは3つあります。 それぞれ詳しく説明します。 2.1.1 メリット1　仕事内容や付き合う人を選べる 副業で稼ぐためには、自分自身の得意分野を生かして仕事をすることが重要です。 苦手なことには時間をかけず、得意なことに集中することで限られた短い時間の中で成果を上げられます。 会社で働く場合と異なり、取り組む仕事については自ら取捨選択する姿勢が大切です。 また付き合う人を選ぶことができますので、人間関係で余計なストレスを抱えることも少なくて済みます。 2.1.2 メリット2　本業以外のスキルが身につく 副業に取り組む過程で、本業以外の実用的なスキルを身につけることができます。 副業にもよりますが、成果報酬として1件あたりの対価が設定されていることがほとんどのため、必然的にスキルを身につけることになります。 対価をもらいながら学ぶことができますので、学習のアウトプットの場としても最適です。 会社に頼らず自力で稼ぐ力を身につけたい、独立しても通用するスキルが欲しい、という人にとって副業は有効な手段となるでしょう。 2.1.3 メリット3　時間と場所に縛られず仕事ができる スマホやPCが1台あれば、基本的に時間や場所に関係なく作業ができます。 通勤時間がないのは、精神的にも体力的にも楽だと感じる人は多いのではないでしょうか。 また、通勤時間がなくなることで空いた時間やスキマ時間で作業を進めることもできるためより効率的に稼ぐことが可能です。 2.2 デメリット 在宅でできる副業のデメリットは3つあります。 2.2.1 デメリット1　自己管理力が必要 体調や納期管理、営業や案件の管理など基本的には全ての作業を一人で行う必要があります。 無理をして体調を崩してしまったり、急なトラブルが発生して納期に間に合わないという事態が発生した場合、各方面に迷惑をかけることになります。 基本的に余裕を持ってスケジュールを組み、仕事に取り組むことが重要です。 2.2.2 デメリット2　孤独感を感じることが多い 仕事の性質上、一人で作業する時間が多いため、孤独感を感じることが多くなるでしょう。 一人で作業をするのが苦手で、和気あいあいと仕事をしたい人にとっては厳しいかもしれません。 2.2.3 デメリット3　トラブルに巻き込まれる可能性がある 仕事の選び方次第では、トラブルに巻き込まれてしまう可能性があります。 副業はあくまで自己責任で行うため、万が一トラブルが発生した場合も自分自身で全て対処する必要があります。   特に、「簡単・高収入」を謳った副業詐欺には注意しましょう。 稼ぐどころか、高額な教材を買わされてしまったり、気付かない間に犯罪に加担してしまう可能性もあります。 仕事を受ける場合には依頼先の情報や業務内容を慎重に確認し、問題ないか見極める力が必要です。   [PR] プログラミングで挫折しない学習方法を動画で公開中3 在宅でできる副業の選び方 数ある副業の中でどの副業を選ぶのが良いのか、選び方についてまとめました。 3.1 目的に合わせて選ぶ なぜ副業をするのか、副業に対して何を求めているのかを明確にして取り組むことで効率よく稼ぐことができます。 以下のように目的に合わせて選ぶことが有効です。 「短期間で一定金額を稼ぎたい」：即金性の高いもの 「無理なく空いた時間を有効活用したい」：作業負担が少なく手軽にできるもの 「本業で足りない生活費の確保」：1ヶ月に稼げる金額が明確なもの 「将来の独立・起業のためスキルアップしたい 」：汎用性の高いスキルが身につくもの 3.2 最初はリスクの小さい副業を選ぶ 副業を始める際、元手がかからないものを選ぶことは重要です。 特に本業と異なる分野の仕事に取り組む場合、自分にあった仕事かどうかはスタートしてみるまでわからないことが多いです。   もし自分に合わないと判断した時に、コストをかけず始めていればすぐにやめて違う仕事をするという選択ができます。初期投資の額が大きいと、投資額を回収できなくなる可能性も高いです。   稼ぐために始めた副業で収益を上げられなかったり、負債を抱えてしまったりすると、精神的な負担が大きくなり本業にも悪影響が出てしまいます。プログラマーやWeb制作、WebデザイナーといったIT系の副業であれば、いずれも初期費用を抑えて低コストで始めることができます。 3.3 自分スキルになるものはおすすめ どの副業が良いか迷った時には、自分自身にスキルが身につく副業を選ぶのがおすすめです。 時給で働く場合やスキルが身につかない副業を続けると、時間の切り売りをするばかりで、一時的には稼げるかもしれませんが、将来的な収入アップは望めません。 副業でスキルアップができると、より高単価の案件を受注することで収入を上げていくことができます。 また、副業に取り組む中で自分の可能性に気づき、本業での成果につながったり、転職をするきっかけとなったりすることもあります。 スキルを身につけることができる副業としては、プログラマーやWeb制作、WebデザイナーといったIT系の副業がおすすめです。 今後も需要が高い分野ですので、一度スキルを身につければ再現性高く稼ぐことができるでしょう。   4 在宅で副業する際の注意点 副業をする上では、法律や税金の知識が欠かせません。 「知らなかった」では済まされないケースがほとんどですので、事前に学んでおきましょう。 また、無用なトラブルを避ける方法についても解説します。 4.1 法律 法律は特に重要です。違反すると罰金が発生したり、犯罪者となってしまう可能性もあるので、最低限は理解しておきましょう。ここでは、副業を検討する方が知っておくべき法律を4つ厳選して紹介します。 4.1.1 特定商取引法 特定商取引法とは、事業者による悪質・違法な勧誘行為などを防止し、消費者を守るために作られた法律です。 特定商取引法は以下を対象としているため、インターネットでの物品販売なども対象となっています。 訪問販売 通信販売 電話勧誘販売 連鎖販売取引 特定継続的役務提供 業務提供誘引販売取引 訪問購入 違反した場合、罰則や行政処分の対象となります。 特に副業を行う場合は以下の点について、違反行為がないよう十分注意しましょう。 事業者の名称、住所、電話番号、販売価格、送料、代金支払い方法、支払い時期などについて明記する 返品の可否・返品の条件・返品にかかる送料の負担について明記する（返品特約瑕疵担保責任) 参考：特定商取引法ガイド   4.1.2
副業・フリーランス

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

TechAcademyでは、2015年6月14日に『非エンジニアサミット「プログラミングをシゴトにする」』というイベントを開催しました。これからプログラミングの学習を始める方を対象に、第一線で活躍するエンジニアから直接話を聞けるイベントです。 第1回目となる今回は、株式会社クラウドワークスCTOの大場光一郎氏、株式会社Fablicの堀井雄太氏をゲストとしてお迎えしました。   本記事ではイベントレポートをお届けします。 これからプログラミングの学習を始める方は参考にしてみてください。   ゲスト 大場光一郎氏（株式会社クラウドワークス 執行役員CTO） 2001年、伊藤忠テクノソリューションズ株式会社へ入社。在職中、Rubyの導入支援やRubyを用いたクラウドサービスの開発・運用に従事。 グリー株式会社インフラストラクチャ部門にて、開発環境からプロダクションをつなぐDevOps周りを担当し、GitHub Enterpriseの導入による開発品質の向上や、デプロイメント支援システムをRubyで開発。 Rubyやソースコード管理に関する講演、著書多数。 2014年1月、株式会社クラウドワークスに参画、執行役員CTOに就任。   堀井雄太氏（株式会社Fablic チーフエンジニア）   「Fril(フリル)」を開発しているエンジニア。2007年、株式会社ECナビ （現：VOYAGE GROUP）に新卒入社。比較サイトの運営やディレクトリ検索サービス、広告配信システムの開発などを経験。2012年、株式会社Fablicを創業し女性 向けのフリマアプリ「Fril」を開発、インフラ、サーバーサイドの開発担当。       クラウドワークス大場氏講演 まずは、大場光一郎氏から講演いただきました。講演では、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することをお話しいただきました。   エンジニアになったきっかけ 学研の教材に載っていたマンガがきっかけでBASICを使ってプログラムを書いてゲームを作りながら自分でやってみようと思ったのが、一番最初にプログラムを書くことのスタートだったとのこと。 その後は、ハードウェアを組み合わせた業務システムを開発している会社に入社。当時は「プログラムさえ書ければいい」と思って社会人をスタートしたそうです。その時のことを大場氏は「今から考えると当たり前ですが振り返るとコードを書けるだけで会社を選ぶのは良くない」とも語りました。 またその頃、働いていた会社とは別に、オープンソースを開発するプロジェクトに入り、そのプロジェクトの開発者との交流を通じて、組織の垣根を越えてプロジェクトを進めることを経験したそうです。そのため、大場氏の考え方の根本は「オープン」。実際仕事の中でもオープンソースのように仕事をしているのが特徴なんだそうです。   クラウドワークスでの開発体制 クラウドソーシングサービスのクラウドワークスの開発体制はどうなっているのでしょうか。 特徴は、UX改善会を開催してユーザー体験を大切にした開発を重視していること。「UX改善会」は、3、4人のチームを組んで、ユーザー視点でサービスを使い、サービスにおける課題を見つけ、改善案などをプレゼンテーションに落とし込んで全社員に発表するというもの。社員はもちろん、エンジニアインターンの学生から率直な意見を聞いて改善に役立てているといいます。 この取り組みにより、サービスを使い続けていると当たり前になって気づかないことを、改めてフレッシュな気持ちでサービスを見つめられ、実際にサービス落としこんで、日々改善ができているんだそうです。 開発分野の他に、クラウドワークスでは日報の書き方にも工夫があり、お互いがどんな仕事をしているか共有し合えるように、他の部署の人でもわかる言葉で伝えることを推奨しているそうです。   これからエンジニアを目指す人に期待すること 大場氏は「今は技術が折り重なってできているので、深堀りすればするほど深いし、技術の移り変わりも早いので、エンジニアとしては多層的に折り重なる技術を同時に理解できないといけない状況です。」とエンジニアとして必要なことを語りました。 そのような状況の中で、初心者としてプログラミングをはじめるのは、チュートリアルなどが充実しているため、比較的簡単で、初心者から中級者に上がるにはいろいろな技術をキャッチアップする必要がでてくるため、1人では限界があるとのこと。そのため大場氏は、勉強会を通して仲間を見つけることや、プログラミング学習のサービスの活用などを推奨しているそうです。 また、JavaもRubyも最初は「おもちゃ」と言われていた背景があり、「おもちゃ」と言われているような技術を使ってみることの大切なんだそうです。「イノベーションを起こすようなものは最初おもちゃのように思われがちですが、だからこそチャレンジすることが今後のエンジニアに必要なのではないか」と大場氏は締めくくりました。     [PR] プログラミングで挫折しない学習方法を動画で公開中Fablic堀井雄太氏講演 続いて、堀井雄太氏に講演いただきました。大場氏と同じく、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することお話しいただきました。   エンジニアになったきっかけ もともとは経済学部出身で、大学でもプログラミングの授業で受けていたわけではない、いわゆる文系プログラマーだという堀井氏。それでも大学生のころから漠然とWebサービスを作ってみたいと思っていたそうです。 そこで大学生のうちにいろいろな会社でインターンをとして働いていたのがプログラミングを学ぶきっかけ。最初はHTML/CSSを使ってWebサイトを作るところからはじめ、本を読み込んでサービスを作ってみるなど独学で学んだとのことです。 その後、ECナビ（現在のVOYAGE GROUP）に新卒で入社し、自社プロダクトの開発と運用をして、後半の2年はインフラの部署に所属されていました。会社に所属することのメリットとしては、独学よりも体系的に学べる、先輩や同僚がいることで成長できるなどを挙げていました。 堀井氏が講演の中で話した、「エンジニアとしては遅咲きだが、遅いということはない。意志があれば、とりあえずやってみるのが大事」という言葉が印象的でした。   Frilの開発体制 株式会社Fablicは、2012年7月にフリマアプリのFril（フリル）をリリース。累計ダウンロード数が300万を越えているといいます。現在は、12、13人のメンバーで開発しているそうです。エンジニアはまだまだ増やしたいとのことで、募集も随時行っているとのこと。 開発体制として特徴的なことは、ユーザーと一緒に開発すること。実際にFrilを使っているユーザーをカスタマサポートとして採用しているそうです。開発の現場にユーザーがいて、「困ったことがあったらユーザーに聞く」が信条で、実際の開発フローにユーザーが関わるようにしているといいます。   これからエンジニアを目指す人に期待すること どんなエンジニアになるかを意識することが大事とのことです。 会社のフェーズによってエンジニアに求められることは違うので、技術の経験たくさんを積むことが大事。堀井氏自体も、サーバーサイドもインフラも関わってきましたが、今では全てが関係しているそうです。それぞれの領域を学んでいく中で、強みを形成していくのが良いとのことでした。 また、技術を学ぶだけでなく、行動して実践することも大事。チームで開発できる、社内で共有できる、社外にアウトプットできる、リーダーシップを発揮できるなど、技術をもとに行動することが今後のエンジニアに求められていると語っていました。 また、最後には「ものづくりは楽しいので、楽しみながら開発していくのが大事」というメッセージで堀井氏は締めくくりました。     パネルディスカッション「これからのエンジニアに必要なスキルとは」 続いて、大場氏、堀井氏によるパネルディスカッションです。モデレーターはTechAcademyを運営するキラメックス株式会社の代表取締役社長の村田がつとめました。   パネルディスカッションでは、事前に参加者から募集した質問をもとに回答いただきました。質問はこれからエンジニアになっていくことを想定して、下記のセクションに分けて進めています。 エンジニアになる前の段階 エンジニアとして働く段階 エンジニアとしてさらにスキルアップする段階     エンジニアになる前の段階 （村田）それではパネルディスカッションを始めていきます。非エンジニアの方のプログラミング学習が一歩前に進むきっかけになればいいなあと思っています。最後には会場のみなさんからの質問も受け付けます。   （村田）まず1つ目の質問ですが、「どのプログラム言語から勉強するべきか」という疑問にお答えいただこうと思います。これみなさん非常に悩ましい点だと思うのですが、このあたりお二人はどのようにお考えでいらっしゃいますか？   （堀井）最初はPHP、Perl、Rubyあたりから始めるといいのかなあと思っています。理由は、コミュニティが活発なので困ったらそういうコミュニティに相談して聞く環境があることですね。あとは、実際に企業に入ってみて使われていることも多いです。実際、私が新卒で入った会社も主要な言語がPHPであとPerlとRubyも少しあったので就職するときも有利だと感じています。   （村田）なるほど。大場さんはいかがでしょうか？エンジニア歴も長いと思いますが。   （大場）最初に触る言語としては僕はなんでもいいかなと思ってるんですけど、子供向けや教育向けと呼ばれる機能が制限された言語よりは汎用的な言語を使った方がいいかなと思っています。それがコンピュータが本来持っている能力を引き出せる可能性があるという理由です。なので、あんまり学びやすさとか初心者向けといった軸で選ぶよりは、なんでもできるような言語を選ぶのがいいのではないでしょうか。   （村田）では続いてプログラミングを勉強する段階になった際に「どこから着手すればいいか」という質問に入っていきたいと思います。具体的にあれば教えていただけますか？   （大場）さっき話したことと関係しているのですが、一つのサービスを成り立たさせるためにはいろんな技術の積み重ねがあって、一部分だけわかっててもサービスとしては成り立たないことがあります。だから、どこからというよりは「これが作りたい」とか「こんなサービスをやってみたい」といったところを目指して、それに足りないのはどこなのか、簡単そうなのはどこなのか、一番難しそうなのはどこなのか、そういう切り分けでちょっとずつ自分がどこにいるかわかるように進めるのがいいんじゃないかなと思います。 この言語を覚えたいといった学習の仕方だとモチベーションが続かないと思うんですよね。   （村田）それはありますよね。   （大場）コンピュータという分野も3ヶ月勉強した人や10年仕事で使ってますという人とか経験にいろいろあっても、その中で「マスターしました」って自分で言える人はあんまりいないと思うんですよね。すごい奥が深い世界なんで。だからこの言語をマスターするまでやろうとなると結構どこまでいっていいかわからない。なので、道具として何をやりたいかというところを目標にすると続きやすいんじゃないかなと思います。   （村田）目的ありきでその言語をツールとして使って、形にしていくところから足りない部分を補うのがいいんじゃないかということですよね。堀井さんはいかがでしょうか？   （堀井）大場さんも仰ったように一つを学べば終わりというものではないですね。プログラミングをするモチベーションを保たないと結局意味ないので、自分がこういうのがあったら便利だなというものをとりあえず手を動かしながら作るのがいいと思います。   （大場）さっきTechAcademyのオンラインブートキャンプの説明の中で、Twitterクローンを作るというお話しでしたが、あれってどこまでのクローンなんですかね？投稿するだけだと簡単だけどTwitterを真面目に作ると結構難しいと思うのですが。   （村田）Ruby on Railsチュートリアルに載ってるくらいのマイクロポストみたいなレベル感ですね。ユーザー登録ができてフォローして、その投稿がそれぞれタイムラインに一列に出てくるクローンです。   （大場）フォローもするということは、ある程度データベースの関係性もグラフみたいなところもやるんですね。そういう意味では歯ごたえのある感じですね。   （村田）そうですね。実際に世界中で使われているようなサービスに近い形で作る方がモチベーションが上がると思っています。全く使わなそうな図書館データベースを作るよりもTwitterクローン作る方がイメージがわきやすいし面白いなと感じてもらえるはずです。プログラミングを学習するときのモチベーション、特に一人で勉強する時間が長いので、自分がやる気になるようなところから始めるのがいいのかもしれませんね。   （村田）では次にいきましょう。「プログラミング習得をする上でつまずきやすいポイントとその解決方法」について聞いてみたいと思います。堀井さんいかがですか？   （堀井）つまずくところいっぱいありますね。特に、環境構築が一つのハードルになるかなと思ってます。弊社でもインターンに来てもらうことが多いのですが、プログラミングを書き始めるまでの開発体制を整えるところで時間がかかることがあります。 ただ、今はEC2とかHerokuとか、必要なパッケージがそろっている状態で始められるものもありますね。無料プランを使うか、少しお金を出せばサーバーが簡単に手に入るので、うまく使って最初のハードルを乗り越えてから本を一冊写経してみるといったことから始めるのがいいのかなと思ったりしますね。   （大場）個人的には難しいところって技術と技術の境目の部分かなと。 例えば、Rubyだとアプリケーション開発の知識がいるし、データベースにアクセスするときにSQLみたいな言語をわかってないといけないし、両方わかってないといけないようなシチュエーションがサービス開発の中でたくさんあります。両方の知識が求められるところでハードルがぐっと上がって、新しいことを覚えるのが難しいのかなと思いますね。 その解決方法としては繰り返すということですかね。繰り返していると、「これはこのことだったんだ」みたいに理解できることもあるので、反復するところがコツかなと思っています。   もう一つつまずきやすいところとしては、技術の中でそもそも難しいところです。C言語だったらポインタ、Rubyだったらブロックとかですね。そもそも考え方が難しいものがいくつかあって、それを変な例えで理解しようとしても、結局どこかで嘘が入っていたりして本質的には理解できないところがあります。それは難しいものだと受け入れて、わかるまで何回も繰り返すところが必要なんじゃないかなと思っています。   （村田さん）そうですね。僕も最初はPHPから始めたんですけど、クラスみたいな概念がそもそも理解できなかったです。その時は、10日くらいわからないまま続けたら理解できました。繰り返しながらやっていくと、ピーンとわかるときがくるので諦めずに繰り返すのが重要ですね。   （大場）悟るまでですね（笑）   （村田）悟りが降りてきますからね。さて次の質問ですが、「おすすめのプログラミング学習方法はありますか」ということです。いま繰り返しやるとありましたけれど、もうちょっと具体的に聞きたいと思います。大場さんは仕事を始めてから学んだという感じですか？   （大場）まあプログラムを書くのがもともと好きでゲームをつくるなかで学びました。Windows3.1が出たときに「マインスイーパ」というゲームが入っていたのですが、当時Windowsが動くパソコンがすごい高かったんですよね。なので、みんなができるように、MS-DOSのキャラクターベースでできるマインスイーパを開発してみんなに配ったとか、そのなかでいろんな技法みたいなものを学んでいったというところです。 今はほんと一つのアプリケーションを成立させるのにいろんな技術が必要なので、競争仲間であるとか教えてくれる先輩とかそういう人がいる環境に身を置くところが大事かなという気がします。   （堀井）小さいところから考えて手を動かすのがいいかなと思っています。会社に入ってみて思ったのが、システムって完璧じゃなくてすでに困っている人がいるんですね。そこで私もわからないなりに、管理画面にあったらいい機能とかを他の部署の人から聞いたりして、改善や機能追加できるところを調べながら徐々に開発技術を学んでいくところがありました。 あとは、勉強会もおすすめです。新卒で入った会社では勉強会を定期的に開催していたので、自分の回が来たら学んできたことを発表しなきゃいけない場がありました。そういう半ば強制的にでも自分のスキルを底上げするようなイベントに身を置いてステップアップしていくのはいいかなと思います。   （村田）なるほど。僕も自分で学習してきていたときは、何かインターネット上で気になるサービスをまねてそれと同じ動きを作ってみることをしていました。あとは、わからないところでずっと迷ってるとやる気がなくなっていくので、すぐ人に聞くというのは結構重要ですね。僕は新卒で楽天に入ったので、エンジニアの部署にいる同期を休日にカフェとかに呼び出して、わからないことを聞くというのを結構な頻度でやってました。   （大場）あとはオープンソースの開発に関わっていくこともいいですね。そんなに難しくなくても手が足りないというプロジェクトはたくさんあって、それこそプログラムだけじゃなくてドキュメントの追加みたいな簡単なところから手伝うこともできます。それでコミュニティの人たちの顔がわかってきて、だんだん開発に協力していく中でいいプログラムをたくさん読んで、自分がやるならどうしようみたいなことを考えたりすることがスキルアップにつながると思います。     エンジニアとして働く段階 （村田）では次の項目に入っていきますね。「採用したいと思うエンジニアの特徴」について聞いてみたいと思います。具体的にこんな人がいいなというものがあれば教えていただけますか？   （堀井）大前提としてプログラミングが好きなことが当てはまるのかなと思っています。やっぱ好きな人って勝手に自分でどんどん技術習得して、自分自身でスキルアップしていくので根本的にプログラミングが好き、ものづくりが好きという素養はまず見てますね。 あとは、Githubとかを使って自分が書いたコードを他の人に見てもらう、シェアするみたいな文化があると思うんですけど、自分の恥をさらすことができる、自分の持っていることをシェアするとかオープンさみたいなものを持っている人は素晴らしいかなと思いますね。   （大場）堀井さんのお話の中でもサービス志向のエンジニアみたいな話題がありましたけども、スキルはすごい優秀だけどうちの事業にそんなに興味ないみたいな人は今のステージでは採用が難しいです。なにかしら共感をもってるところのプラスアルファでエンジニアリングを見て採用してます。   （村田）会社の規模とかフェーズによっても変わってくるかなと思うんですけれども、やっぱりそのそもそものエンジニアとしてのプログラミングが好きであったりとか、サービスが好きみたいなところは基本的には重要ですよっていうことですね。   （村田）では次です。「優秀なエンジニアはどうやって見極めているんですか？」という質問です。大場さんいかがでしょうか？   （大場）正直言って僕もこれだというものはないですけど、一番確実なのは一緒に働いたことがある人ですよね。やっぱりいろんな会社にいると、こいつは本当にすごいみたいな人が何人かいたりします。   （堀井）優秀の定義にもよるかなと思うんですが、見極めるとしたら今はGitHubとかあるので、どういうコードをその人が書いているのか、アプリなど個人でプロダクトを出しているのかとか見たりしますね。   （村田）結局その人がどういう人かとか、どれくらいできるのかっていうのが見えるかどうかっていうのは結構重要なのかもしれませんね。ポートフォリオなりGitHubなり、今だとそういうのが結構アピールしやすい時代かなと思います。   （村田）次に行きますね。「プログラミングスキル以外でエンジニアに求めることはありますでしょうか」という質問です。堀井さんどうでしょうか？   （堀井）これはもうたくさんあります。まず弊社もベンチャーなのでプログラミングだけできる人は結構厳しいのかなと。具体的に言うと、やっぱコミュニケーション能力が高い人がいたら嬉しいです。実際、弊社はユーザーにヒアリングすることがあるので、ちゃんとそのユーザーさんとコミュニケーションが取れるかとか、仕様が上から降ってくるのを待つのではなくて自分で考えたものをデザイナーやディレクターに発表して巻き込んでいく力みたいなのが問われるシーンが多いです。   （大場）エンジニアに求めるコミュニケーション能力でいうと、そもそも人と話すのが苦手だからコンピュータを扱う仕事を選んだみたいなところもあると思うんですよね。 立ち上げ初期のベンチャーだと、とにかく作るというところがメインになっていて、そんなにコミュニケーションする必要がなかったりします。でも組織がちょっと大きくなってサービスが伸びてくると、ある時点からチーム開発みたいなものが求められて個人技だけでは限界がきたりします。そういう時にちゃんと自分に求められている役割の変化を感じて、それについてこれるかは考えてほしいなと思ったりします。 具体的にはさっきの仕様の話だと、ゆるふわで落ちてきた仕様に対してこんな仕様でできるかと思うか、僕が決めてもいいんだというように受け止めるかで大きな違いがあると思うんですよ。それってエンジニアリングのバックグラウンドがあって、そういう幅のある仕様のなかで可能性として見られるかどうかっていうのは大きな違いじゃないかなと。   （村田）自分から能動的に動いて、与えられたものだけじゃなくてしっかりそれ以外も自分で発信できるっていうことを理解した上でスキルを上げていけるような方が優秀になってくるし、それが求められるかもしれないですね。   （村田）次の質問ですが、「エンジニアとして働き始めてからどんな勉強が必要ですか」とのことです。基本的にはエンジニアは日々勉強みたいなところがあると思うんですけど、そういったこと以外に何か具体的にあれば教えていただけますか？   （大場）最近だとエンジニアの向かう方向性としてフルスタックみたいに、いろんな層の技術をまたがって自分一人でもサービス立ち上げができるみたいなところを目指したりもしますけど、実際本当に伸びてくサービス開発のなかでフルスタックになっていくのはめちゃくちゃ難しいと思っています。他に得意な人がいればなかなか手を出すのも難しい、どこをやってもいいよと言われても躊躇してしまうというところがあったりします。 その中でできることは、一つひとつ極めていくところだと思っています。ただ、一個の技術だけで戦ってるとやっぱりリスクも高いので、次はこの専門家になろうみたいな二つ掛け合わせるものが何かあるといいんじゃないかと思います。   （堀井）私はどういう勉強をしてたかなと思い返してみると、やっぱり学んでいくには段階的になると思うんですよね。 一つの言語を学んで、データベースのことも学んで、今度はその言語の上に動いているフレームワークのことを学んだりと段階的に自分が学んだことに派生して勉強してきました。なので、最終的に自分が得意であると言えるくらいのところまで行けるように深掘りして、一つの技術を学んでいくのがいいのかなと思いますね。 エンジニアにもスペシャリストを目指すのか、ジェネラリストを目指すのかいろいろ方向性があると思うんですけど、ひとつ自分はこういうエンジニアだとか自分の代表するプロダクトはこれだとか、そういうものを作れるようになるまでは深掘りすることがいいかなと思いますね。   （村田）やっぱりエンジニアとしてどこか一つでもいいので、ある程度極めるというか、できたというところまでやって、そこからスキルの掛け算みたいなところが重要になってくるということですよね。     エンジニアとしてさらにスキルアップする段階 （村田）最後の項目に入っていきたいと思います。「エンジニアとしてどんなキャリアパスが描けると思いますか」という質問ですが、エンジニアとしてキャリアの長い大場さんお願いできますか。   （大場）いまエンジニアの責任者として会社の中での役割を担っていますが、究極的には「事業のためにエンジニアリングをどうするのか」みたいな話になっていくかなと思っています。なので、技術だけではなくて、最近だとよく読んでいるのはマネジメントの本とかビジネス書みたいなところからキャッチアップするような勉強をしたりしてます。   （村田）技術だけではなくて、その先の事業をテクノロジーで解決していくみたいなところに進めるようなパスがいいんじゃないかという話ですよね。   （村田）では次に、「エンジニアが仕事したいと思う環境はどんなところですか」という質問です。堀井さんいかがでしょうか？   （堀井）やっぱりエンジニア目線でいうと自由度が高いであるとか、個人の裁量が大きい方がチャレンジングなことがしやすいですよね。なのでそういう環境をいまの会社で作っていきたいと思ってます。 弊社ののコアバリューがいくつかあるんですが、「エンジニアもチャレンジする」というのもあります。ある程度エンジニアの裁量でどういう設計をするかなど決められるような体制になっているので、自分がいいと思ったものをすぐ試せる環境があるのはエンジニアにとっていいのかなと思いますね。   （村田）なるほど。では最後の質問として「エンジニアとして成長するためにどんな人がいる会社で働くべきだと思いますか」という質問です。いかがでしょうか？   （大場）前職のように本当にエンジニアリングに関して職人みたいな人がいっぱいいるところにいて感じるのは、自分より優秀な人がいるところに身を置くことですね。自分が一番下手になって、あとは登っていくしかないみたいなイメージです。例えば、学生時代にインターンで初めてプログラミングをして、ベンチャー企業を手伝いながら一番下っ端でがんばってたらいつの間にか自分が一番詳しくなっていた。その後、さらに強い奴に会いにいきたいと言って弊社にジョインしてくれたエンジニアがいます。 僕自身もいかに自分より優秀な人に来てもらうか、自分自身がキャップにならないようにすごく気をつけていて、優秀な人が活躍できるような環境や会社やサービスが大事だなと思っています。   （堀井）これは私もほとんど同意見なんですけれども、自分よりも技術において素晴らしいと思った人がいるところですね。あとは、自分のスキルセットに近しいのを持っている人がいるような環境にいくと、自分のやろうと思っていることが一段引き上げられるのでいいのかなと思っています。 あと最近は勉強会とか発表された資料とかがWebサイトにいっぱい上がっているので、そういうのを参考にしながら企業を選んだりするのはいいかなと思ってます。     会場からの質問 （村田）ここからは会場からの質問を受け付けたいと思います。   ーー大場さんにお伺いしたいのですが、ご自身が英語情報で技術をキャッチアップするために気をつけられていることや、社内の方に英語の情報をキャッチアップするためにどんなことをしているのか教えていただけますでしょうか。   （大場）今やってることでいうと、オープンソースコミュニティがだいたい英語ベースになっています。日本人しかエンジニアがいないプロダクトでもコミットとかは英語じゃないと受け付けない感じだったりします。 社内に関しては、こうしないとみたいなものは今はないのですが、今週の気になる技術みたいなのを社内のGitHubにスレを立てて共有して、みんなが気になった技術は突っ込むようにしています。そういうときに情報ソースが英語のものがたくさんあるので、おのずと危機感が醸成されればと思っています。   （村田）他のご質問はいかがでしょうか？   ーーエンジニアが少なくて採用が大変だみたいなことを何かで読んだのですが、雇われる側としてどう感じておられるかということと、あと村田さんは育てる側としてどう思われるか教えていただけますでしょうか？   （村田）まず育てる側の僕の方から話をさせていただきますね。 まずエンジニアが足りてないところは事実です。エンジニアの採用が難しいっていうのは、そもそもマーケットに人材が少ないから取り合いになってるっていうのが一つあります。あとは統計的にもアメリカでは2020年には100万人エンジニアが足りなくなると言われています。日本でも2020年には20〜30万人ぐらいは足りなくなると言われています。インターネットを使ったビジネスはすごい盛り上がって市場も拡大しているのに、そこで働く人が増えていなければ足りなくなりますよね。 僕らはそれをエンジニアを増やすことで解決したいと思っています。エンジニアになりたいという方は多いと思っていて、それでも増えないのは仕組みの問題もあると思っています。それが解決できる仕組みがあれば、人が足りないということに対してひとつの力になれるんじゃないかなと。 エンジニアが足りないということに対して、大場さんはいかがでしょうか？   （大場）エンジニアが足りないと言ってる会社も、2種類あるかなと思っています。 1つはよくよく聞いてみると、あまりエンジニアを大切にするような文化がなくてエンジニアが定着しない会社です。そういう会社の方は、「来てくれても半年くらいで辞めるから、辞めると思ってアウトソースすればいい」といったことを仰る場合もあります。こういったことが負の循環になって常にエンジニアが足りないことが常態化してしまう。 僕らみたいなエンジニアリングの重要性を理解していて、Webサービス中心の会社だとまったく事情は違っていて、サービスの成長にともなって、さらに成長させるためにエンジニアは、明確に足りていなくてまだまだ必要だと思っています。TechAcademyさんみたいな取り組みでエンジニアが増えていくのはこれからの日本にはものすごい必要だなと思っています。   （堀井）ベンチャーで最近伸びているサービスであれば、やっぱりどうしても人が必要になってきて、実際に弊社でもエンジニアは常にどの職種も募集しています。私もベンチャーの友達とか知り合いも多くて起業する人もいるのですが、その立ち上げにはやっぱりそれなりにWebのことがわかる人がどうしても欲しくなるんですけど、そういうスキルの高い人たちは大手であるとか名の知れた会社とかに勤めています。そもそもその会社からあまり転職市場に出てこないというのは肌感としてはあるので、僕らみたいなベンチャーはいかにいい人たちを見つけて会社のことを知ってもらって、採用につなげるかについていつも苦労しています。なので、需要はかなりあると認識しています。   （村田）最後付け加えますね。プログラミングを習い事の視点でみると、換金性の高い習い事だと思うんですね。というのも、例えば10万円払って勉強してプログラミングが習得できれば10万円以上稼げると思うんですね。もちろんクラウドワークスさんのようなクラウドソーシングサービスで仕事を探してそれに応募して自分で遠隔の仕事をするのも一つだと思いますし、自分でメディアを立ち上げるのというのも一つでしょうし。そういった意味でも企業に入るだけじゃなくて働く方法はいくつかあると思います。   （村田）お時間になりましたので、最後にこの会の締めくくりということで「これからプログラミングを学習するみなさんへのメッセージ」をお二方からお願いします。まずは堀井さんお願いします。   （堀井）私も最初はプログラミング初心者だったんですけど、いろいろ学びながら実際にものづくりができるようになりました。最初はハードルの高い部分もあるのかなと思いますが、楽しみながら学んでいくと自分の可能性も広がって、キャリアを積む上でもいい経験だと思います。ぜひみなさんがんばって欲しいです。プログラミングは楽しいです。   （大場）僕からは作るだけじゃなくて問題解決していこうみたいな話もしましたけれども、一方で何かを作り出す・生み出すということは本質的に楽しいことだなと思っています。例えば、快適に作るための環境を整えることに丸一日費やすとか、自分のエディタの設定とか、これだから開発しやすいみたいなことを考えながらものづくりを純粋に楽しむところも実際にあるんですね。 そういった気持ちってなかなか社会人になってしまうと忘れてしまったり、思い出せなかったりとかあると思います。今だと、エンジニアになろうみたいなフェーズだといくらでも失敗できるので、何度も作ったり壊したりしながら、ぜひものづくりの楽しみというところを大切にエンジニアを目指していただければなと思いました。   （村田）堀井さん、大場さん今日はどうもありがとうございました。     イベントレポートは以上です。 TechAcademyではこれからもプログラミング学習者のためのイベントを開催していきます。
イベントレポート

Pythonのseleniumにおけるブラウザ（chrome）自動操作について現役エンジニアが解説【初心者向け】

Pythonのseleniumにおけるブラウザ（chrome）自動操作について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 seleniumにおけるブラウザ（chrome）自動操作について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 seleniumとは seleniumの使い方 seleniumを利用してchromeの自動操作をプログラムしてみよう まとめ   seleniumとは Selenium（セレニウム）とは、WEBブラウザの操作を自動化するフレームワークです。当初は、WEBアプリケーションでのUIテストを自動化する目的で作られました。現在は、当初の目的のWEBアプリケーションのテストのみならずスクレイピングというWEB上から情報を取得するなどの様々な用途で使用されています。 用意するのは、「ブラウザ」と「Selenium」と「WebDriver」の3つを用意します。「ブラウザ」は、今回は「Chrome」を使用します。「WebDriver」とは、SeleniumがChromeを操作するために必要なソフトです。 今回は、Chromeを対象として扱うので、「Chrome WebDriver」というソフトを使います。   [PR] プログラミングで挫折しない学習方法を動画で公開中seleniumの使い方 今回は、PythonでSeleniumの使い方を解説します。まずは、使っていく上で、以下の注意点を押さえておきましょう。 サーバに負荷を掛ける処理は行わない 対象のサイトでの利用規約で禁止されていないか確認   Pythonで手軽に使う方法としては、Pythonをインストールしたときに付いている、パッケージ管理ツール「pip」からインストールする方法です。「コマンドプロンプト（Windows）」または「ターミナル(Mac/Linux)」を開き、下記のコマンドを入力します。 $ pip install selenium $ pip install chromedriver-binary-auto これで、準備は完了です。次は実際にプログラムで自動操作を行います。   seleniumを利用してchromeの自動操作をプログラムしてみよう それでは、プログラミングしていきましょう。以下のようなコードを書いてみましょう。 import time from selenium import webdriver driver = webdriver.Chrome() driver.get('https://www.google.com/') time.sleep(5) search_box = driver.find_element_by_name("q") search_box.send_keys('りんご') search_box.submit() time.sleep(5) driver.quit() 実行すると Googleの検索画面が開いた後、「りんご」が検索欄に挿入され、検索結果画面が表示されると思います。   まとめ 今回は、PythonでSeleniumを使った自動操作について解説しました。ぜひ、使ったことない方や興味のある方がいれば、この機会に使ってみてはいかがでしょうか。   監修してくれたメンター 土井友裕（どいともひろ） 社内エンジニアとして、活動をしています。 扱えるプログラミング言語は、Python、Ruby、Dart(Flutter)、C# 、Java…他 など幅広く経験しております。開発実績としては、大手医療機器メーカーのWEBシステムの開発に従事しておりました。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

ChromeでCSSが無効化される原因と対処法を現役エンジニアが解説【初心者向け】

ChromeでCSSが無効化される原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ChromeでCSSが無効化される原因と対処法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Chromeのデベロッパツールの使い方 CSSが無効化される主な原因と対処法 Chromeを活用して改善してみよう まとめ   Chromeのデベロッパツールの使い方 フロントエンドの開発で必須とも言えるのがブラウザChromeのデベロッパーツールです。デベロッパーツールはブラウザ上でマウスを右クリックして検証を選択するか、その他のメニューから起動できます。   [PR] プログラミングで挫折しない学習方法を動画で公開中CSSが無効化される主な原因と対処法 CSSが思ったとおりに適用されない場合、まずは優先順位を確認しましょう。CSSで要素を指定するCSSセレクタでは、要素名＜クラス＜idの順に優先順位が高くなります。CSSの優先順位について、詳しくは以下の記事も参考にしてください。 MDN – 詳細度   Chromeを活用して改善してみよう 今回はCSSの適用状況をChromeのデベロッパーツールを使って確認する方法について説明します。まずは以下のHTMLファイルを作成します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> .parent { background-color: lightblue; width: 200px; height: 150px; } .child {
CSS

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次ato-ichinensmartphone simulatorColorPick EyedropperDevTools Theme: Zero Dark MatrixWappalyzerYSlowAwesome ScreenshotOne TabPage RulerClear CachePasty そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] プログラミングで挫折しない学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分 このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。 本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。   必要なフォルダとファイルを作成しよう まずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。 （例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）   フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。   HTMLをコーディングしよう いよいよコーディング作業に入ります！ 今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 盤 --> <div id="stage" class="stage"></div> <!-- 各マスを描画するためのテンプレート
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） プログラミング 【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選