• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア

You are here: Home / Archives for プログラミング入門

プログラミング入門

プログラミング学習を成功させるポイントを3つお送りいたします

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

オフィスにいる男性

プログラミング学習は、学習コストの投資に対するリターンの期待値が高いです。そのため、人生をより良く、より楽しくしたい方には、プログラミング学習をとてもおすすめしています。
しかしながら、間違った学習方法により、挫折してしまう人も多いです。

プログラミング学習を成功させるポイントは沢山あるのですが、

ここでは、ポイントを3つピックアップしてお伝えいたします。

 

ポイント① 将来なりたい姿に合わせて適切なスキルを選ぶ

今後どのように活躍したいかによって、学ぶべきスキルが異なります。あなたが思い描く将来像によって、力を入れて学習するスキルを変えてください。

一概には言えないので、あくまで例となりますが、

  • スタートアップ起業で働きたい:Ruby やJavaScript
  • 開発費が数百億円、数千億円の大大企業や公的機関などの規模の大きな法人に向けたビックスケールのプロジェクトの開発がしたい:JavaやC#
  • iPhoneアプリを創りたい:Swift
  • Androidアプリを作りたい:Kotolin

といった具合です。

一つの言語を習得すると、他の言語の習得もハードルが下がります。

汎用性があり、分野を問わず使う機会が多いため、現時点で何を学習したらいいか分からない方はまず、HTML、CSS、JavaScriptから始めてください。

 

ポイント② 自分の実力&即戦力であることを示すポートフォリオを作ることを意識する

新卒でIT企業に就職される方は「やる気があります、何でもやります」で採用してもらえる可能性も高いです。

しかし、中途採用の場合は基本的には即戦力採用です。実務未経験でITエンジニアとして就職するには、実力が分かるポートフォリオを作ることが重要です。

架空でも良いのでウェブサービスを作って採用担当者に実力を示すことや、ソースコードを現場の担当者に書類選考の資料として見せるなど、ポートフォリオ作りを意識して、そこから逆算して基礎学習を行ってください。

言い換えると、創りたいものがあるから、それを作るための学習をするということです。このように考えると、モチベーションが続きやすいです。

 

ポイント③ 気兼ねなく聞ける環境を確保する

プログラミング学習に限ったことではないのですが、新しいスキルを身につける時に、適切なアドバイザーを見つけることはとても大切です。

私も経験があるのですが、行き詰まったときに自力で解決するのはとても時間が掛かる場合があります。

しかし、経験者に聞いたら3分で解決するというのはよくあることです。

一番の理想は、就職して実務経験を通して先輩に教わることです。

なぜなら、お金を貰いながらスキルアップできるからです。

 

私も、先輩に沢山教わりましたし、教える側の仕事もたくさんしました。

就職したときに、先輩や上司に当たる方も採用した新人が成果を出してくれないとプロジェクトが回らないため、親身に教えてくれる人が多いです。

 

とはいえ、就職するためには勉強が必要なので、そのときにも聞けるアドバイザーを探してください。

まずは友人、知人、親族を探します。見つからない場合は、お金を払ってでもアドバイザーを確保したほうが、結果が出るまでが早いです。

SNSなどで、無料で相談に載ってくれる先輩エンジニアの方もいたりします。

しかし、基本的には本業の合間に対応しているので、遠慮して聞かないといけない、返信まで1、2週間かかるなど、ゴールに向かって遠回りをしている方もいらっしゃいましたので、注意してください。

まとめ

プログラミング学習を成功させるポイント3つ

  • ポイント① 将来なりたい姿に合わせて適切なスキルを選ぶ
  • ポイント② 自分の実力&即戦力であることを示すポートフォリオを作ることを意識する
  • ポイント③ 気兼ねなく聞ける環境を確保する

を紹介いたしました。

私は、プログラミングを学習して仕事にしてきたおかげで、今、本当に仕事が楽しくて仕方がない状況です。

ぜひ、皆さんもプログラミング学習を成功させて、転職などご自身の目指す目標を達成してください。

おすすめの教材については、動画の説明欄に記載していますので、参照してください。
あと、動画が役に立ちましたら、チャンネル登録もよろしくお願いします。

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

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

今すぐ詳細を確認する

Filed Under: エンジニアへの道 Tagged With: エンジニア, プログラミング入門

Windowsで2つのファイルの差分を確認するには?WinMergeの使い方を紹介!

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

書類を読む女性

はじめに

パソコンの前で頭を抱える男性

プログラミング学習をしていると、バグの原因究明に四苦八苦すること、ありますよね。

サンプルコードの通りに記述しているのに、なぜか想定通りに動かない。

実行時にエラー文が出るタイプのバグならまだ確認しやすいですが、特にHTML等で想定と違う挙動をしている場合は何のエラー文も出てこず悩むことも多いですね。

そんな時は、サンプルコードと自分の書いたコードでどの部分が違っているのか、差分(diff)を確認してみましょう。

この記事では、Windows環境でのファイル差分確認方法を紹介します。

ファイルの差分(diff)とは?

書類を比較する女性

2つのファイル間で異なる部分のことを差分といい、「違い」を意味する英単語「difference」から「diff」(読み:ディフ)とも呼びます。

特にプログラミングの業界ではファイル間の違いを見るために「これとこれのdiff取ってみて」などと指示されることも多いです。

冒頭で取り上げたバグの原因究明のケース以外にも、ソースコードの更新をした際に更新前後でどの部分が変わったのか把握する目的でも行われます。

WinMergeのインストール方法

Windows環境で使用できる差分確認ツールとしては、WinMergeがポピュラーです。無料で使用でき、UIも優れていて差分がとても見やすいことから大変人気があります。

インストーラをダウンロード

まず、WinMergeのサイトからインストーラをダウンロードします。

いくつかのインストーラが用意されていますが、一番上の「WinMerge-X.X.X-Setup.exe」を選ぶと良いでしょう。X.X.Xには最新バージョンの数字が入ります。

クリックすると実行するか保存するかを聞かれますが、念のため保存しておきましょう。

インストーラを実行

インストーラをダウンロードできたらダブルクリックします。

インストール場所やコンポーネントの選択がありますが、特にこだわりがなければ全てデフォルト通りのまま「次へ」をクリックしていき、最後の「インストール」を押せば完了です。

WinMergeの使用方法

ここからは、実際のバグ取り例に沿ってWinMergeの使用方法を見ていきましょう。

HTML+CSSでのケース例

ここでは、オンライン講座「Web開発入門完全攻略コース」のサポート記事を例として取り上げます。

「Web開発入門完全攻略コース」サポートサイト

HTMLとCSSをサンプルコードの通りにコーディングすると、本来は下記のような実行結果となるはずです。

正しい実行結果

実行結果が想定と違う場合は差分を取ってみよう

ところが、このようにナビゲーション部分が横に広がらず縦に並んでしまったとしましょう。

間違いの実行結果

様々な原因が考えられますが、例えば該当箇所でのfloatがうまくできていない可能性が思い浮かびますね。

しかし、base.cssのソースコードを見てみてもそこはきちんとfloat: leftの指定ができているようです。

これならばnav要素は全て左から順に横並びになると想定されます。

header nav ul li {
  float: left;
  width: 155px;
  margin-right: 2px;
  text-align: center;
}

このように原因の予想が外れてしまうと、どこに間違いがあるのかソースコードを頭から一通り睨むことになり一苦労ですね。こんな時こそ差分ツールの出番です。

まずはHTMLファイルを比較してみましょう。WinMergeを起動し、フォルダのアイコンをクリックします。

WinMerge起動画面

比較したいファイルを3つまで入力することが可能です。ここでは、まず比較したい2つのHTMLファイル(サンプルコード・自分のコード)を選択してください。

WinMergeのファイル選択画面

「検証」をクリックすると、2ファイル間で差分がない場合はこのような画面になります。どうやらHTMLファイルには問題ないようですね。

WinMerge(差分なし)の検証結果画面

次にCSSファイルを比較してみましょう。先ほどと同様に比較したい2つのCSSファイルを指定し検証をクリックするとこのような画面となりました。

WinMerge(差分あり)の検証結果画面

差分がある場合は、左側の「ロケーションペイン」の部分に差分の箇所がオレンジ色で提示されます。その部分までソースコードをスクロールすると、「header nav ul」要素でのwidth指定値に差分があることがわかりました。

サンプルコードは940pxなのに対し、今回書いたコードでは94pxになってしまっていますね。floatが効いていなかったのでなく、幅が足りなかったために縦並びになっていたようです。

このように、素早く簡単に問題の箇所を見つけることができました!

まとめ

オフィスで働く女性

Windows環境でファイルの差分を確認する方法を紹介しました。特にHTMLでは想定通りの実行結果にならなかった時、何が問題なのか見つけにくいことが多いです。

この方法を使えばどこが間違っているのかスムーズに確認することができますね。

バグ取り以外にも便利な使い道がたくさんあるので、ぜひ使ってみてください。

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

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

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: diff, Windows, プログラミング入門

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

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

パソコンに向かう男性

はじめに

オフィスの机とパソコン

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

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

この記事では、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入門

サーバー構築技術(1)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(プログラス)でプログラミングを学んで、創れる人になろう!

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

今すぐ詳細を確認する

Filed Under: エンジニアへの道 Tagged With: AWS, Bootstrap, CSS, Git, GitHub, Heroku, HTML, JavaScript, Linux, Ruby, Ruby on Rails, SQL, Web開発, プログラミング入門, プログラミング学習

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 20
  • Go to Next Page »

Primary Sidebar

Twitter

Follow @programmingnavi Tweets by programmingnavi

Facebookページ

プログラミング入門ナビ

メルマガに今すぐ登録!

ブログの更新情報やお得なクーポン情報などをお知らせします。

登録はこちらから。

人気の記事

まだデータがありません。

最近の投稿

  • 【7/9更新】Udemyプログラミング入門講座等の割引クーポン配布
  • JavaScriptの「this」は呼び出し方によって値が変わる?違いを徹底解説!
  • JavaScriptのfor文で配列要素の足し算をするとNaNが出るのはなぜ?原因と対処法を解説!
  • プログラミング学習を成功させるポイントを3つお送りいたします
  • 初心者がスマホアプリを開発するには?iOSとAndroidの両方について必要なスキルを確認しよう

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript Linux macOS MySQL MySQL Workbench node.js Nuxt.js Proglus Python Ruby Ruby on Rails SQL Udemy Vue.js Web開発 Windows Windows10 エラー エンジニア オンライン学習 サーバ サーバー スクリーンショット セキュリティ セール データベース プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習 開発環境構築

アーカイブ

  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2023 · programmingnavi.com ・About・プライバシーポリシー