• ベストアンサー

Web開発は何を学ぶべきでしょうか

HTML5とCSS3とJavascriptとJQueryとBootStrapは少し解ります。 この後何を学ぶべきでしょうか サーバサイドではなく、React.jsやAngularJSやBackborn.jsなどなど クライアントサイドについての質問です。 お手数でなければ、おすすめ頂ける理由も教えて頂けると嬉しいです。 よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.4

現在の案件で普通にWebデザイナさんとしてやっていくには、既に基本は覚えている状態のようですね。 質問の内容から察するに、フロントエンドエンジニアとしてやっていきたいように見えていますので、その前提でお話をさせていただきます。 あなたの現在の状態がわかりませんが、学生さんであれば自分で好きな技術を選別してサイトを作っていく、社会人としてその技術を活用しているなら、現在の案件に合わせて必要な技術を入れていく通路を辿っていけば良いのではないでしょうか? Webの世界は技術進歩が早いので特定のクライアントサイドの技術を習得しても、数年後にはトレンドが変わってしまうものなのですし、作られるサイトに応じてその選択肢は変わります。 例えば、ブログザイトに若干の動的な部分をつけたい場合は、AngularJSの様な大掛かりな仕掛けは読み込み速度低下を嫌って使われず、jQueryをどうやって高速に読み込ませるかに心血を注いでいたりします。 また、質問内容にある様なJSの世界は、文化的にプログラマの自由に寄った民主主義の文化があって2~3年するとイケてるフレームワークの名前が変わりますので、"今"イケているフレームワークを勉強しても、もらった案件が3年前に開始されたものであれば、勉強したものとは違うフレームワークが使われているでしょう。 上記の理由から、特定の技術を勉強しても案件で生かせる"打率が良くない"ので、もらった案件に合わせるのが一番効率的な選択肢になります。 そこをあえて棚に上げてフロント系のおすすめの回答をするなら、SCSS、AngularJS、TypeScriptでしょうか。 理由は、AnguarJSは細かいカスタマイズは効きづらいですが、リッチなページを作るのに必要な技術が一通り入っているのでこういう機能があるというのを体験しやすいので。 TypeScriptは今の所のAltJSの本命でその上でECMAScript6の機能の体験版として使えるからです。 SCSSは案件で生かしやすい技術ですが、JS関連技術は勉強しても実案件で活かせないかもしれません。 そこはご理解お願いいたします。

ques9900
質問者

お礼

ご回答ありがとうございます。 仕事では指定されている場合は、粛々とこなすので 決まった事には従う派です。 あまりにひどいと愚痴に出てしまうかもしれませんがご愛嬌です(汗) 普段は楽ちんなサーバ側で、フロントエンドは人手が足りない時のお手伝いです。 クライアントは対象環境が多くて大変なのに、なぜかあなどる人が多くていつも オンスケで終わらないんですよね。 この質問の内容は自分で全て管理している開発に適用するつもりですので、 気兼ねなく新しい事を取り入れようと思っております。 SCSS、AngularJS、TypeScript興味ありありです。 Javascriptの継承がどうも好きになれませんで、 ES6を心待ちにしております。 AltJS初耳でした。調査する事が増えて嬉しいです。 「jQueryをどうやって高速に読み込ませるかに心血を注ぐ」は C使いとしては胸熱です(笑) Javascriptの基本が解っていないので、 DOMのプロパティにほとんど全ての内部データを読み書きするようにしてしましました。 処理コストやセキュリティを考えるとダメな気がしています。 表示と内部データのズレが厄介なバグになりそうと思い内部にデータを 持たない方針にしたのに無理があった気がします。 こういうのが厄介なので、データバインディングやMVCという事が叫ばれているのかなと 勝手に想像しておりました。 データ書き換えとDOM反映がセットになってしまうと非効率な処理もあると思いますので、 分離しているのが、AngularJSやReact.jsなのかなと勝手に思っています。 現状のトレンドがどの地点にあるのかを、幅広いご意見から探りたいと思ったしだいです。 まったく理解はしておりませんが「Web Components」という言葉も気になっております。 貴重なご意見の数々、勉強になりました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (4)

回答No.5

…まぁ、私個人としては、フロントエンドエンジニアは、JSONでデータをやり取りするので、お互いその調整ができる程度に、バックエンドのコードもある程度読める人が一番嬉しいですけどね。

ques9900
質問者

お礼

私も便乗して個人的な事を書きますと、エンジニアの気持ちを汲んでくれる、 デザイナーさんが一番嬉しいです。 納期直前のデザイン変更やめてください>< 試験日程後半にそういう無慈悲な事は無しの方向でお願いします。 直感的に簡単に思えても、作りの事情とかで簡単ではない時 あるんです。。 上にあるパーツ下にするだけでしんどい時あるんですよ。 特に他の人が作ったところなんてキツイんです!

全文を見る
すると、全ての回答が全文表示されます。
  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.3

>絶対的にWebのクライアント作成能力が不足しております。 >初心者も甚だしいレベルと痛感しています。 それはさすがに分かります。「何を学ぶべきでしょうか」と 自分に何が必要かすら、把握できていないということですから。 繰り返しになりますが、あなたの望む「Web開発」をやってみればいいと思います。そうすれば自分に何が足りないか知ることが出来ると思います。 すでにやっているのにまだ理解できないということなら、自分がすごい・こんなの作りたいと思ったサイト、今の自分には実装できなさそうな動きのサイトのソースを見ればいいと思いますよ。

ques9900
質問者

お礼

申し訳ない。たぶんあなたと私は通じ合えない。 続ける必要がないように思います。

全文を見る
すると、全ての回答が全文表示されます。
  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.2

あなたの言う「Web開発」が何を指しているかによるでしょう。 一般論で言えば「Web開発」なら真っ先にサーバーサイド言語を学ぶべきです。JavaとかPHPとかRubyとか。それが出てこないということは、一般的な「Web開発」とは食い違っているからだと思います。 そこはさておき、目的は勉強ではないはずです。まずは自分が何をしたいのかをよく考えることです。そしてそのために必要なのは何で、今不足しているのは何か考えればいいだけです。 あなたに何が必要で、あなたに何が不足しているかはあなたにしか分からないでしょう。 とりあえずあなたの望む「Web開発」をやってみればいいと思います。そうすれば自分に何が足りないか知ることが出来ると思います。本で勉強するのもいいですが、実技はより重要ですよ。

ques9900
質問者

お礼

ご回答ありがとうございました。 今不足しているのはクライアントサイドの知識です。 特に皆様がどういった理由でjsのフレームワークを選択しているのか または、選択しないのかに興味があります。 npmやbowerは使われているのかや cssにsassは必要なのか また、開発環境は何を用いているのかなど。 多岐にわたって興味があります。 今はAtomというエディタを使っています。 Emmet便利でした。 サーバサイドは最近はgolangをお試し中ですね。 まんまGAEにデプロイできるので便利です。 ローカルのデータベースならPostgreSQLかSQLite3で十分かなと思っています。 CassandraとHBaseは試したことあるんですけどね。 今度試すのはMongoDBかなーくらいに思ってます。 MySQLとMariaDBはやる気ありません。 もともとC言語出身なのでLinuxとNetBSDのカーネルソースとか見るのは好きです。 特にnetとfs周り。 低レベルのsocketAPIは使えます。主にTCPですけどね。 httpd(Apache、nginx)、Tomcat、sshd、設定もひと通りできます。 JavaとかC#は仕事で十分です。 PHPとRubyはやる気ありません。 PythonはreStructuredTextを使ったことがある程度です。 ですので、絶対的にWebのクライアント作成能力が不足しております。 初心者も甚だしいレベルと痛感しています。 自分で書いたJQueryでDOMをガリガリしているソースを見るとやばいと思いました。

全文を見る
すると、全ての回答が全文表示されます。
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

Web開発と言ってもいろいろあると思います。 別にそれらのフレームワークを学ぶのが基本の教養というわけでもないので、 ここから先は自分の理想に向けて特化して行くのがいいのではないでしょうか? 例えばWebアプリケーションの方向であれば、更なるJSとAPIの勉強が必要になってきます。

ques9900
質問者

お礼

ご回答ありがとうございます。 WebViewとブラウザ上とで考慮する事が違ったり、奥が深いなと思いました。 セキュリティひとつとってもむずいと思いました。OAuthめぇ(笑) 今までネイティブアプリがあれば十分だと思っていたのが、いけなかったと 思って急いで穴埋め中です。 本当はOpenGLでゲーム作る方に時間割きたいんですけどね。 更なるとおっしゃられた部分をさらりとお伺いしたいと切に思っております。 実践が大事なのは肌に染みこんでおりますが、先人の意見をできるだけ 幅広く聞く事も重要と心底理解しております。 気軽なご意見もありがたく受け止めますので、ご助言頂けると幸いです。 何も情報を含んでいない、啓蒙的な言葉だけはおやめください。 よろしくお願い致します。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSS含めてアップロードしても反映しない。

    デスクトップ上でwebサイトをTwitter bootstrapのフレームワークを使いながら構築しました。ローカル上は何の問題もなかったのですが、サーバーにアップロードした途端に、CSSや画像の読み込みがされなくなってしまいました。 The results here may be inaccurate because some stylesheets could not be loaded due to access restrictions. というようなメッセージがfirefoxで確認されました。 ディレクトリ構造は、下記のような感じです。 index.html bootstrap/css bootstrap/js bootstrap/img 実際のindex.htmlのヘッダー (ちなみにhtml5の記法に従ってます。) <head> <meta charset="utf-8"/> <title>Twitter bootstrap practice</title> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/> <script src="bootstrap/js/jquery.js"/></script> <script src="bootstrap/js/bootstrap.min.js"/></script> <style type="text/css"> body{padding-top:40px} </style> </head> なぜかさっぱりわかりません。 教えてください。 よろしくおねがいします。

    • ベストアンサー
    • CSS
  • JQueryはもう古いのですか?

    Webデザインの勉強をしていて、HTML5とCSS3をようやく覚えてきたのでJQueryを習おうかと思ったのですが、周囲からは「これからの時代はVue.jsだ」と言われました。そもそもJavaScript自体おろそかなのにこんな事を質問するのもおかしな話ですが、実際のところ、現場ではJQueryからVueへの移行が顕著なのでしょうか?今更JQueryを勉強するのは得策ではないのでしょうか? 分かりやすい回答をお待ちしております。どうぞ宜しくお願い致します。 OS Windows10

  • droppyとslideshowの共存

    jQueryについて質問です。 droppy.js(http://www.css-lecture.com/log/javascript/jquery-droppy-menu.html)と slideshow.js(http://www.css-lecture.com/log/javascript/039.html)を同じページに組み込みたいのですが、同時にいれると、slideshow.jsは動きますが、droppy.jsが動かないのです。 javascript初心者ですので、簡単に改善できる方法がありましたら、 どなたか教えてもらえますでしょうか。。 よろしくお願いします。

  • サーバ側とクライアント側のjavaScript

    「サーバサイドでjavascriptを実行させる」というのはどういうことなのでしょうか? node.js や、 イントラマートを使っているときは、 サーバサイドでのjavascriptというのも 全然理解できるのですが、 それらの基盤を使用していなくても、 サーバサイドの処理に、javascriptを使うことができるのでしょうか? 基本、jspの上の方に、 「サーバ上にあるjavascript」が クライアントサイドで動くと捉えており、 そういう意味では、基本、javascriptはクライアントサイドで動くと捉えているのですが違うのでしょうか? ※java+jspで実装しています。 .

  • 99limeの使い方がわかりません。助けてください

    私は、Webサイトを作るとき、デザインが苦手で、 bootstrapのCSSフレームワークを使っておりました。 いろいろな物を使ってデザインを試してみたいと思い、 99limeなどをダウンロードしたのですが、使えないのです。汗 全くわからず、ここ三日程、調べているのですが、うまくいかなくてお手上げ状態なのです。 例えば、99limeなどのサイトではもちろんのこと、Web内を調べてもこのような初歩的なことに対して、記述してある記事がなかったので、質問させてください どうすれば、99limeをhtmlに記述してWeb上で使用することができるのか 教えていただけませんか? 以下現在の私の理解度具合です。 bootstrapの場合ですと、html内において、<head>では <link href="css/bootstrap.min.css" rel="stylesheet"> そして、<body>の最後、すなわち</body>の付近に <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="js/bootstrap.min.js"></script> と記述することで、bootstrapを使用することができました。 この方法はドットインストールという初学者のために公開された動画で解説されたものを そのまま使ったので、bootstrapを使うことができました。 動画添付でも、画像添付でも本当に困っておりまして、どなたか教えてください。 よろしくお願いします。                         

    • 締切済み
    • CSS
  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のHTMLソースに足らない部分がありますか? ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • JSについて

    フロント>サーバサイドも多少>5年後以降には将来はアプリ制作も考えたいと思っています。 HTML5>CSS3>jQueryとやってきたのですが、その後どう学んでいくか迷っています。 JSそのものの基礎は必須ということで、下記本のJSの部分は全部やろうと思っています。JSそのものの基礎の学習としては十分でしょうか? よく、ライブラリを使うにしても、将来も普遍的なプログラミングの基礎は、生のJSで行わないといけない、その後ライブラリ、フレームワーク、タイプスクリプトを 行うべきだと聞くのですが、下記本のJSの部分がそれに該当すると考えてよろしいでしょうか? よくわかるJavaScriptの教科書 単行本(ソフトカバー) – 2012/3/24 たにぐち まこと (著) 下記サイトで言えば、 初級者の基礎知識 第一章 オブジェクト 第二章 DOMの基礎 第四章 文字列の基本と正規表現 くらいで十分でしょうか? http://uhyohyo.net/javascript/ その後どうするかがわかりません。 候補は下記ですが、 ・リアクト ・メテオ ・タイプスクリプト リアクト、タイプスクリプトはメテオのように、フロントも、サーバサイドも、アプリ製作もできないですよね。 フロント、サーバサイドのみでしょうか? それとも、タイプスクリプトは、ただのメタ言語のようなものなので、サーバサイドもできないでしょうか? また、難易度でいうと、メテオはmysqlは使えずmongoDBでないと使えず、日本語の情報が少ないので一番高いでしょうか? また、ライブラリやフレームワークはころころ変わるので、将来無意味になってしまう可能性が高いので、JSそのものを行わないと、技能として残らないという話もありますが、 JSそのものないしはタイプスクリプトで行わないと、変わってしまった場合に技能として、残るものがないでしょうか? それとも結局メテオなどをやっていればJSそのものを自然に突き詰めていっていくので、 ほかのフレームワークなどに変わっていっても、JSそのものと同じように技能は残ると考えていいでしょうか?

  • HTML+CSS+JSでのアプリ開発

    HTML+CSS+JavaScriptでAndroidやiOSアプリを作る事は可能だと聞いたことがあるのですが、ネイティブアプリとHTML+CSS+JSアプリとではできることにどのような違いがあるのでしょうか?僕が今作ろうと考えているのは募金アプリですので、ネイティブアプリだと募金額の30%取られてしまうのであればHTML+CSS+JSで行きますが、有料アプリを出す気は無いです。長期的な事を考えたらJavaから入る方がいいかもしれないですね。あとWebページを作りたいって訳じゃ無くて、募金アプリだったらどっちの方が良いかってこととネイティブに対してHTML+CSS+JSでする事にどういうメリットどデメリットがあるのかって事です。長くなってしまいましたが、ご回答頂けると嬉しいです。よろしくお願いします。

  • 複数jQueryの配置で干渉 設置位置

    Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 1サイト目(HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 2サイト目(HTML head内に配置) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の2サイトを合体させた:(HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 (HTML header内に配置) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> (HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか?

  • 同HTML内で2種のJ-Queryを使用したい

    複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、1つのみしか作動せずJavaScriptエラーがでてしまいます。 片方ずつで行うと作動するのですが、同じHTMLに2種組み込むとうまくいきません。 同じ質問があり参考にさせて頂いたのですが良くわかりません。 複数使う場合の記述方法があるということもサイトで知ってやってみたりしたのですがうまくできませんでした。 http://stacktrace.jp/jquery/with_other_lib.html 使用しているものは以下です。 -------------------------------------------- <!-- jQuery --> <script type="text/javascript" src='/js/J-Query/jquery-1.5.2.min.js'></script> <!-- ナビ --> <script type="text/javascript" src='/js/J-Query/jquery.color-RGBa-patch.js'></script> <script type="text/javascript" src='/js/J-Query/example.js'></script> <!--スライダー--> <script type="text/javascript" src="/js/J-Query/jquery.flexslider.js"></script> <script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); }); $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); </script> <script type="text/javascript" src="/js/J-Query/shCore.js"></script> -------------------------------------------- <!-- ナビ --> グローバルナビで使用 参照元 http://css-tricks.com/examples/MagicLine/ の下の方です。 <!--スライダー--> スライダーで使用 参考元 http://flexslider.woothemes.com/ お手数ですがどなたか教えて頂けると幸いです。