フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン！と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからというだけではなく、他の開発者の技術力を保つためにトレンドについていくことも私の責任のひとつです。 初心者が(そして経験者が)トレンドに付いていこうとして混乱する様を私はよく見かけます。 私は2017年、多くの友人に、キャリアを積むために何を学ぶべきかについて

Photo by Christiaan Colen 高村です。 エンジニアで「実践的な勉強はつい後回しにしちゃって…」という人って結構いると思います。 で、みんな「いつか時間ができたらやろうと思って…」とか言いますけど、時間ができることなんて一生ないですよね？ あるいは、情報系の記事や技術書などを買って、ちょろっと読んだだけで勉強できた気になっちゃったり、本を買っただけで満足しちゃったりしますよね。実際は何も身についてないのに。 私も最近、ちょっとそんな感じになっちゃっていたので、勉強がてらスライド作成用のmarkdownエディタを自作してみました。 今回はそのmarkdownエディタの話と、「エンジニアは動くモノを作るのが一番勉強になる」という話をします。 ■なぜ「動くモノを作る」と勉強になるのか ◆モノを作るのに必要な技術や知識がまとめて得られるから そりゃそうだろって感じですけど、そ

■ モチベーションサービスを継続的に改善していく上で、バグを避けることはできません。そこで、バグが混入した時にそれにいち早く気付ける仕組みが必要になります。 Webサービス開発ではふつう、ユニットテストを書きます。一連のページ遷移（動線）をチェックするE2Eテストを書くこともあります。これらを用いることで、バグに簡単に気づくことが出来ます。 しかし、フロントエンドのエラーには微妙なページデザインの崩れなども含まれます。この場合、単にDOMの存在やページ遷移の可否をチェックするだけでは不十分です。 このようなエラーチェックに関しては、2018年になった今も、人が直接見なければ良し悪しがわかりづらいというやっかいな側面があります。かといって、主要なページを毎日手でチェックするのは非常に手間がかかってしまいます。 ■ 自動でページのスクリーンショットを取るそこで、ChromeをNodeから操作す

TOKYO FRONTEND 2018 - FRONTEND開発最前線 2018年に求められる力 Session02 スライド https://techplay.jp/event/655683

JavaScriptでの開発にライブラリとフレームワークは欠かせないと言っても過言ではありません。しかし、種類が多すぎて選ぶのに迷うという方は多いのではないでしょうか？ そこで本記事では、人気のJavaScriptフレームワーク＆ライブラリをまとめました。各フレームワーク・ライブラリの特徴を解説していますので、「.js」選びに迷った際には、ぜひ参考にしていただければ幸いです。 JavaScriptライブラリとフレームワークの違い JavaScriptライブラリとJavaScriptフレームワークがあるのは知っているものの、実は違いをよく分かっていないという方は多いのではないでしょうか？ たとえば、Reactはライブラリで、Angularはフレームワークですが、解説記事でも混同して使われるケースがしばしば見受けられます。開発で利用するならそれぞれの役割の違いを正しく理解しておいた方がよいでし

昨今のJavaScriptのViewライブラリは以下の特徴を備えています。 DOM構造を宣言的に記述できる 動的な値のマッピングを宣言的に記述できる 再描画の際、DOM構造の変異を最小限に留める 例えば、ReactであればJSXと仮想DOMによるdiff/patch処理によってこれらを実現しています。 一方、hyperHTML（およびlit-html）はECMAScriptの構文であるTagged Template Literalを使ってこれらの機能を実現するライブラリです。 import hyper from 'hyperhtml/esm'; const render = () => { hyper(document.getElementById('container'))` <h1>Hello</h1> <p>It is ${new Date().toLocaleString()}</

🔥 2022年にサイトの作りを変えまして、もう現状はこの記事の限りではありません。もしこちらの記事の実装を参照されるのであれば こちらのブランチ を参照ください。 これで何度目の挑戦でしょうか。記憶する限り、２年ぶり１０度目くらいのブログでございます。会社のパイセンの@ymotongpooさんは１２年もご自身のブログを継続されており、日々コンテンツとその作業に耐えうるだけの筋肉を増やし続けられているのを横目に、私はといえば過去に１年以上続いた書きものは日記も含めて一切なく、ブログはというと思い返してみれば2004年ごろのライブドアブログから始まり、辞めては乗り換え辞めては乗り換えを繰り返してきた挙句、最終的にはJekyllいじったあたりでさっぱり音信不通になったのが２年前。並びに、筋肉事情に関して申し上げると、最後にジムに行ったのも気づけば１年半が経っており、会員権が腐り始めている小太り

# 作業ディレクトリ作成(以降、フルパスを参照するときは/path/to/seleniumと記述) $ mkdir selenium && cd selenium # 空ファイル作成 $ echo "{}" > package.json # SeleniumStandaloneをインストール $ npm install selenium-standalone --save-dev # 以降、/path/to/selenium/node_modules/.binにPath通していたら、短く書けます $ node_modules/.bin/selenium-standalone install # WebDriverIOをインストール $ npm install webdriverio --save-dev # WebDriverIOの設定(別記1参照のこと) $ node_modules/.

こんにちは。フロントエンドのつっちーです。 以前は最先端感をプンプンさせていたSPA（シングルページアプリケーション）ですが、最近では事例や情報が増え、当たり前に選択される技術となってきたように感じます。今後もどんどん使われていくのでしょう。ですが、だからといってサーバーサイドテンプレート（Haml、Slim、テンプレートとしてのPHPなど）やHTMLファイルへのマークアップが無くなるわけではありません。SEO対策、CMSやフレームワークへの適応など、様々な理由でまだまだ使われていくはずです。 ではSPAと、サーバーサイドテンプレートやHTMLファイルへのマークアップと、両方に使えるフレームワークはないものだろうか？ そう思い調べてみたところ、Vue.js がまさにそれでした。案件でも実際に使用し、大きなメリットを感じられたため、記事にまとめておこうと思います。 Vue.jsのSPAでの用

って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C

freeeの価値基準の一つである、ユーザーにとって「本質的（マジ）で価値ある」ものを届けるということ。本連載ではそれに向かって、日々挑戦を続ける開発現場の事例をお伝えします。本記事では、freeeでのフロントエンド環境の改善への取り組みである、Ruby on Railsアプリケーションにおけるフロントエンド環境のモダン化について紹介します。Rails5.0以前の標準的なフロントエンドのビルド基盤であるSprocketsアセットパイプラインがもたらした問題について解説するとともに、その仕組みに依存して成長してきたプロダクトがいかにしてSprocketsへの依存を断ち切ったかについて説明します。 対象読者 Ruby on Rails 5.0以前のアプリケーションのフロントエンド開発で、npmによるモジュール管理やwebpackなどによるビルドを行いたいのにそれがなかなか実現できずに困っている方

最初に この記事はVue.js アドベントカレンダー#4 25日目の記事です。 この一ヶ月でVue.jsについてのナレッジが100記事増えたことになります。やったね！！ 2018/8/2 追記 現在では vue-cli の3.x.xがリリースされており、スキャフォールドからVueプロジェクト作成の工程が若干異なりますのでご留意ください。 この記事でやること バックエンドをFirebaseに丸投げしたユーザ登録 → サインイン → サインアウト までのチュートリアルです。 認証の実装は面倒 フロントエンドの技術を使ってちょっとしたアプリケーションを作った時、認証やユーザ管理を実装するのはそれなりに面倒かと思います。フレームワークの選定、DBは何使う?など決めなければならないこと、覚えなくてはならないことがたくさんありますね。 そこでBaaSを使います。 BaaSって？ Backend as

できらぁ！ 面白法人カヤックのエンジニアのごんです。 昨今のフロントエンドといえば、 Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、 始める前にうんざりしてしまうと話題ですが、 実は、最新のブラウザに限って言えば、そんなことはなく、 ECMAScript の新しい構文や JavaScript Modules など、 多くの機能がネイティブの状態でも使えます。 もちろん、古いブラウザのサポートや、通信パフォーマンスのことを考えると、 ビルドツールを使ったほうが良いのは間違いないのですが、 JavaScript の新しい機能に触れてみたり、自分用のツールを作るぶんには十分でしょう。 ソースコードはこちら！ そんなわけで、今回はビルドツールなしでウェブアプリを作ってみました。 ECMAScript に関するクイズゲームです。 最新版の Google Chrom

JavaScriptをはじめとしたブラウザサイドのWebプログラミングを総称して「フロントエンドプログラミング」と呼びます。そんなフロントエンド周りの環境は昨今多様化しており、様々なツールが乱立しているため、使いこなすのは至難の技です。 そこで2009年頃から登場したのがタスクランナーです。タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、とても便利です。 タスクランナーという言葉自体は聞いたことがある方もいるかもしれませんが、どんなものなのか、そもそも何なのかというのを、ここで改めて整理してみましょう。今回は2018年こそ取り入れたいおすすめタスクランナー5選をご紹介します。 タスクランナーとは タスクランナーとは、先にも触れたとおり、Web構築に必要な処理を自動で行ってくれるプログラムのことです。 近年のWeb技術は非常に高度化・広範化しており、

ホームページを作るためには、HTMLファイルだけでなく、CSSやJavaScript、画像やWebフォントなど、さまざまなファイルを用意する必要があります。 こうしたWebで必要なファイルをワンパッケージにまとめてくれる便利なものとして、*「Webpack」*という技術が次第に注目を集めています。 Webpackは、複数のファイルを１つのメインファイルにまとめてくれるだけではなく、SassやLESSなどのCSSプリプロセッサー言語をコンパイルしてくれるので、大変便利です。 GruntやGulpのようなタスクランナーと並んで、非常に注目を集めています。 今回は、JavaScriptの開発現場で人気を集めている*「Webpack」について、入門記事としてその概要や簡単な使い方*をご紹介します。 Webpackとは？ Webpackとは、CSSやJavaScript、画像などWebコンテンツを構

JavaScriptは昔からあるプログラミング言語ですが、特に近年ではウェブ技術の盛り上がりにともない、JavaScriptの人気も上昇しています。 JavaScriptを学ぼうとすると、数多くの書籍・記事を見つけることができます。しかしながら、それらの多くはすでに他の言語でプログラミングを学習している人向けであったり、JavaScriptをもうすでに使っている人向けの小さなアドバイスであったりします。よってプログラミング初心者がJavaScriptを学ぼうとすると、様々な困難に直面します。特に、体系的にまとまった初心者向けの文献を探すのは、骨が折れます。 そこで、この連載記事では、いままでプログラミングを学んだことがない人を対象に、JavaScriptによるプログラミングを習得してもらうことを目標にしています。プログラミングの楽しさを、ぜひ体験してください。 連載目次 基礎と文法（この記