GitHub

初心者からWebエンジニアへ転職するために必要なスキルセットは？優先順位別に紹介！

2020-03-31 By プログラミング入門ナビ編集部

はじめに

Webエンジニアへの転職、やることが多くて何から始めたらいいか悩んでしまいますよね。

ひとまずプログラミングの学習を始めたはいいものの「これだけでいいのだろうか」「あれもやっておくべき？」など、考え始めるときりがありません。

この記事では、Webエンジニアに最低限必要なスキルセットとして何を押さえるべきかについて、講師のおすすめを紹介します。

Webエンジニアリングの全体像

まずはWebエンジニアの仕事ではどういったことをするのか、ざっくりと見てみましょう。

Webサイト制作時の役割分担として、フロントエンドとサーバーサイド（バックエンドとも呼ばれます）があります。

フロントエンドはWebサイトがユーザからどう見えるかを司るユーザーインターフェイス部分の実装です。

サーバーサイドはその名の通り、Webサイトが動くサーバー上で必要な機能の実装部分となっています。

また、どちらの場合も、基本的な開発ツールを使いこなせるようにしておくことも重要です。

Webエンジニアへの転職後はこのいずれかもしくは両方を担当することになります。

全体の動きを把握するためにも、まずは次項以降のスキルセットを一通り身に付けて簡単なWebサイトを開発してみるのがおすすめです。

フロントエンド

最初に、フロントエンド開発に必要なスキルセットを紹介します。ブラウザ上で簡単に挙動が確認できるので、まずはフロントエンドから入ると理解が進みやすいです。

HTML + CSS

文章や画像など、Webページの見た目を記述するための言語がHTML、そのレイアウトを制御するのがCSSです。

Webエンジニアリングにおいて一番基礎の部分であり、初心者の方でも学校の授業等で触れたことがあるかもしれません。

新HTML入門

WE05-CSS入門

JavaScript

Webサイトには、ユーザがただ読んだり見たりするための静的なコンテンツだけではなく、アンケートやファイルアップロードなどユーザが操作するコンテンツもありますね。

このようなコンテンツではユーザの操作に応じた動的な処理が必要で、これを記述するための言語がJavaScriptです。

実に世界の95%以上のWebサイトでJavaScriptが使用されており、初めて学ぶのに適しています。

WE09-JavaScript入門

Bootstrap

HTML、CSS、JavaScriptはいずれもプログラミング言語ですが、自分でデザインも実装も行うとなると手間がかかります。

Bootstrapは、表示先のウィンドウサイズに合わせてレイアウトを動的に変化させるレスポンシブデザインなど、定番のレイアウトを簡単に実装するためのCSSフレームワークです。

これを覚えればデザイン性の高いサイトをサクサクと作れるようになります。

WE08-Bootstrap4 入門

サーバーサイド

フロントエンドを一通り理解したら、サーバーサイドの技術を身に付けましょう。サーバー環境を構築し、実際に動かしながら学んでいくのが良いでしょう。

SQL

一定以上の規模であれば、データベースを使わないWebサイトはほとんどないと言っても過言ではありません。例えばECサイトならば顧客情報や商品情報を管理するのに必要です。

SQLはデータベースを操作するためのプログラミング言語で、こちらも習得することを推奨します。

後述するスクリプト言語のフレームワーク等ではActiveRecordという仕組みが導入されており、オブジェクト（アプリケーション内の実体）とデータベースをスムーズに繋ぐORM（Object-Relational Mapping）が可能です。

この機能を用いればSQLを意識することなくデータベースを扱うことはできますが、不具合が発生した際のデバッグやパフォーマンスを上げるためのチューニングはSQLを知らなければ難しいでしょう。

SQ01-SQL入門

Ruby

サーバー側の処理を記述するためのスクリプト言語にはPerl、PHP、Python、Java等様々なものがありますが、中でもおすすめしたいのがRubyです。

日本人のまつもとゆきひろ氏が開発された言語ということもあり、日本語のドキュメントが充実していて人気が高く、後述する通り便利なフレームワークもあるため初心者の学習に適しているといえます。

RB01-新・Ruby入門

Ruby on Rails

Rubyでの開発を簡素化するために、よく使われる機能等をまとめて使いやすくしたフレームワークがRuby on Railsです。

これを使うとコード量が少なく開発スピードが上がるため、実際の開発現場では必ずといっていいほど導入されています。

RR01-新・Ruby on Rails入門

サーバー構築技術(１)heroku

サーバーの構築や運用についても学ぶ必要があります。サーバー用の機器を購入して自宅で構築する方法もありますが、手軽に始められるPaaS(Platform as a Service)を活用するのが良いでしょう。

herokuではハードウェアの準備やOSのインストール等を行わず、アプリケーションのデプロイに集中できるので習得スピードを早められます。

heroku

サーバー構築技術(2)AWS

もう一つのおすすめはAmazon社が提供するAWSです。導入している企業が多いため、習得しておくと良いでしょう。

認定試験もあるので、転職活動を有利に進めるために取得を目指すのも良いかもしれません。

Amazon Web Service

開発基本ツール

開発に欠かせない基本ツールの使い方も習得する必要があります。Webエンジニアに限らず全てのエンジニアに必須のスキルです。

Git/GitHub

Gitはソースコードのバージョン管理システムです。

開発を進めていくとコード量が膨大になり複雑になってきますよね。

後から不具合が起きた場合の対応のため、どのバージョン以降から発生したのかを確認・修正したり、別の機能を派生的に追加したりする目的でソースコードを管理する必要があります。

ローカル環境で使用するバージョン管理システムとしては、SubversionやCVSといったものも有名ですが、より便利なGitが現在の主流です。

また、Gitのクラウド版であるGitHubは数千万人規模のユーザが利用しており、ソースコードの公開やそれを通した交流の場となっています。

WE16-Git / GitHub入門

Linux

サーバー環境はLinux上に構築されることが多いため、基本的なLinux操作方法について学ぶ必要があります。

まずは重要なコマンドを覚えることから始めると良いでしょう。

LS01-はじめてのLinuxサーバ（ローカル環境編）

まとめ

Webエンジニアになるために必要なスキルセットについてご紹介しました。初心者の方におすすめの講座情報も掲載していますので、ぜひチェックしてみてください。

学習方針確認のお助けになれば幸いです。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

【GitHub】push declined due to email privacy restrictions と表示されてpushできない

2018-09-14 By プログラミング入門ナビ編集部

GitHubに”push declined due to email privacy restrictions”のエラーが表示され、pushできないときの解決方法についてプログラミング入門者向けに説明します。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

エラーメッセージ

$ git push -u origin master
Counting objects: 29, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (27/27), done.
Writing objects: 100% (29/29), 5.47 KiB, done.
Total 29 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), done.
remote: error: GH007: Your push would publish a private email address.
remote: You can make your email public or disable this protection by visiting:
remote: http://github.com/settings/emails
To git@github.com:your_user_name/example.git

原因

eメールアドレスを非公開としている（GitHubのパブリックリポジトリにプッシュするする時に、e-mailアドレスが公開されないようにするため）
クライアント側において、git config のuser.emailに、GitHubが指定しているアドレスを設定していない。

解決手順

1) git config で、user.emailに、GitHubが指定しているアドレスを設定を設定する。

$ git config --global ID+username@users.noreply.github.com

※ “ID+username”の部分は、GitHubの管理画面から取得する
GitHub > Personal settings > Emails > Primary email address

2) CommitのAuthorをリセットする

$ git commit --amend --reset-author

おわりに

この記事では、GitHubに”push declined due to email privacy restrictions”のエラーが表示され、pushできないときの解決方法について説明しました。

Udemyでオンライン講座を公開中！

オンライン講座「Web開発入門完全攻略コース」では、Gitの使い方を始めとした、プログラミング入門について動画を使って学習できます。
無料プレビューを1時間分用意しています。ぜひご確認ください！

参照サイト

Private emails, now more private – GitHub

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

GitHub Flowのルールとワークフローについて

2018-06-21 By プログラミング入門ナビ編集部

Gitのワークフローの1つであるGitHub Flow（ギットハブフロー）について、プログラミング入門者向けに説明いたします。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

GitHub Flowとは

GitHubを運営しているGitHub社が社内で実践、Gitのワークフローです。
GitHub共同創業者のスコット・チャコン氏が、ブログで公開しました。

GitHub Flow ルールとワークフロー

シンプルで使いやすいGitHub Flow　について学習します。

ルール

GitHub社が行っているGitHub Flowのルール概要について説明します。

マスターブランチは即座にデプロイ可能な状態を保つ
ブランチ上で必ず作業し、その生存期間をできるだけ短くすること
（変更したら、）すぐにプルリクエスト（PR）を作り、フィードバックや承認を求める
マージしたらすぐにデプロイをすること。

デプロイとは、ソースコードをサーバに配置して、稼働させることです。
プルリクエスト（PR）とは、変更したソースコードを、取り込んでもらえるようにリクエストするための機能です。
プルリクエストは、プルリクと略されることもあります。

ワークフロー

ワークフローについて説明致します。

なにをすべきかを決める。
masterブランチから説明的な名前のブランチを作成する
ブランチをgit pushして、コードをチームメンバーにシェア
PR作成
コードを書く & コードの修正　（議論しながら）
テスト
マスターブランチを、デプロイするPRブランチにマージ
テスト環境にデプロイ
テスト
本番環境にデプロイ
様子を見る
PRブランチを、マスターにマージ

補足

PRの変更は小さくすることが重要で、5-10行の変更でどんどんリリースすることが重要。
自動化を進めることが他殺
日本の開発現場だと、PRブランチをマスターにマージしてから、マスターブランチをデプロイする。ということが多いです。これはどちらが良いとか悪いと決めることがしませんが、GitHub社が行っているワークフローとは違うという点に留意してください。

おわりに

この記事では、プログラミング入門者向けにGitHub Flowの概要を説明いたしました。

オンライン講座「Web開発入門完全攻略コース」では、GitとGitHubの使い方について動画をつかって丁寧に説明しています。
無料プレビューを用意しています。ぜひご利用ください！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Git（ギット）入門イントロダクション-プログラミング入門者向けに説明します。

2018-06-20 By プログラミング入門ナビ編集部

Git（ギット）とは何かプログラミング入門者向けに説明いたします。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

Git(ギット)とは

ソースコードのバージョン管理をするための仕組みの一つです。
OS Linuxのソースコードを管理するために開発されました
現在、ソースコード管理はGitが第1選択肢となっているため、Webエンジニアなら使えて当然とされる技術です。

Git入門を動画で学習する

ソースコードのバージョン管理を行わないときのデメリット

どのファイルにどのような変更が行われているか、ファイルの中身を確認しないとわかりません、
基本的には同じファイルを同時に編集できません。
意図しない上書きで、編集内容が消えてしまうこともあります。
ファイル名を日付で管理するといった経験はありませんか？

ソースコードのバージョン管理を行うメリット

ソースコードの変更履歴を残して、誰がいつ、どのファイルのどの場所を編集したか簡単に管理できる。

Gitの特徴

最近はGitが特に普及が進んでいる。（バージョン管理システムはGitの他にもSubversionやMercurialなどいくつかある）
ローカルリポジトリと、リモートリポジトリをもつ
分散型

リポジトリとは

ファイルを管理するデータベースをリポジトリと呼びます。

ローカルリポジトリとリモートリポジトリ

ローカルリポジトリとは

各開発担当者それぞれががローカル環境に保持するリポジトリ

リモートリポジトリとは

すべての開発担当者で変更内容を共有する

分散型とは

このように開発者Aと開発者Bそれぞれで、ローカルリポジトリをもっています。各開発担当者はローカルリポジトリへ変更内容を登録します。
これをcommitといいます。
サーバー上にあるリモートリポジトリへ変更を内容を送信します。これをpushといいます。

リモートリポジトリ他の開発担当者の変更内容を取得したいときは、サーバー上にあるリモートリポジトリを受信します、これをpullといいます。

基本的な操作の流れと用語

流れ

各開発担当者は、ローカルリポジトリへ変更内容を登録（commit）
ローカルリポジトリの編集内容を他の開発担当者に共有したい時は、サーバ上にあるリモートリポジトリへ変更内容を送信(push)
リモートリポジトリにある他の開発担当者の変更内容を取得したい時はサーバ上にあるリモートリポジトリの変更内容を受信（pull）

用語

ワーキングツリーとは・・・最新のファイルの状態
ステージとは・・・コミットするためのファイルの状態
ローカルリポジトリ・・・ファイルの変更履歴を手元で管理
リモートリポジトリ・・・ファイルの変更履歴をPJメンバー全員で管理

※ add , commit, pushはコマンドを指しています。

add：「ワーキングツリー →ステージ（インデックス）」への反映
commit：「ステージ → ローカルリポジトリ」への反映
push：「ローカルリポジトリ → リモートリポジトリ」への反映

リモートリポジトリ GitHub

転職などで開発プロジェクトに入った時に、一番使う可能性が高いサービスはGitHub（ギットハブ）です。

GitHubには無料版と有料版があります。
無料版ではPublicリポジトリというインターネットに一般公開されるリポジトリが使えます。
有料版では、Publicリポジトリに加えてPrivateリポジトリという、許可された人しかアクセスできないリポジトリが利用できます。
Git操作の練習をするだけであれば、無料版でも良いでしょう。

GitHub以外には、BitBucketやBacklogといったサービスがあります。

リモートリポジトリは、自分で運用できる？

リモートリポジトリは自分で構築・運用することも可能です。
しかしながら、運用コスト（人件費、サーバ代）が掛かるので、何かしらの事情がなければ、GitHubのようなホスティングサービスを利用するのが一般的です。
「何かしらの事情」というのは、たとえば国家機密を取り扱うようなシステム開発であったり、開発者の人数がとても多いため、自社で運営したほうがトータルではコストダウンになるといったケースが考えられます。

おわりに

この記事では、Git（ギット）入門イントロダクションとして、プログラミング入門者向けにGitの概要を説明いたしました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

GitHubが主催するイベント「GitHub SATELLITE 2018」に参加

2018-06-13 By プログラミング入門ナビ編集部

先日（2018/6/12）、GitHubが主催するイベント「SATELLITE」に参加して参りました。
800人の募集枠が2日で埋まった人気イベントのことで、参加できてラッキーでした。

GitHubは、ソフトウェアのバージョン管理でお馴染みの、世界最大級のソフトウェア開発のプラットフォームです。

MicrosoftによるGitHubの買収

GitHubは、2018/6/4にMicrosoftに75億ドル（約8200億円）で買収されたことと、日経新聞が「設計図共有サイト」という微妙(?)な翻訳を掲載して話題になりました。

日本マイクロソフト CTO 榊原彰氏が登壇しました。
GitHubの独立性をたもって、すべての開発者が今までどおり安心して使えるようにするのがミッション。
ひとまずは安心してよいと思いました。

パネルディスカッション：Rubyが生まれた頃、そしてこれからのRuby

まつもとゆきひろ氏(プログラミング言語Rubyの生みの親)と、GitHubのソフトウェアエンジニアの、アーロン・パターソン (GitHub)氏のパネルディスカッションでは、興味深い話がいろいろと聞けました。

まつもとゆきひろ氏が登壇した理由ですが、GitHubはRubyを使い開発が行われていることから、親交があるとのことです。

Rubyの始まりについて

1993年にできた。
まつもと氏は、ソフトウェア会社で社内ツールをつくっていた。
しかしながら、社内ツールをつくってもお金を稼げないので、プロジェクトは解散となった。
保守担当として2人のこされたうちの1人となった。
今で言う、サポートエンジニア的なお仕事、
あまり管理されてなかったので、その時にRubyを作った。
当時はコンプライアンスに対して大らかで、退職時に上司に開発したRubyを持っていってよいか相談したらOKがでたので、今Rubyが世の中にあるそうです。

Ruby コアコミッター

100人弱。そのうち、日本人半分。
スーパーアクティブなのは日本人。
10年前、Rubyはオープンソースだが、クローズドだと言われた。
日本語で会話が行われているため。
そこで、公式言語を英語にした。
やりとりは、英語でRedmineに書くルール

Rubyの未来。

Ruby on Railsが登場して 2006年に、すごい話題になった。
ハイプ曲線（特定の技術の成熟度、採用度、社会への適用度を示す図）はすぎている。
今は、GitHub、 AirBnb、CookPadなどの、中の人と話をして、Rubyを良くしていこうとしている。
だんだん改良が行われる。

オープンソース・ソフトウェアの作り方も今と昔

20年前

Rubyは 3年間一人で開発して作った

今

「Streem」という新プログラミング言語の下記はじめのソースコード200行をGitHubで公開したら、他の開発者からプルリクエスト（開発したソースコードを取り込んでほしいと依頼する機能）が来て、あっというまに動作するものが完成したとのこと。

開発環境について

テキストエディタは、Emacsを 30年くらい利用している。
キーボードはこだわっている。

最近よく使うキーボードは、

Microsoft エルゴノミックキーボード

左右に別れているキーボードです。
腱鞘炎対策とのこと。

Thinkpad

出張のときは、ノートパソコンの、Thinkpadの内蔵キーボードを利用。

Let’s Split

左右に完全に分かれるキーボード。
検索してみたところ、組み立て式のようです。
switchtop

こちらも、腱鞘炎対策とのこと。

ウェアラブルキーボード「Tap」

手に装着して入力する、SFのような入力デバイス。
まだ使いこなせてないとのこと。
どれだけ早く打てるか未知数ですが、VRやメガネ型デバイスと相性が良さそうです。

おわりに

そのほかのセッションでは、GitHubプラットフォームの活用について、様々な知見が得られました。
これからも。開発系のイベントに参加して、最新情報をキャッチアップしていきたいと思います。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する