この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ

どんどん複雑化するJavaScript開発。KADOKAWAが運営するオンラインメディア「WPJ」から、チームで仕事をするときの「ちょっとしたお作法」や、デバッグを効率化する方法など、JavaScriptのコードを書くときに役立つ10本の記事をお届けします。

JavaScriptの現状を支えるエコシステム群を軽く紹介して、モジュールについて少し掘り下げた勉強会Read less

連載のはじめに みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎⁠」⁠ の連載を担当させていただく本橋佑介です。 本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。 第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。 JavaScript JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。 また、今ではNode.jsをサーバサイドで利用することが増え、

はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプリのクラッシュと比べて、あまり多いとは思いません。むしろ、一昔前に比べてかなり改善しているという認識です。iOSのバージョンが古いとかでなければ、現状でも十分ユーザビリティの改善につながっているでしょう。 しかし、この問題の結構大部分を占めているのは個人的に

クロスブラウザを意識した「transitionend 」 CSS Niteビギナーズ：HTML5+CSS3でwebKitTransitionEnd を紹介したところ、「クロスブラウザでどうするの？」と質問をいただいたので補足しておきます。 次のようなtransitionアニメーションがあったとして、 div{ background: #FF0000; border: 1px solid black; width:100px; height: 100px; margin:20px; position: relative; -webkit-transition:all 400ms linear; -moz-transition:all 400ms linear; -ms-transition:all 400ms linear; -o-transition:all 400ms linear; t

jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

ついにこの時を迎えてしまった。 不満はない。しかし、居心地のよいHelm.elとお別れをしなければならないのかと思うと小指の古傷がうずいて仕方がない。私を引き止めようとしているのだろうか、まるで考えなおせといわんばかりに。 だが、私の小指はもう…...。 …...いや。 ああ、少し昔話をしよう。 私はその昔、Emacsを最高に使いこなせるようにと小指の修行をしていた。もうずいぶん昔の話だ。 2,3年ぐらい前だ。 なぜそのような修行をしていたのかというと最高の小指を用意するためである。もちろん、最高のEmacsに応えるために。 iPadやiPhoneは小指だけで操作し、かの松尾象山も躊躇したという片手小指逆立ち、小指ピンポンダッシュ、アマゾンの奥地にて小指を餌に見立てたピラニア小指一本釣りなど、様々な修行をしてきた。 なかでも特に困難を極め、私の小指もこれまでかと覚悟した修行がひとつあって、

このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav

JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo

以下はプロトタイプ的継承だけで一通りの機能を実現できる、という一つの例です。もちろん他にも書き方はありますし、newを使うのがよくないと主張しているわけではないです。 (誤解を生みそうな文体が混じっているようなので追記: 2011/5/14) 春ですし、少し初心者向けの記事を書きます。タイトル通り、JavaScriptのオブジェクト指向について。ちょっと長くなるので目次です。 クラス（に相当するオブジェクト）を作る オブジェクトからオブジェクトを作る（インスタンス化） 単一継承 多重継承 privateは諦めましょう 親のメソッドを呼ぶ コンストラクタ instanceofに対応する ダックタイピングのススメ JavaScript標準のオブジェクト指向といえばnewやらprototypeやらを書く必要がありますが、これらは書くのが面倒臭い上に気をつけないといけない点がたくさんあります。Ja

iPhone & iPadのナビゲーションとして使用されている、メニューリストをクリックすると、 スライドして次のリストが現れるメニューUI。 Webサイト上でもこれを使って、メニューを構成するのもおもしろいかと思い、 jQueryで実験的につくってみました。 まずはサンプルから。 リスト内の「▲（右向き）」が付いているものをクリックすると、次のリスト一覧がスライドして現れます。 スライド後は前のリストに戻るための「≪ BACK」を配置。 このサンプルのHTMLソースは以下のような記述。 ◆HTML <div id="ip_menu"> <ul id="parent"> <li><a href="#">≫CONTENTS 01</a> <ul> <li><a href="#">≫SECOND CONTENTS 01</a> <ul> <li><a href="#">≫THIRD CONTE

RegExp オブジェクトは、パターンでテキストを検索するために使用します。 正規表現を詳しく知りたい方は JavaScript ガイド の 正規表現 を参考にしてください。 解説 リテラル記法とコンストラクター RegExp オブジェクトを生成するには二通りの方法があります。リテラル記法とコンストラクターです。 リテラル記法は引数をスラッシュで囲み、引用符は使用しません。 コンストラクター関数の引数はスラッシュで囲むのではなく、引用符を使用します。 以下の三つの式は、同じ正規表現を生成します。 /ab+c/i new RegExp(/ab+c/, 'i') // リテラル記法 new RegExp('ab+c', 'i') // コンストラクター リテラル記法では、正規表現が評価されるときにコンパイルを行います。正規表現が変化しない場合は、リテラル記法を使用してください。例えばループ内で

はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ