以下はjavinpaul( Webサイト / Twitter / Facebook / dev.to )による記事、11 Essential Skills Software Developers should Learn in 2020の日本語訳です。 なおリンク先URLは元記事のままであり、和訳にあたり変更などは行っていません。 11 Essential Skills Software Developers should Learn in 2020 注意事項：この記事にはアフィリエイトリンクが含まれています。 この記事に記載されているリンクを踏んで製品やサービスを購入すると、私が利益を受けとることがあります。 ソフトウェア開発を始めてしばらくすると、優れたプログラマになるには何をすればいいのかという考えが時によぎるでしょう。 より良い開発者になるために、2020年には何を学ぶべきでしょう

{ var hostUrl= 'https://*****.php'; //var param1 = 1; //var param2 = 10; $.ajax({ url: hostUrl, // username: "*****", // Basic認証用ユーザー名 // password: "*****", // Basic認証用パスワード type:'POST', dataType: 'json', data : {name : "hoge"}, //data : {parameter1 : param1, parameter2 : param2 }, timeout:3000, }).done(function(data) { console.log('Successful communication with API!'); console.log('ReturnParamete

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 調べるキッカケ 最近フロントエンドを触り出して、JQueryの勉強（初歩中の初歩）をしていたのですが、 「JSの読み込みはbodyの最後に」という決め事があるようで、ちょっと気持ち悪いので調べていました。 すこしググると見解として、 HTML中にJavaScriptファイルを読み込む記述があると、そのJavaScriptを読み終わるまで、ウェブページのレンダリング(描画)が止まってしまうからです。 https://allabout.co.jp/gm/gc/380498/2/ などと記載されていて、なるほどと思ったのですが、 Qiitaの

CSSの position: sticky を使ってテーブルのヘッダー行・列を固定する方法を解説します。動作確認したブラウザーは次のとおりです。 Google Chrome 71 Firefox 64 Safari 12 Microsoft Edge 43 (EdgeHTML 17) ちなみに、IE 11などの対応していないブラウザーで見た場合、ヘッダー行・列が固定されないだけで、表示が崩れたりはしません。 theadを固定するかthを固定するか 縦スクロール時にヘッダー行を固定するにあたり、thead に対して position: sticky を指定したくなりますが、これはあまり筋が良くなさそうです。まずChromeやEdgeは thead や tr の固定に対応していません1。 display: block などで回避できますが、列の幅が決まっていないといけないという制約が生まれたり

HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const

CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考

最新WEBサービスのUI開発の裏側をご紹介したいと思います（最新スタートアップではありますが最先端ではありません）。 サービス スカウトミー https://scoutme.biz ITエンジニア専門スカウト転職サービスです。 求人票の掲載も人材紹介も一切なく、登録エンジニアは採用企業自らが直接送るスカウトメールをひたすら待ちます。 今は転職を考えていないという人も登録可能ですので、自分の価値を確かめる為にも是非！ 開発チーム構成 エンジニア：1名 デザイナー：1名 ディレクター兼デザインアドバイザー：1名 3名となっていますが、ロゴとランディングページｘ2（ユーザー＆採用企業TOP）のデザインカンプ制作以外のUI実作業は全てエンジニアが行いました。品質は必要最低限とし、最も速くリリースすることが出来る最小なチーム構成にしました。 画像職人 + HTMLコーダーの時代 最近、WEB開発を始

とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if

#はじめに 何て表現すれば良いかアレですが、こんなエフェクトを見かけたので再現してみました。マウスオーバーで四方のボーダーがシュッと伸びてきます。Coolデスネ :) [動作イメージ] なお実際の動作・ソースは以下で確認ができます http://codepen.io/nekoneko-wanwan/pen/EVjdvX http://nekoneko-wanwan.github.io/demo/mouse-action/hover/border/ #仕組み 実はアニメーションしているのはborderではなく、幅or高さ1pxの擬似要素です。リンク要素とその内側要素に::before, ::afterを設定して、それぞれ四隅に配置し、:hoverでサイズを100%にする動作をtransitionしているだけです。 #コード a { display: inline-block; color:

XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... - NEW !! XSound 2.0 がリリースされました. 以下の変更が加えられています. ES5 から ES2015 ~ へコードの書き換え const, let アロー関数式 class 構文 ES Modules ... etc ESLint によるコード検証 webpack によるビルド環境 つまり, 内部が変わっただけで, 外部, すなわち, API は 1.x と同じです. コードリーディングしやすくなったことで, issue をたてたり PR を送ったりする敷居を低くしました. XSound とは ? Web Audio API のライブラリの1つで, サウンドの生成 ワンショットオーディオの再生 楽曲

「エンジニア35歳定年説」が許されるのは小学生までだよねーとか思っていたら、実際にはそんな感じになってしまったあるエンジニアの半生を振り返ります。ご参考まで。 第一期 サービスリリース前 自分でサービスをガリガリ作っている というかサービスを作ることしかしていない １日１６時間くらい仕事をしても、プログラミングしかしていないので疲れない 仕様の検討をしながら作るので、基本全ての時間は開発をしているという認識 フルスタックエンジニアというある種の全能感を満喫する 第二期 サービスリリース後 運用（ユーザーサポートなども含む）が入ってくるのでサービス開発のスピードが落ちる エンジニアを採用（業務委託含む）する 仕様の調整やコードレビューなど、開発以外の仕事が少しずつ増えてくる でもまだまだ自分が圧倒的にメイン開発者 コードレビューやマージ、リリースは自分が全てやる システムの全体からディテール

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

若干釣り気味です、すいません！！！！！！というかまさかり期待してます、ください。 題の通りです。オブジェクト指向パラダイムはゲームプログラミングと相性が悪いです。 どうもプロのゲームプログラマには常識っぽいんですが、ホビーゲームプログラマにはあまり浸透してないみたいです。（調べてようやく認識しました……） ある日曜プログラマの憂鬱 ある日突然モグラたたきが作りたくなりました。なったんです！！ さて、モグラ叩きに登場するオブジェクトを考えます。 モグラが当然いりますね。 というわけでこんな感じに設計しました。 詳細な実装をつめていって、とうとうプロトタイプが完成しました！！ やった！！…と言いたいところなんですが、なんだか物足りないのです。 そこでかんがえました、叩いたらダメなウサギを作ろうと。 出たり引っ込んだりするのは同じなので、モグラを継承することにしました（説明のためわざとです、突っ

JavaScriptは、シンプルな仕様が美しい言語です。 しかしながら、シンプルが故に、一度罠にハマると見つけにくくて抜け出すのが大変です。 罠にハマった時に、すぐに抜け出せるように、簡単な例で抑えておきましょう。 ある一つのJavaScriptの罠が入ったコード 罠が入ったサンプルコードがこちら。 コンソールに i という変数を出力しています。 出力はどのようになりますか？ これ、実行したらどのような出力になると思います？ 0、1、2と答えたあなた。わたしはそんな素直なあなたが大好きです。 2、2、2と答えたあなた。素晴らしい。JavaScriptを極めてますね！ただ、不正解。ケアレスミス。 出力の答え こたえは3、3、3。不思議ですね。 さて、なぜこうなるかを解説しましょう。 罠の解説 罠の本質。クロージャとsetTimeout JavaScriptにはクロージャという仕組みがあります

$( "body" ).on( "click", function() { alert( "Goodbye!" ); }); 本来のJavaScriptイベントハンドラは、onclick、onblurのように頭にonをつけます。 しかし、jQueryではonを付けずに使用していますよね。 このonを使うことにより、本来のJavaScriptのようにonclickと指定しているように見えるというのは、個人的には利点だな、と思っています。 もちろん、そんな理由でbindからonに名称が変更されたというわけではありません。bindの問題点を改善して改善してできた機能を統合してできたのが、onです。オールマイティな優れものです。 とはいえ、機能が増えたことで、「引数が増えたー」「ややこしいー」と思うかもしれませんが、考え方によっては、そうでもありません。特にlive、delegateを知らない、使

[phiary] jQuery の代わりに Selectors API の querySelector/querySelectorAll を使うと良いかもよ♪JavaScriptHTML5phiary 本家ブログ『phiary』からの転載になります もしよければこちらからご覧ください -> http://phiary.me/jquery-selector-api-query-selector-all/ 今回は Selectors API の querySelector/querySelectorAll についてサクッとメモ. このメソッドを使えば getElementById や getElementsByClassName の代わりに使えて CSS セレクタでマッチした要素を取得することができます. jQuery を使うまでもないけど DOM 操作したいなぁなんて時に使えます. Usag

jQueryとJavaScript(CoffeeScript)を使った開発をしていて、ユーザーからの入力のイベント処理とAjaxによる通信のイベント処理がごちゃごちゃになって困ったことはありませんか？ 私は最近までよくフラグだらけになる失敗をしました。 このような問題を解決する道具のひとつとしてステートマシンがあります。 CoffeeScriptを使って試行錯誤した結果、短く簡単に作れるようになったので紹介してみたいと思います。 demo_state_machine.coffeeはサンプルのソースコードです。 DemoSMがステートマシンで、アクションのハッシュを引数にして関数として呼び出します。 ステートマシンに対してイベントを送る(sm().ev1(), sm().ev2()などをコールする)と、内部のステートが変わりアクションが実行されます。 デバッグモードも用意してあり、sm.se

・firebug https://addons.mozilla.jp/firefox/details/1843 使い慣れてしまったので手放せません。AJAXのデバッグや読み込み状況を簡単に把握できるのでやっぱり便利です。 ・Web Developer http://chrispederick.com/work/web-developer/ JavaScript実行後のソースを見ることもできて、便利。 ・Screenshoter Fixed https://addons.mozilla.org/ja/firefox/addon/screenshoter-fixed/?src=api ブラウザのウィンドウサイズに関わらず、ページ全体のスクリーンショットがとれる。 ・User Agent Switcher UA切り替え ・HostAdmin 開発サーバーと本番サーバーの切り替えに。 ・YSlow