文字

現代web系開発環境の勉強[独り言]
公開:2020.09.09 更新:2020.09.11

こんにちらいどら。

前言ってた新プロジェクトはデザイン途中で投げ出してます。

色々勉強するうちにどうも私の知識は時代遅れ甚だしい事がよく分かったので、実際に現在に行われている開発手法を学びたいと思いまして。

本記事は勉強中に出てきた訳わかめな単語を調べて記述しておくミニ辞書、説明できなければリンク集になる予定です。それでは10年後に。

React,Vue,Angular

JavaScriptのフレームワーク(ライブラリ?)。どっちだか分からないが、仮想DOMという技術を使い、webページの要素変更の際にページリロードするのではなく、ページ変更差分を計算して書き換えるので、スムーズにページが変更される?

企業ではReactとVueが人気。難度はVue<React<Angular

React

試しにProgateでReactを触ってみると、JSX,XML(HTMLに似たもの)でコンポーネント(ページの中の部品)を作ってページを構成していく。

コンポーネントは一度作れば、他の部分でも使いまわすことが可能なため、作業効率もアップ。仕組みには「クラス」や「継承」など、ES6のJavaScript(最新のjs)要素が使われている。

前時代の書籍などで勉強した人は、理解できない可能性ありなので、Progateを覗いた方が良いかも。(筆者も)

Vue

やったことありません。

ただ、導入はJQueryみたいにheadにlinkタグ一つ貼るだけでできるみたいです。

ReactよりVueの方が

  • 手軽に始められる
  • 部分的に使える

感じみたいです。さっと流行を体験してみたければ触るのも良いかも。

Angular

やったことありません。三つの中で、一番出来ることが多いけど、導入が面倒で、企業人気が低いとかは聞いています。

フルスタックフレームワーク?という物らしいです。

入りたい企業が採用してるとかでなければ特段勉強する必要は無いかも。

参考

https://qiita.com/gumiTECH/items/13eb7da8224bf93c67b5

https://note.com/erukiti/n/na654ad7bd9bb


TypeScript

Altjs(次世代のJS的な意味)の一つ。TypeScriptで書くと、JavaScript形式にコンパイルされる。

Arduinoとか見てきた筆者からすると機械語に変換するのか?と思ったが、Web開発界隈の「コンパイル」というのは、作業・管理がしやすいフォーマットから、実際にWEBで使える形式に変換すること。

(最近のWEB開発は作業効率改善の為、素のHTML,CSS,JavaScriptをそのまま編集はせずに、やりやすい机で作って書くらしい。)

机の例:SCSS,Typescript….

実装する際には外に見えるように、机の前にある窓に紙を貼らなければならない(コンパイル)。

TypeScriptは名前に「Type」とあるように変数宣言の際に変数に入る型を指定できる。指定していない型が入った場合、コンパイルの際にエラーになる。

例:文字列型なのに数字が入るなど

初心者の私には全く理解できないが、実践ではそういうことがいっぱいあるらしい。勝手にundefinedとか。

大規模開発ではやはり必要になるんでしょうね。

あと、型というだけあって、文字列リテラル型というのを指定すると、あらかじめ指定した文字列以外はエラーみたいなことも出来るみたいです。

僕はキウイが好きなので、変数fruitsには”kiwi”しか入らないようにしときましょう。

参考

https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6

https://www.buildinsider.net/web/pronamatypescript/01

https://qiita.com/Yametaro/items/2eaa6fd75255c8c2a2bb


webpack

モジュールバンドラー?という物の一種らしいです。

要は、

大規模開発だと、各機能ごとにjsファイルを分けて作るよね

じゃあ、実装時には全30ファイルをぜーんぶ読み込みしてねー!

は?読み込み遅すぎだろあほ

となるのを複数のjsファイルを実装時には一つのjsファイル(Bundle.js)にして、読み込み速度アップしましょうね。

それが出来るから、開発もいっぱいファイル分けて分かりやすく出来るよね。

という物らしいです。

Google翻訳先生「bundleを日本語に直すと、纏める・束ねるなど、です。」

ちなみにwebpackだと、cssや画像もバンドルできちゃうんだそうです。

は?神かよ。

導入

npmからほらほら

参考(めっちゃ分かりやすい)

https://ics.media/entry/12140/


Babel

要約:コンパイラの一種。ES6(最新JavaScript)をES5に変換する際に使う。

最近は進んできたが、まだまだES6に対応しきれていないブラウザとかがあるので、それに合わせるために(古環境でも動くように)、ファイル内の文法などを変換してくれる。

例:const→var

導入

npmからほらほら

参考

https://qiita.com/koedamon/items/92c986456e4b9e845acd


Next.js

調べたものの、いまいち分からなかったので分かった要素の書き出し。

webpackやらBabelやら、最近のフロントは使うものが多い。Next.jsを使うことによって、比較的簡単にそういった開発環境を構築することが出来る。

  • Reactのフレームワーク?
  • Reactが使いやすくなる?
  • SSRってなんだ…..(サーバーサイドレンダリング?)
  • 環境構築ツール?
  • CRA(Create React App)である

Reactのフレームワークとか言ってる時点でフレームワークのフレームワークということになって訳わかめです。

という時点で調べてみるとReactはフレームワークではなくライブラリである。とか出てきました。

そこら辺に詳しい記事→ https://qiita.com/koeri3/items/c8d6abed6fa862093ebb

参考


ES Modules

最近のjsの仕組み。というよりはJAVAやらCやらではずっと前からあるプログラミングの基本構造なのだけど、JSもようやく機能も増え、人気も出てきたので作ろうとなったみたい。

基本は実装部分によってプログラムファイルを分割する、その単位をモジュールというらしい。だからModules?

参考

https://qiita.com/nanocloudx/items/f541c7ff95b10b40d189

https://uuuundefined.tokyo/blog/javascript-modules


まとめ

とりまおしまいです。最近の主要技術はこんなものでしょうか。業界の方見られてましたらコメントで教えてください…..頼みます!

まず一番結果がありそうなwebpackReactを試してみるつもりです。

それでは。

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。