streaming kitAVerMedia BU110

JavaScriptのすゝめ ~エンジニアからフリーランスになるまで~【2部】

2部では

2部では僕が今まで具体的に扱ってきた技術・これから勉強していきたい技術等を詳しく書いていきたいと思います。
初心者の方が始める際は、「ここから勉強しておけばとっかかりができる!」というポイントも書いていきたいと思います。

また、この記事は僕自身web系の案件メインで携わっているため、そこに焦点を当てて行きます。

 

この記事で扱う用語について

  • ライブラリ
    言語に対して、便利機能を与えるものの総称
  • フレームワーク
    言語に対して、サービス全体の骨組み・作っていく上での指針を与えてあげるものの総称
  • DOM
    HTMLに記載されている各要素にアクセスするための仕組み。
    ボタンが押された時!などの処理を書く際に、どのボタンが?などと指定するために使用します。

 

この記事で扱う技術について

★HTML

webサイトに対して文章を与え、その意味合いなどをコンピューターに伝える言語
既に知ってる人は「何書いても動くぜ!」とか思うかもしれませんが、ここをしっかり作り込むことにより
検索した時のキーワードに対する順位などが決まります。

僕は最初の頃は「何書いても動くぜ!」という気持ちが強くはしゃいで書いていて

確かにそうではありますが、そうじゃありません。

ダメ絶対。

 

★CSS

  • CSS
  • SASS
  • PostCSS
  • CSS in JS

など亜種を含め色々出てくる言葉はありますが、これらは全てCSSです。(CSS in JSは正確にいうと違いますが・・・!)
これらはHTMLのコンテンツに対して、見た目を指定するための言語です。

 

★JavaScript

これはwebサイトに対して、動きを与えることがメインの言語です。
メインという言葉使っているのは、もともとこの言語は皆さんが使っている「ブラウザ上で動作する」言語だったのですが
近年は需要が高まってきていることもあり、サーバー上でも動くライブラリができているからです。

 

● ここまででまとめ

ここまでで出てきた上記三つの言語に関しては主にブラウザ上で動作を確認できます。
(ChromeだとChrome内にファイルをドラックアンドドロップで表示できます)

 

それによって、僕は1部で「参入障壁が低い」と判断しています。

そして、上記の言語はほぼほぼハッピーセットで扱われると考えてください。
文字だけのwebサイトなんてみなさん見たことないですよね?

 

僕が例える時はよく本にして例えます。

HTML ➡ 小説
CSS ➡ 漫画
JavaScript ➡ 飛び出す漫画

 

のように考えるとわかりやすいと思います。

 

 

次は、サーバー上で動いている言語についてです。

★PHP

  • Laravel
  • CakePHP
  • CodeIgniter

など、フレームワークを利用することが多いです。
PHPはwebに特化した言語です。

 

★Ruby

こちらもPHP同様webに強い言語になります。
僕の中ではほぼ Ruby = Ruby on Rails になっています。

 

★Python

こちらはPHP Rubyとは少し違います。
「計算」や「機械学習」と言われるものに特化した言語ですがwebフレームワークでDjangoというものも出ています。

人工知能や膨大なデータの解析に使われている言語です。

 

★Go

こちらは上三つの言語とは少し違います。

よりコンピューターに近い言語です。
「コンピューターに近い」というのはどういうことかというと、様々な言語は人間が読みやすいように、人間とコンピューターの間でいろいろなことを自動でやってくれますが
それを最終的に「人間が読めるか?」ということを無視して変換し、そのファイルを使用します。

より高速になったり、コンピューター自身に詳細な命令を出すことができるというメリットがあります。

そういった言語の中でもGoには

  • 並列処理が容易にかける
  • メモリの使い方をそんなに気にしなくて良い

などといったメリットがあります。

 

● ここまででまとめ

ここまでで一旦まとめです!

様々な言語を紹介してきたのですが、僕が使ったことあるものや興味があるものを掻い摘んで紹介しました。

では、

  • 何を学べば良いか?
  • Javascriptの勉強の取っ掛かりはどうすれば良いか?

について書いてききたいと思います!

 

何を学べば良いか?

ここは目的によって違ってきます。
また、僕の個人的な主観も入ってきますので、参考程度に見てくださいね!

 

●web系だけでなくいろんな分野に将来挑戦したい!

  1. Python
  2. Go
  3. JavaScript

やはり、「いろんなことが手軽にできる」というところに焦点を当てるとPythonでしょう!
僕もゴリゴリに使えるようになりたいです・・・!

将来的にはデータ解析の仕事などもやって見たいと考えているので勉強しています。

 

● エンジニアとしてお金をがっつり稼ぎたい!

  1. Ruby
  2. JavaScript
  3. PHP

フリーランスとして常駐型の案件を探す際にいろいろな案件を見てきました。

その中でも、Rubyはベースの単価が高いように思えます。
案件も多いため、困ることはなさそうな印象でした!

JavaScriptは近年少し特殊な位置付けになったと思います。
nodeというライブラリの誕生により、サーバーでもクライアントでも動く言語へと進化を遂げました。
フレームワークやライブラリも有名なものだと

  • React
  • Angular
  • Vue
  • jquery

派生も含めるとマイナーなものまで本当に様々なものがあります。
また、ここ数年で流行り廃りなども最も活発な言語になっていると思いますし、デスクトップで動く(ブラウザを使用しない)ものからスマホアプリまで作れるようになってしまいました。

勉強している間に流行りが移り変わるかも・・・という不安もありますし、それを追っていくのも大変ですが
メリットはとても大きいと感じています。

 

PHPはweb系に携わりたければ、やっておいて間違いはないです。
現に日本のレンタルサーバーではほぼサポートされており、実行環境を作るのも容易です。容易というより、ほぼ最初から用意されています。

 

● ここまででまとめ

「web系のエンジニアになるために何を学んだらいいか?」という疑問は多少答えが見つけられましたでしょうか?
実は先ほど書いた「稼げるJavascriptエンジニア」というのは少々条件があります。

 

それは

jquery以外のフレームワークを使えるか?

ということです。jqueryが悪いわけではありませんが、それはどういうことか?
というのを次に書いていきたいと思います!

 

JavaScriptの流行りについて

Javascriptを一般的なwebサイトで使用する場合は大抵jqueryを使います。
例えば何かの要素がクリックされた時の処理を書こうとすると


“`
document.querySelector(‘#id’).addEventListner(‘click’, function() {
// 自由な処理
})
“`

のようなコードをjqueryを使用すると、

“`
$(‘#id’).click(function() {
// 自由な処理
})
“`


のように記述することができます。
短いですね!

この程度の処理だと良いですが、DOMを追加したり消したりという処理をどんどん増やしていくと、処理はとても重くなっていってしまいます。

なのでこれだけではなく、バーチャルDOMを使用してこれをかけるとまずは最近の流行りに乗っかってるといってもいいでしょう!

具体的にどういうことかというと
「HTMLの記述をHTMLファイルに記述する」のではなく「HTMLファイルの吐き出しをJavaScriptに任せる」
ということです。

 

そのためのフレームワークで代表的なのは「React」と「Vue」ですね。

ReactやVueやその他のJavascirptのフレームワークを使いこなせるようになると
とてもパフォーマンスの良い且つ可読性の高いコードが書けるようになります。

 

Angularはちょっと毛色が違うので
とっかかりとしては、ReactかVueから勉強するのが良いと思います。

僕自身はReactがメインです。

そこまで書くと長くなりすぎてしまうので、興味のある方は公式をさらっと見てみてください。

 

最後に

僕自身はフリーランスで活動中なので
もしも何かあれば1部に記述しているブログなどからコンタクトをくれるととても嬉しいです。

 

それでは、ありがとうございました!

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ページ上部へ戻る
%d人のブロガーが「いいね」をつけました。